Site/date sel back to orig sizes when widescreen

To do this without negatively affecting responsiveness, I added an additional media break at 900px. When the screen is less wide than 900px (max-width 899px) then the site and date selector are allowed to take up the full width and flex their sizes more, so they can take a good view size regardless of width.
rehanvdm · Apr 28, 2024 · 1aca365 · 1aca365
1 parent 0800c02
commit 1aca365
Showing 1 changed file with 51 additions and 4 deletions.
diff --git a/application/src/frontend/src/views/stats/index.vue b/application/src/frontend/src/views/stats/index.vue
@@ -185,9 +185,9 @@ watch(() => route.path, async () => {
 
     <el-header style="height: inherit">
 
-      <div class="header-surround" style="display: flex; justify-content: space-between; padding-top: 10px; gap: 10px;">
-        <div style="flex: 1 1; display: flex; flex-flow: row wrap; justify-content: space-between;  padding-top: 0px; max-width: 100%; gap: 10px;">
-          <div style="flex: 1 1; text-align: center; min-width: 125px; max-width: 100%;">
+      <div class="header-surround">
+        <div class="around-selects">
+          <div class="select-site">
             <div v-if="loadingSites && !sites.length">
               <el-skeleton style="width: 100%; max-width: 100%;" animated>
                 <template #template>
@@ -204,7 +204,7 @@ watch(() => route.path, async () => {
               <el-button v-if="showUpdateSearch" type="primary" text @click="setSelectedSites()">Update search</el-button>
             </div>
           </div>
-          <div style="flex: 1 1; text-align: center; display: flex; flex-flow: row nowrap; max-width: 100%;">
+          <div class="select-date">
             <el-date-picker v-model="dateFilter" type="daterange" :shortcuts="dateQuickSelectOptions"
                             range-separator="To" start-placeholder="Start date" end-placeholder="End date"/>
 
@@ -305,8 +305,13 @@ watch(() => route.path, async () => {
 }
 
 .header-surround {
+  display: flex;
   flex-flow: row nowrap;
+  justify-content: space-between;
+  padding-top: 10px;
+  gap: 10px;
 }
+
 @media all and (max-width: 767px) {
   .header-surround {
     flex-flow: row wrap;
@@ -316,6 +321,48 @@ watch(() => route.path, async () => {
     min-width: 100%;
   }
 }
+
+.around-selects {
+  flex: 1 1;
+  max-width: 100%;
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  padding-top: 0px;
+  gap: 10px;
+}
+.select-site {
+  min-width: 200px;
+  max-width: 100%;
+
+  flex: 0 1 250px;
+  text-align: center;
+}
+.mid-site-date {
+  flex: 1;
+}
+.select-date {
+  min-width: 200px;
+  max-width: 100%;
+
+  flex: 0 0 350px;
+  text-align: center;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+@media all and (max-width: 899px) {
+  .around-selects {
+    flex-flow: row wrap;
+  }
+  .select-site {
+    flex: 1 1;
+  }
+  .select-date {
+    flex: 1 1;
+  }
+}
 </style>