responsive design

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -219,7 +219,7 @@ $input-border-color: #bfbfbf;
 
   #structure-map-bar {
     margin: 16px 2% 6px 2%;
-
+    max-width: 100%;
   }
 
   #structure-map-bar .btn {
@@ -231,6 +231,7 @@ $input-border-color: #bfbfbf;
     flex-direction: row;
     list-style: none;
     align-items: center;
+    flex-wrap: wrap;
     padding: 0;
   }
 
@@ -238,7 +239,7 @@ $input-border-color: #bfbfbf;
     border: solid 1px #000000;
     height: 80px;
     width: 80px;
-    margin: 0 6px;
+    margin: 0 6px 6px 0;
   }
 
   #overseas-provinces-list li img {
@@ -266,11 +267,17 @@ $input-border-color: #bfbfbf;
   }
 
   .search-bar-wrapper {
-    height: 34px;
-    padding: 8px 24px;
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    padding: 6px 2%;
     border: solid 1px $input-border-color;
-    margin: 6px 6px;
-    max-width: 216px;
+    margin: 6px 0;
+    max-width: 44%;
+  }
+
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: auto;
   }
 
   .search-bar {
@@ -280,13 +287,13 @@ $input-border-color: #bfbfbf;
     height: auto;
     font-size: 18px;
     border: none;
-    width: 184px;
+    width: 95%;
   }
 
   .search-bar-btn {
     border: none;
     background: none;
-    width: 24px;
+    width: 5%;
     min-width: 24px;
     padding: 5px;
     font-size: 18px;
@@ -342,7 +349,7 @@ $input-border-color: #bfbfbf;
   .structure-search .reset-search {
     background: none;
     color: $btn-background-color;
-    margin: 0 6px;
+    margin: 0 6px 6px 6px;
     cursor: pointer;
     height: 36px;
     border: solid 2px $btn-background-color;
@@ -353,7 +360,7 @@ $input-border-color: #bfbfbf;
     background-color: $btn-background-color;
     color: $btn-text-color;
     font-weight: 750;
-    margin: 0 6px;
+    margin: 0 6px 6px 6px;
     cursor: pointer;
     height: 36px;
     border: none;
@@ -386,6 +393,11 @@ $input-border-color: #bfbfbf;
     min-width: 200px;
   }
 
+  .structure-poster img {
+    width: auto;
+    height: auto;
+  }
+
   .structure-details {
     display: flex;
     flex-direction: column;
@@ -473,8 +485,6 @@ $input-border-color: #bfbfbf;
   .search-bar-wrapper {
     flex: 1;
     max-width: none;
-    display: flex;
-    flex-direction: row;
   }
 
   .search-bar-wrapper:not(:last-child) {
@@ -509,6 +519,10 @@ $input-border-color: #bfbfbf;
     flex-direction: row;
   }
 
+  .structure-card .spacer {
+    flex: 0; // disable spacer in list view
+  }
+
   .structure-details {
     flex: 1;
   }
@@ -524,3 +538,52 @@ $input-border-color: #bfbfbf;
 .ot-structures-frame.list-view .activate-list-view {
   font-weight: 750;
 }
+
+// Small screens
+@media screen and (max-width: 700px) {
+  .ot-structures-frame {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .structure-col {
+      max-width: none;
+
+      // prevents content to be higher than the container
+      min-width: 100px;
+      overflow: hidden;
+    }
+
+    #overseas-provinces-list li {
+      margin: 0 auto 6px auto;
+      height: 90px;
+      width: 90px;
+    }
+
+    .structure-search-row {
+      flex-direction: column;
+    }
+
+    .search-bar-wrapper {
+      width: 95%;
+      max-width: 95%;
+      margin: 3px auto;
+    }
+
+    .search-bar-wrapper input {
+      width: auto;
+    }
+
+    .structure-search select {
+      width: 95%;
+      margin: 3px auto;
+    }
+
+    .structure-card {
+      width: 100%;
+    }
+
+    .list-view .structure-card {
+      flex-direction: column;
+    }
+  }
+}