Fix styling for start and rooms pages in IE

client/src/components/HeaderBar.vue

@@ -70,7 +70,7 @@
      * For IE10+
      */
     -ms-grid-columns: 1fr 1fr 1fr;
-    -ms-grid-rows: 60px 60px;
+    -ms-grid-rows: 50px 50px;
 
     /*
     * For IE10+

client/src/components/rooms/RoomWidget.vue

@@ -93,6 +93,7 @@
     @supports (display: grid) {
       display: grid;
     }
+    height: 260px;
     grid-template-rows: 210px 1fr;
     /*overflow: hidden;*/
     @include widget-shadow;
@@ -116,6 +117,21 @@
       padding: 22px;
       color: $color-darkgrey-1;
       cursor: pointer;
+
+      /*
+      * For IE10+
+      */
+      display: -ms-grid;
+      -ms-grid-rows: 80px 30px 30px;
+      & > :nth-child(1) {
+        -ms-grid-row: 1;
+      }
+      & > :nth-child(2) {
+        -ms-grid-row: 2;
+      }
+      & > :nth-child(3) {
+        -ms-grid-row: 3;
+      }
     }
 
     &__title {

client/src/layouts/BlankLayout.vue

@@ -6,6 +6,10 @@
 
 <style lang="scss">
   .blank-layout {
+    /*
+      For IE11
+    */
+    display: flex;
   }
 </style>
 

client/src/layouts/DefaultLayout.vue

@@ -3,9 +3,9 @@
     <header-bar class="header skillbox__header">
     </header-bar>
 
-    <filter-bar v-if="showFilter"></filter-bar>
+    <filter-bar v-if="showFilter" class="skillbox__filter-bar"></filter-bar>
 
-    <router-view></router-view>
+    <router-view class="skillbox__content"></router-view>
     <footer class="skillbox__footer">Footer</footer>
   </div>
 </template>
@@ -39,7 +39,9 @@
   .skillbox {
     margin: 0 auto;
     width: 100%;
-    display: grid;
+    @supports (display: grid) {
+      display: grid;
+    }
     grid-template-rows: auto 1fr;
     min-height: 100vh;
     grid-auto-rows: 1fr;
@@ -49,21 +51,41 @@
 
     &--show-filter {
       grid-template-rows: auto auto 1fr;
+      -ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
       grid-template-areas: "h" "." "c";
     }
 
+    /*
+     * For IE10+
+     */
+
+    &--show-filter &__content {
+      -ms-grid-row: 4;
+      -ms-grid-column: 1;
+    }
+
+    &--show-filter &__filter-bar {
+      -ms-grid-row: 2;
+      -ms-grid-column: 1;
+    }
+
     /*
      * For IE10+
      */
     display: -ms-grid;
-    -ms-grid-rows: auto 32px 1fr; // 1 extra row for gap
+    -ms-grid-rows: 50px 30px 1fr; // 1 extra row for gap
     -ms-grid-columns: 1fr;
 
     @include skillbox-colors;
 
     &__header {
       grid-area: h;
+      -ms-grid-row: 1;
+    }
 
+    &__content {
+      -ms-grid-row: 3;
+      -ms-grid-column: 1;
     }
 
     &__footer {
@@ -75,7 +97,11 @@
      * For IE10+
      */
     & > :nth-child(2) {
-      -ms-grid-row: 3;
+
+    }
+
+    & > :nth-child(3) {
+      -ms-grid-row: 4;
       -ms-grid-column: 1;
     }
   }

client/src/pages/rooms.vue

@@ -63,7 +63,9 @@
   @import "@/styles/_mixins.scss";
 
   .rooms-page {
-    display: -ms-grid;
+    display: flex;
+    flex-wrap: wrap;
+
     @supports (display: grid) {
       display: grid;
     }
@@ -71,6 +73,7 @@
     padding: 50px 15px;
     @include desktop {
       grid-template-columns: repeat(3, 1fr);
+      -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
       padding: 50px 45px;
     }
     grid-column-gap: 30px;
@@ -81,26 +84,14 @@
     justify-self: center;
     box-sizing: border-box;
 
-    /*
-     * For IE10+
-     */
-    -ms-grid-columns: 1fr 1fr 1fr;
-    -ms-grid-rows: 260px;
+    & > div {
+      flex: 0 0 30%;
+      margin-bottom: $large-spacing;
+      margin-right: 1%;
 
-    /*
-     * 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;
+      @supports (display: grid) {
+        margin-bottom: inherit;
+        margin-right: inherit;
       }
     }
 

client/src/pages/start.vue

@@ -91,20 +91,26 @@
   }
 </script>
 
-
 <style scoped lang="scss">
 
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
   .start-page {
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    @supports (display: grid) {
+      display: grid;
+      justify-content: stretch;
+    }
     grid-template-rows: auto 1fr auto;
     min-height: 100vh;
+    width: 100vw;
     box-sizing: border-box;
 
     &__header {
-      
+
     }
 
     &__title {
@@ -136,6 +142,8 @@
       padding-right: 120px;
     }
     display: -ms-grid;
+    -ms-grid-column-align: center;
+    -ms-grid-columns: 1fr 1fr 1fr;
     margin-bottom: 90px;
     @supports (display: grid) {
       display: grid;
@@ -148,6 +156,23 @@
     grid-column-gap: 50px;
     justify-items: start;
     align-items: center;
+
+    /*
+     * For IE10+
+     */
+    & > :nth-child(1) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 1;
+    }
+    & > :nth-child(2) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 2;
+    }
+    & > :nth-child(3) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 3;
+    }
+
   }
 
   .news {
@@ -155,9 +180,34 @@
     color: $color-white;
     padding-top: $large-spacing;
     padding-bottom: $large-spacing;
-    display: grid;
+    display: flex;
+    justify-content: space-around;
+    -ms-grid-columns: 1fr 1fr 1fr;
+    @supports (display: grid) {
+      display: grid;
+    }
     grid-template-columns: repeat(5, 1fr);
 
+    /*
+     * For IE10+
+     */
+    & > :nth-child(1) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 1;
+    }
+    & > :nth-child(2) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 2;
+    }
+    & > :nth-child(3) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 3;
+    }
+    & > :nth-child(4) {
+      -ms-grid-row: 1;
+      -ms-grid-column: 4;
+    }
+
     @include desktop {
       /*padding-left: 120px;*/
       /*padding-right: 120px;*/