Disable resizing in mobile mode

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

@@ -206,31 +206,33 @@ export default {
     },
 
     resizeHorizontal(event, row, col) {
-      if(event.offsetX < 0){
-        this.mouseDragPos.x = event.x;
-        this.horizontalResizeObject.row = row;
-        this.horizontalResizeObject.col = col;
-        document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
-        document.addEventListener("mouseup", this.eventRemover, false);
-        document.getElementsByTagName("html")[0].classList.add("no-select");
-        this.dragEnabled = false;
-      }
+      const mobileMode = window.innerWidth < 992;
+      if(event.offsetX >= 0 || mobileMode)
+        return;
+
+      this.mouseDragPos.x = event.x;
+      this.horizontalResizeObject.row = row;
+      this.horizontalResizeObject.col = col;
+      document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
+      document.addEventListener("mouseup", this.eventRemover, false);
+      document.getElementsByTagName("html")[0].classList.add("no-select");
+      this.dragEnabled = false;
     },
 
-    resizeVertical(event, index){
-      if(index == 0 || this.deleting){
+    resizeVertical(event, index) {
+      const mobileMode = window.innerWidth < 992;
+      if(index == 0 || this.deleting || mobileMode)
         return;
-      }
+      
       const clickTarget = event.target;
-      if(clickTarget.className != "row"){
+      if(clickTarget.className != "row")
         return;
-      }
       
-      if(event.offsetY > this.layout[index].height){
+      if(event.offsetY > this.layout[index].height)
         console.log(":After event")
-      } else {
+      else
         index--;
-      }
+
       this.mouseDragPos.y = event.y;
       this.verticalResizeObject.index = index; 
       document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
@@ -249,10 +251,10 @@ export default {
 
     mobileLayoutResize(){
       const winWidth = window.innerWidth;
-      if((this.prevWinWidth - 992) > 0 && (winWidth - 992) > 0){
+      if(this.prevWinWidth > 992 && winWidth > 992) {
         return;
       }
-      if((this.prevWinWidth - 992) < 0 && (winWidth - 992) < 0){
+      if(this.prevWinWidth < 992 && winWidth < 992) {
         return;
       }
 
@@ -516,31 +518,6 @@ export default {
       pointer-events: none;
     }
   }
-
-  // Must be outside ".row" or else after affect children
-  .row:not(:first-of-type){
-    &::before{
-      content: " ";
-      background-color: rgba(0, 0, 0, 0);
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: $gap;
-      cursor: n-resize;
-    }
-  }
-
-  .row:last-of-type{
-    &::after{
-      content: " ";
-      background-color: rgba(0, 0, 0, 0);
-      position: absolute;
-      bottom: -$gap;
-      width: 100%;
-      height: $gap;
-      cursor: n-resize;
-    }
-  }
     
   .col, .col-preview {
     flex-basis: 0; // a basis of 0px. very important!
@@ -556,16 +533,6 @@ export default {
     &:not(:last-of-type) {
       margin-bottom: $gap / 2;
     }
-
-    &:not(:first-of-type)::before{
-      content: " ";
-      background-color: rgba(0, 0, 0, 0);
-      position: absolute;
-      left: - $gap - 2px;
-      width: $gap;
-      height: 100%;
-      cursor: w-resize;
-    }
   }
 
   .col-preview {
@@ -756,6 +723,31 @@ export default {
       }
     }
 
+    // Must be outside ".row" or else after affect children
+    .row:not(:first-of-type){
+      &::before{
+        content: " ";
+        background-color: rgba(0, 0, 0, 0);
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: $gap;
+        cursor: n-resize;
+      }
+    }
+
+    .row:last-of-type{
+      &::after{
+        content: " ";
+        background-color: rgba(0, 0, 0, 0);
+        position: absolute;
+        bottom: -$gap;
+        width: 100%;
+        height: $gap;
+        cursor: n-resize;
+      }
+    }
+
     .col{
       flex-grow: 0;