big refactoring, opening flagcollection (folder) on the left of main-content

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -23,6 +23,8 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   padding-top: 24px!important;
 }
 
+// build break points for each multiple of cards row
+// cards will always be centered, using all available space
 %grided-width{
   margin:0 auto;
   $m: $column_goutiere;
@@ -31,7 +33,7 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   @while  $bp < 4096px {
     $upbp: $bp + $colw + $m;
     @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
-      width:$bp - $m;
+      width:$bp;
     }
     $bp: $upbp;
   }
@@ -100,14 +102,15 @@ main[role="main"]{
       display: flex;
       flex-direction: row-reverse;
       #content-left{
-        flex-basis: $column_width*2+$column_goutiere;
+        flex-basis: $column_width+$column_goutiere;
+        flex-shrink: 0;
         // width:$column_width*2+$column_goutiere;
         >*{
-          width:$column_width*2+$column_goutiere;
+          width:100%;
         }
       }
       #content-center{
-        flex-basis: $column_width*10+$column_goutiere*9;
+        flex-basis: 110%;
       }
     }
   }

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -5,7 +5,7 @@ $base_font_size:16px;
 // card-medium (210x295)
 // card-small (100x140)
 
-$column_width: 210px;
-$column_goutiere: 15px;
+$column_width: 205px;
+$column_goutiere: 13px;
 
 $card_height: 295px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -395,11 +395,55 @@ aside.messages{
 // | (__/ _ \ ' \  _/ -_) ' \  _|___| |__/ -_)  _|  _|
 //  \___\___/_||_\__\___|_||_\__|   |____\___|_|  \__|
 #content-left{
+  z-index: 5;
+  box-sizing: content-box;
   max-width:1px;
   overflow-x: hidden;
   transition: all 0.3s ease-in-out;
   &.opened{
     max-width: 500px;
+    padding: 0.3em;
+  }
+  >*{
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
+    padding: 0.5em;
+  }
+  .flag-collection{
+    >header{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      h3{
+        // flex-basis: calc(100% - 1em);
+      }
+      .mdi-close{
+        // display: block;
+        // flex-basis: 1em;
+        cursor:pointer;
+        align-self: flex-end;
+      }
+    }
+    >ul{
+      >li{
+        margin:0 0 $column_goutiere 0;
+        padding:0;
+        article.card.minicard{
+          width:100%;
+
+          >header{
+            padding: 0.3em 0.3em 0.1em;
+            h1{
+              margin:0;
+            }
+          }
+          >nav.tools{
+            padding:0 0.2em;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -663,6 +707,9 @@ article.card{
   &.article{
     width:$column_width*2 + $column_goutiere; height:$card_height;
   }
+  &.minicard{
+    height:100px;
+  }
   // &.card-small{
   //   width:100px; height:140px;
   // }