added unfolding captions on hover

l-atelier-des-chercheurs · Dec 30, 2019 · 17904ad · 17904ad
1 parent 1244470
commit 17904ad
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/public/src/vue/components/subcomponents/MediaCard.vue b/public/src/vue/components/subcomponents/MediaCard.vue
@@ -51,7 +51,7 @@
             :preview_size="preview_size"
           />
           <figcaption class="m_media--caption" v-if="!!media.caption">
-            {{ media.caption }}
+            <span>{{ media.caption }}</span>
           </figcaption>
 
           <transition name="slideright" :duration="400">

diff --git a/public/src/vue/style.less b/public/src/vue/style.less
@@ -1741,17 +1741,31 @@ small {
       // bottom: 0;
 
       width: 100%;
-      border-top: 1px solid @c-gris_clair;
-      .font-verysmall;
-      .c-noir;
-      .padding-sides-verysmall;
-      .bg-blanc;
       // .bg-gris_tresclair;
-      line-height: 1.2;
       height: 1.1rem;
+      overflow: hidden;
       // padding-top: @t-skipline/4;
       // margin-bottom: @t-skipline/4;
 
+      span {
+        display: block;
+        width: 100%;
+        padding-left: 2px;
+        padding-right: 2px;
+        border-top: 1px solid @c-gris_clair;
+        .font-verysmall;
+        .c-noir;
+        .bg-blanc;
+        position: absolute;
+        bottom: 0;
+        max-height: 4.9rem;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        // overflow: hidden;
+      }
+    }
+
+    &:not(.is--hovered) .m_media--caption span {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;