Use of CSS Grid on mobile view

Simounet · Jan 10, 2019 · 7d2cd7b · 7d2cd7b
1 parent 83a1b83
commit 7d2cd7b
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 43 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/sass/style.scss b/sass/style.scss
@@ -364,7 +364,9 @@ html:not(.no-js) .feed--closed {
     display: none;
 }
 
-%img-vertical-align {
+.feed__item img {
+    float: left;
+    margin-left: 1.4em;
     margin-right: 0.3em;
     vertical-align: middle;
 
@@ -373,13 +375,6 @@ html:not(.no-js) .feed--closed {
     }
 }
 
-.feed__item img {
-    float: left;
-    margin-left: 1.4em;
-
-    @extend %img-vertical-align;
-}
-
 .mark-as-read {
     padding: 0 0.4rem;
     font-size: 0.8em;
@@ -403,16 +398,14 @@ html:not(.no-js) .feed--closed {
     }
 
     @media($breakpoint-max) {
-        display: flex;
+        display: grid;
+        grid-template-columns: 40px auto 40px;
+        grid-template-areas: "favicon site date" "favorite title mark";
         align-items: center;
         white-space: inherit;
         min-height: 4em;
     }
 
-    .feed-icon {
-        @extend %img-vertical-align;
-    }
-
     .article__feed-title {
         display: inline-block;
         width: 10%;
@@ -423,13 +416,24 @@ html:not(.no-js) .feed--closed {
         vertical-align: middle;
 
         @media($breakpoint-max) {
-            display: none;
+            width: auto;
+            grid-area: site;
         }
     }
 }
 
-.article__title,
 .feed-icon {
+    margin-right: 0.3em;
+    vertical-align: middle;
+    justify-self: center;
+    grid-area: favicon;
+
+    @media($breakpoint-max) {
+        margin: 0;
+    }
+}
+
+.article__title {
     @media($breakpoint-max) {
         margin-left: 14%;
     }
@@ -447,7 +451,7 @@ html:not(.no-js) .feed--closed {
 
     @media($breakpoint-max) {
         display: inline-block;
-        width: 65%;
+        grid-area:title;
     }
 
     [class~="event--read"] & a {
@@ -504,8 +508,10 @@ html:not(.no-js) .feed--closed {
     font-size: 0.9em;
 
     @media( $breakpoint-max ) {
-        right: 1%;
-        bottom: 5%;
+        position: relative;
+        right: 0;
+        grid-area: date;
+        justify-self: right;
     }
 }
 
@@ -529,9 +535,12 @@ $article-action-padding: 0.6em;
     }
 
     @media( $breakpoint-max ) {
-        width: 15%;
-        height: 100%;
-        left: 0;
+        position: relative;
+        padding: 0;
+        width: 100%;
+        right: 0;
+        grid-area: favorite;
+        justify-self: left;
     }
 }
 
@@ -548,9 +557,12 @@ $article-action-padding: 0.6em;
     cursor: pointer;
 
     @media( $breakpoint-max ) {
-        padding: 0.9em 0.5em 3em 1em;
-        width: 15%;
+        position: relative;
+        padding: 0;
+        width: 100%;
         height: 100%;
+        grid-area: mark;
+        justify-self: right;
     }
 }