Add IE10+ fixes

client/src/App.vue

@@ -36,9 +36,7 @@
     },
 
     data() {
-      return {
+      return {}
-
-      }
     },
 
     mounted() {
@@ -58,6 +56,13 @@
     min-height: 100vh;
     grid-template-areas: "h" "c";
 
+    /*
+     * For IE10+
+     */
+    display: -ms-grid;
+    -ms-grid-rows: auto 32px 1fr; // 1 extra row for gap
+    -ms-grid-columns: 1fr;
+
     &--red { // todo: define a better name when usage is clear
       background-color: $red;
     }
@@ -69,8 +74,42 @@
       justify-content: space-around;
       background-color: $color-white;
       grid-auto-rows: 60px;
+      width: 100%;
+
+      grid-template-columns: 1fr 1fr 1fr;
+
+      /*
+       * For IE10+
+       */
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr 1fr;
+      -ms-grid-rows: 60px 60px;
+
+      /*
+      * For IE10+
+      */
+      & > :nth-child(1) {
+        -ms-grid-column: 1;
+        -ms-grid-row-align: center;
+      }
+
+      /*
+      * For IE10+
+      */
+      & > :nth-child(3) {
+        -ms-grid-column: 3;
+        -ms-grid-row-align: center;
+        -ms-grid-column-align: end;
+
+        justify-self: end;
+      }
+
+      & > :nth-child(4) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+        -ms-grid-column-span: 3;
+      }
 
-      grid-template-columns: auto 1fr auto;
     }
 
     &__header-logo {
@@ -80,11 +119,26 @@
       font-family: $sans-serif-font-family;
       display: flex;
       justify-self: center;
+
+      /*
+      * For IE10+
+      */
+      -ms-grid-column: 2;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: center;
     }
 
     &__footer {
       grid-area: f;
       display: none;
     }
+
+    /*
+     * For IE10+
+     */
+    & > :nth-child(2) {
+      -ms-grid-row: 3;
+      -ms-grid-column: 1;
+    }
   }
 </style>

client/src/components/FilterBar.vue

@@ -32,6 +32,5 @@
     border: 1px solid rgba(228, 228, 228, 0.9);
     border-left: 0;
     border-right: 0;
-
   }
 </style>

client/src/components/rooms/RoomWidget.vue

@@ -62,6 +62,13 @@
     overflow: hidden;
     @include widget-shadow;
 
+    /*
+     * For IE10+
+     */
+    display: -ms-grid;
+    -ms-grid-rows: 210px 1fr;
+    -ms-grid-columns: 1fr;
+
     &--red {
       background-color: $red;
     }
@@ -112,6 +119,11 @@
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
+
+      /*
+       * For IE10+
+       */
+      -ms-grid-row: 2;
     }
   }
 </style>

client/src/pages/module.vue

@@ -54,5 +54,20 @@
     display: grid;
     justify-items: center;
     grid-template-columns: 2fr 6fr 2fr;
+    
+    /*
+     * For IE10+
+     */
+    display: -ms-grid;
+    -ms-grid-columns: 2fr 6fr 2fr;
+
+    & > :nth-child(1) {
+      -ms-grid-column: 1;
+      -ms-grid-column-align: center;
+    }
+    & > :nth-child(2) {
+      -ms-grid-column: 2;
+      -ms-grid-column-align: center;
+    }
   }
 </style>

client/src/pages/rooms.vue

@@ -55,5 +55,30 @@
     width: 100%;
     justify-self: center;
     box-sizing: border-box;
+
+    /*
+     * For IE10+
+     */
+    display: -ms-grid;
+    -ms-grid-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: 260px;
+
+    /*
+     * SHAME SHAME SHAME
+     * this is very hacky, but we have a dynamic amount of elements. better to be safe than sorry
+     * SHAME SHAME SHAME
+     */
+    @for $i from 1 to 101 {
+      & > :nth-child(#{$i}) {
+        @if ($i%3) == 0 {
+          -ms-grid-column: 3;
+        } @else {
+          -ms-grid-column: ($i%3);
+        }
+
+        -ms-grid-row: floor(($i - 1)/3)+1;
+      }
+    }
+
   }
 </style>