Browse Source

created grid system and used it for home

Bachir Soussi Chiadmi 6 years ago
parent
commit
74f5373096

+ 3 - 0
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -14,6 +14,9 @@
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
+      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
+      //   overflowBehavior:{x:'h',y:'scroll'}
+      // });
     };
 
     function  initAjaxLinks(){

File diff suppressed because it is too large
+ 0 - 0
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css


+ 3 - 0
sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -14,6 +14,9 @@
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
+      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
+      //   overflowBehavior:{x:'h',y:'scroll'}
+      // });
     };
 
     function  initAjaxLinks(){

+ 20 - 7
sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -8,6 +8,7 @@
 
 @import 'base/reset';
 @import 'base/colors';
+@import 'base/grid';
 @import 'base/layout';
 
 // header
@@ -93,13 +94,25 @@ header[role="banner"]{
 }
 
 // main
-// main[role="main"]{
-//   .layout-content{
-//     p{
-//       white-space:normal;
-//     }
-//   }
-// }
+main[role="main"]{
+  .layout-content{
+    .row{
+      height:100%;
+      overflow: hidden;
+      .col{
+        max-height: 100%;
+        position: relative;
+      }
+      .col>*{
+        border-top: 1px solid red;
+        border-bottom: 1px solid red;
+        background-color: $transparent-bg;
+        max-height: 100%;
+      }
+    }
+  }
+}
+
 
 #agenda{
   pointer-events: auto;

+ 49 - 0
sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss

@@ -0,0 +1,49 @@
+// http://www.thesassway.com/intermediate/simple-grid-mixins
+
+$default_gap: 1em;
+$default_sum: 12;
+
+@mixin row() {
+  font-size: 0;
+  white-space: nowrap;
+  position: relative;
+}
+
+%col-reset {
+    width: 100%;
+    display: inline-block;
+    font-size: 16px;
+    box-sizing: border-box;
+    white-space:normal;
+}
+
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
+  @extend %col-reset;
+  padding-left: $gap*$offset;
+  padding-right: $gap;
+  &:last-child{padding-right: 0;}
+  margin-left: percentage(($col/$sum)*$offset);
+
+  @media only screen and (min-width: 768px) {
+    width: percentage($col/$sum);
+    vertical-align: $align;
+  }
+}
+
+.row{
+  @include row;
+}
+
+@for $c from 1 through $default_sum {
+  .col-#{$c} {
+      @include col($c);
+  }
+}
+
+@for $c from 1 through $default_sum - 1 {
+  @for $o from 1 through $default_sum - $c {
+    .col-#{$c}-offset-#{$o} {
+      @include col($c, $o);
+    }
+  }
+}

+ 4 - 4
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss

@@ -32,13 +32,13 @@ main[role="main"]{
   padding:7em 2em 9em;
   width:100%; height:100%;
   overflow: hidden;
-  .layout-content>*{
-    pointer-events: auto;
-  }
-  .layout-content, .region-content, #block-edlptheme-content{
+  .layout-content{
     width: 100%; height:100%;
     overflow:hidden;
   }
+  .layout-content>*{
+    pointer-events: auto;
+  }
 }
 
 footer[role="contentinfo"]{

+ 3 - 0
sites/all/themes/custom/edlptheme/templates/block/block--system-main-block.html.twig

@@ -0,0 +1,3 @@
+{% block content %}
+  {{ content }}
+{% endblock %}

+ 1 - 0
sites/all/themes/custom/edlptheme/templates/layout/region--content.html.twig

@@ -0,0 +1 @@
+{{ content }}

Some files were not shown because too many files changed in this diff