Correct collection design grid #22

Fonsart · Mar 16, 2016 · 14c4e69 · 14c4e69
1 parent 591691c
commit 14c4e69
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 47 deletions.
diff --git a/assets/components/molecules/group-teaser.hbs b/assets/components/molecules/group-teaser.hbs
@@ -11,14 +11,10 @@ notes: |
     {{> thumbnail thumbnail-object=group-object }}
   </a>
   <div class="group-caption">
-    <h5>
-      <a href="detail.html">{{group-object.title}}</a>
-    </h5>
-  </div>
-  <div class="group-counter">
-    <h6>Thème</h6>
-    <small><i class="glyphicon glyphicon-user"></i></small>&thinsp;{{group-object.members_count}}
-    <small><i class="glyphicon glyphicon-file"></i></small>&thinsp;{{group-object.medias_count}}
+    <a href="detail.html">{{group-object.title}}</a>
+    <div class="group-counter">
+      {{group-object.medias_count}}&nbsp;<small><i class="glyphicon glyphicon-file"></i></small>
+    </div>
   </div>
   <div class="group-metadata">
     <a href="#">Vie quotidienne</a> <span class="text-clear">&rsaquo;</span> <a href="#">Loisirs</a> <span class="text-clear">&bull; Crée par</span> <a href="#">Sylvie Bazzanella</a>

diff --git a/assets/sass/molecules/_group-teasers.scss b/assets/sass/molecules/_group-teasers.scss
@@ -13,10 +13,41 @@ $media-caption-height: 56px;
   .media-grid & {
     float: left;
     margin: 8px 8px ($media-caption-height + 8px) 8px;
+    background-color: $concrete;
+    transition: background 0.3s;
     &:hover {
       color: $tundora;
+      background: darken($concrete, 8%);
       .group-caption {background: darken($concrete, 8%);}
     }
+    .thumbnail{
+      width: 94%;
+      height: 94%;
+      margin: 3% 3%;
+      position: relative;
+      z-index: 1;
+      box-shadow: inset 0 0 0 5px $white;
+      &:after {
+        content: "\00a0";
+        border-bottom: 5px solid darken($concrete, 20%);
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        bottom: -5px;
+        left: 5px;
+        right: 5px;
+      }
+      &:before {
+        content: "\00a0";
+        border-bottom: 10px solid darken($concrete, 12%);
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        bottom: -10px;
+        left: 10px;
+        right: 10px;
+      }
+    }
   }
   .media-list & {
     display: block !important;
@@ -44,32 +75,15 @@ $media-caption-height: 56px;
   overflow: hidden;
   transition: background 0.3s;
   box-sizing: border-box;
-  h5 {
-    font-weight: 700;
-    a, a:hover {text-decoration: none;}
-  }
+  a, a:hover {text-decoration: none;}
   .media-grid & {
     background: $concrete;
     position: absolute;
     bottom: $media-caption-height * -1;
     left: 0;
     width: 100%;
     height: $media-caption-height;
-    padding: 0 10px;
-    h5 {
-      display: block; /* Fallback for non-webkit */
-      display: -webkit-box;
-      max-width: 100%;
-      height: $media-caption-height; /* Fallback for non-webkit */
-      margin: 0 auto;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: ($media-caption-height / $font-size-base) / 2.4;
-      padding: 6px 0;
-      margin: 0;
-    }
+    padding: 10px 15px !important;
   }
   .media-list & {
     position: relative;
@@ -83,26 +97,7 @@ $media-caption-height: 56px;
 }
 
 .group-counter {
-  position: absolute;
-  top: 0;
-  left: 16px;
-  padding: 3px 8px;
-  background: $monza;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: ceil(($font-size-base * 0.75));
-  h6 {
-    text-transform: uppercase;
-    color: $white;
-    display: inline;
-    font-size: ceil(($font-size-base * 0.75));
-  }
-  .glyphicon {
-    margin-left: 8px;
-  }
-  .media-list & {
-    display: inline-block;
-    position: static;
-  }
+  .media-grid & {float: right;}
 }
 
 .group-metadata {