Merge branch 'feature/mobile-layout' into 'develop'

Feature/mobile layout

See merge request !21

website/studerende-dk/src/App.vue

@@ -32,6 +32,7 @@
     text-align: center;
     color: $darker-theme-color;
     background-color: $lightest-green-theme-color;
+    min-width: 320px;
   }
 
   * {
@@ -61,7 +62,6 @@
   #site {
     display: flex; 
     flex-direction: column; 
-
     height: 100%;
   }
 

website/studerende-dk/src/components/Header.vue

@@ -57,14 +57,14 @@
   #version-tag {
     color: $light-theme-color;
     font-weight: bold;
-
+    font-size: 0.8em;
     float: right;
     margin-top: -5px;
   }
 
   header {
     width: 100%;
-    padding: 15px $default-margin;
+    padding: 15px 15px;
     z-index: 1;
 
     background-color: $theme-color;
@@ -83,7 +83,7 @@
 
     label {
       cursor: pointer;
-      font-size: 50px;
+      font-size: 2em;
     }
 
     @include no-select;
@@ -110,6 +110,7 @@
       margin: 0;
       line-height: 1em;
       margin-bottom: 2px;
+      font-size: 1.3em;
     }
   }
 
@@ -127,6 +128,28 @@
     cursor: pointer;
   }
 
+  @media only screen and (min-width: $small-mobile-width-cutoff) {
+    #logo{
+      h1{
+        font-size: 2em;
+      }
+    }
+
+    #version-tag {
+      font-size: 1em;
+    }
+
+    header{
+      padding: 15px $default-margin/2;
+    }
+
+    #hamburger-menu{
+      label{
+        font-size: 50px;
+      }
+    }
+  }
+
   @media only screen and (min-width: $mobile-width-cutoff) {
     #hamburger-menu {
       display: none;
@@ -139,5 +162,9 @@
     #hamburger-content {
       display: none;
     }
+
+    header{
+      padding: 15px $default-margin;
+    }
   }
 </style>
\ No newline at end of file

website/studerende-dk/src/scss/_variables.scss

@@ -16,3 +16,4 @@ $white-bg-color: #fbfbfb;
 $default-margin: 40px;
 
 $mobile-width-cutoff: 992px;
+$small-mobile-width-cutoff: 460px;
\ No newline at end of file

website/studerende-dk/src/views/Home.vue

@@ -62,6 +62,7 @@ export default {
       mouseDragPos: {x: 0, y: 0},
       verticalResizeObject: {index: 0},
       horizontalResizeObject: {row: 0, col: 0},
+      prevWinWidth: 1000,
       draggedBlock: null,
       activePreview: null,
       dragEnabled: true
@@ -151,6 +152,36 @@ export default {
       this.dragEnabled = true;
     },
 
+    mobileLayoutResize(){
+      const winWidth = window.innerWidth;
+      if((this.prevWinWidth - 992) > 0 && (winWidth - 992) > 0){
+        return;
+      }
+      if((this.prevWinWidth - 992) < 0 && (winWidth - 992) < 0){
+        return;
+      }
+
+      const rows = document.getElementsByClassName("row");
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const cols = row.getElementsByClassName("col");
+        for (let j = 0; j < cols.length; j++) {
+          const col = cols[j];
+          if(winWidth < 992){
+            col.style.flexGrow = 0;
+          }else{
+            col.style.flexGrow = this.layout[i].blocks[j].width;
+          }
+        }
+        if(winWidth < 992){
+          row.style.height = 'auto';
+        }else{
+          row.style.height = this.layout[i].height + 'px';
+        }
+      }
+      this.prevWinWidth = winWidth;      
+    },
+
     removeBlock(side, row, col) {
       this[side][row].blocks.splice(col, 1);
       if (this[side][row].blocks.length === 0)
@@ -336,6 +367,15 @@ export default {
       }
     },
   },
+  mounted(){
+    this.mobileLayoutResize();
+    this.prevWinWidth = window.innerWidth;
+    window.addEventListener('resize', this.mobileLayoutResize);
+  },
+
+  updated(){
+    this.mobileLayoutResize();
+  },
 
   computed: {
     previewType() {
@@ -377,7 +417,8 @@ export default {
 
   .row {
     display: flex;
-    margin-bottom: $gap;
+    margin-bottom: $gap/2;
+    flex-direction: column;
     position: relative;
     min-height: 150px;
     
@@ -408,6 +449,10 @@ export default {
   .col {
     position: relative;
 
+    &:not(:last-child) {
+      margin-bottom: $gap / 2;
+    }
+
     &:not(:first-of-type)::before{
       content: " ";
       background-color: rgba(0, 0, 0, 0);
@@ -430,6 +475,7 @@ export default {
     border: none;
     background: none;
     padding: 0;
+    display: none;
 
     svg {
       fill: #777f80;
@@ -443,4 +489,52 @@ export default {
       }
     }
   }
+
+  @media only screen and (min-width: $mobile-width-cutoff) {
+    #grid{
+      padding: $gap;
+    }
+
+    .row{
+      flex-direction: row;
+      margin-bottom: $gap;
+    }
+
+    .col{
+      flex-grow: 0;
+
+       &:not(:first-child) {
+        margin-left: $gap / 2;
+        
+        &::before{
+          content: " ";
+          background-color: rgba(0, 0, 0, 0);
+          position: absolute;
+          left: - $gap - 2px;
+          width: $gap;
+          height: 100%;
+          cursor: w-resize;
+        }
+      }
+      &:not(:last-child) {
+        margin-right: $gap / 2;
+        margin-bottom: 0;
+      }
+    }
+
+    .add-block{
+      display: initial;
+    }
+
+    // Must be outside ".row" or else after affect children
+    .row::after{
+          content: " ";
+          background-color: rgba(0, 0, 0, 0);
+          position: absolute;
+          bottom: - $gap;
+          width: 100%;
+          height: $gap;
+          cursor: n-resize;
+    }
+  }
 </style>