Unified file card now supports small and medium size

Duration styling/position updated and added download date time

src/app/components/unified-file-card/unified-file-card.component.scss

@@ -1,76 +1,112 @@
-.example-card {
+.file-mat-card {
     width: 200px;
     height: 200px;
     padding: 0px;
     cursor: pointer;
-  }
+}
+
+.small-mat-card {
+  width: 150px;
+  height: 150px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.menuButton {
+  right: 0px;
+  top: -1px;
+  position: absolute;
+  z-index: 999;
   
-  .menuButton {
-    right: 0px;
-    top: -1px;
-    position: absolute;
-    z-index: 999;
+}
+
+/* Coerce the <span> icon container away from display:inline */
+.mat-icon-button .mat-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.image {
+  width: 200px;
+  height: 112.5px;
+  object-fit: cover;
+}
+
+.image-small {
+  width: 150px;
+  height: 84.5px;
+  object-fit: cover;
+}
+
+.example-full-width-height {
+  width: 100%;
+  height: 100%
+}
+
+.centered {
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 32px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.max-one-line {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 1.2em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.duration-time {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  z-index: 99999;
+  background: rgba(255,255,255,0.6);
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.download-time {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 99999;
+}
+
+@media (max-width: 576px){
+  
+  // .example-card {
+  //   width: 175px !important;
+  // }
+
+  // .image {
+  //     width: 175px;
+  // }
     
-  }
-  
-  /* Coerce the <span> icon container away from display:inline */
-  .mat-icon-button .mat-button-wrapper {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .image {
-    width: 200px;
-    height: 112.5px;
-    object-fit: cover;
-  }
-  
-  .example-full-width-height {
-    width: 100%;
-    height: 100%
-  }
-  
-  .centered {
-    margin: 0 auto;
-    top: 50%;
-    left: 50%;
-  }
-  
-  .img-div {
-    max-height: 80px;
-    padding: 0px;
-    margin: 32px 0px 0px -5px;
-    width: calc(100% + 5px + 5px);
-  }
-  
-  .max-two-lines {
-    display: -webkit-box;
-    display: -moz-box;
-    max-height: 2.4em;
-    line-height: 1.2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    bottom: 5px;
-    position: absolute;
-  }
-
-  .duration-time {
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    z-index: 99999;
-  }
-  
-  @media (max-width: 576px){
-   
-    .example-card {
-      width: 175px !important;
-    }
-
-    .image {
-        width: 175px;
-    }
-     
-  }
+}