implement mobile filters

opennem · Dec 4, 2023 · 661a4ba · 661a4ba
1 parent 3222d91
commit 661a4ba
Show file tree

Hide file tree

Showing 10 changed files with 716 additions and 193 deletions.
diff --git a/assets/scss/drop-down.scss b/assets/scss/drop-down.scss
@@ -43,3 +43,7 @@
     }
   }
 }
+
+.dropdown-menu {
+  z-index: 9999;
+}
diff --git a/components/Energy/DataOptionsBar.vue b/components/Energy/DataOptionsBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div 
-    class="button-group" 
+    :class="{ mobile: mobile }"
+    class="button-group"
     style="gap: 8px;">
     <div 
       v-if="use12MthRollingToggle" 
@@ -13,62 +14,75 @@
       </button>
     </div>
 
-    <div 
-      v-else 
-      class="range-buttons buttons has-addons">
-      <button
-        v-on-clickaway="handleClickAway"
-        v-for="(r, i) in ranges"
-        :key="i"
-        :class="{ 'is-selected': isRangeSelected(r) }"
-        class="button is-rounded"
-        @click.stop="handleRangeClick(r)"
-      >
-        <span>
-          <div v-if="isString(r)">{{ r }}</div>
-          <div v-if="!isString(r)">
-            {{ getSelectedRangeLabel(r) }}
-          </div>
-          <!-- <i 
+    <div>
+      <label 
+        v-if="mobile" 
+        style="margin-top: 8px;">Range:</label>
+      <div 
+        v-if="!use12MthRollingToggle" 
+        :class="{ mobile: mobile }"
+        class="range-buttons buttons has-addons">
+        <button
+          v-on-clickaway="handleClickAway"
+          v-for="(r, i) in ranges"
+          :key="i"
+          :class="{ 'is-selected': isRangeSelected(r) }"
+          class="button is-rounded"
+          @click.stop="handleRangeClick(r)"
+        >
+          <span>
+            <div v-if="isString(r)">{{ r }}</div>
+            <div v-if="!isString(r)">
+              {{ getSelectedRangeLabel(r) }}
+            </div>
+            <!-- <i 
           v-if="hasRangeFilter(r)" 
           class="filter-caret dropdown-trigger-icon fal fa-chevron-down" /> -->
-          <i
-            v-if="hasRangeFilter(r)"
-            :class="[
-              'fal dropdown-trigger-icon',
-              showRangeOptions(r) ? 'fa-chevron-up' : 'fa-chevron-down'
-            ]"
-          />
-          <div 
-            v-show="showRangeOptions(r)" 
-            class="filter-menu dropdown-menu">
-            <div class="dropdown-content">
-              <button
-                v-for="(range, rIndex) in r"
-                :key="`rangeOption${rIndex}`"
-                :class="{ 'is-selected': range === selectedRange }"
-                @click="handleRangeOptionClick(range)"
-              >
-                {{ range }}
-              </button>
+            <i
+              v-if="hasRangeFilter(r)"
+              :class="[
+                'fal dropdown-trigger-icon',
+                showRangeOptions(r) ? 'fa-chevron-up' : 'fa-chevron-down'
+              ]"
+            />
+            <div 
+              v-show="showRangeOptions(r)" 
+              class="filter-menu dropdown-menu">
+              <div class="dropdown-content">
+                <button
+                  v-for="(range, rIndex) in r"
+                  :key="`rangeOption${rIndex}`"
+                  :class="{ 'is-selected': range === selectedRange }"
+                  @click="handleRangeOptionClick(range)"
+                >
+                  {{ range }}
+                </button>
+              </div>
             </div>
-          </div>
-        </span>
-      </button>
+          </span>
+        </button>
+      </div>
     </div>
 
-    <div class="interval-dropdowns">
-      <IntervalDropdown
-        :show-caret="selectedRangeIntervals && selectedRangeIntervals.length > 1"
-        :selected="selectedInterval" 
-        :options="selectedRangeIntervals"
-        @option-change="handleIntervalChange" />
-
-      <IntervalDropdown
-        v-if="filters.length > 0"
-        :selected="selectedFilter" 
-        :options="filters"
-        @option-change="handleFilterPeriodClick" />
+    <div>
+      <label 
+        v-if="mobile" 
+        style="margin-top: 16px;">Time Interval:</label>
+      <div class="interval-dropdowns">
+        <IntervalDropdown
+          :show-caret="selectedRangeIntervals && selectedRangeIntervals.length > 1"
+          :selected="selectedInterval" 
+          :options="selectedRangeIntervals"
+          :mobile="mobile"
+          @option-change="handleIntervalChange" />
+
+        <IntervalDropdown
+          v-if="filters.length > 0"
+          :selected="selectedFilter" 
+          :options="filters"
+          :mobile="mobile"
+          @option-change="handleFilterPeriodClick" />
+      </div>
     </div>
   </div>
 </template>
@@ -148,6 +162,10 @@ export default {
     use12MthRollingToggle: {
       type: Boolean,
       default: false
+    },
+    mobile: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -534,6 +552,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.button-group.mobile {
+  display: block;
+}
+
+label {
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  display: block;
+  color: #353535;
+  margin-bottom: 4px;
+}
+
+.range-buttons.mobile {
+  width: 100%;
+  flex-wrap: nowrap;
+
+  button {
+    min-width: auto;
+    width: 100%;
+  }
+}
+
 .interval-dropdowns {
   display: flex;
   align-items: center;

diff --git a/components/Energy/IntervalDropdown.vue b/components/Energy/IntervalDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    :class="{ 'is-active': dropdownActive }" 
+    :class="{ 'is-active': dropdownActive, 'mobile': mobile }" 
     class="dropdown">
     <button
       v-on-clickaway="handleClickAway"
@@ -55,6 +55,10 @@ export default {
     showCaret: {
       type: Boolean,
       default: true
+    },
+    mobile: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -93,4 +97,29 @@ export default {
 button.button.is-selected {
   box-shadow: none;
 }
+
+.mobile {
+  &.dropdown {
+    width: 100%;
+    display: block;
+  }
+
+  button.dropdown-trigger {
+    display: block;
+    min-width: auto;
+    width: 100%;
+    border: 1px solid #6A6A6A;
+    color: #353535;
+
+    &:focus:not(:active) {
+      box-shadow: none;
+    }
+    
+    span {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
 </style>
diff --git a/components/Toolbar/EnergyDataOptions.vue b/components/Toolbar/EnergyDataOptions.vue
@@ -1,26 +1,34 @@
 <template>
-  <div class="data-view-options">
-    <div class="button-group has-addons">
-      <div class="buttons">
-        <button 
-          class="button is-small"
-          v-tooltip="dashboardView === 'discrete-time' ? '' : 'Switch to discrete time view'"
-          :class="{ 'is-selected': dashboardView === 'discrete-time' }"
-          @click="() => handleViewChange('discrete-time')">
-          <span class="icon">
-            <IconDiscreteTime />
-          </span>
-        </button>
-
-        <button 
-          class="button is-small"
-          v-tooltip="dashboardView === 'time-of-day' ? '' : 'Switch to time of day view'"
-          :class="{ 'is-selected': dashboardView === 'time-of-day' }"
-          @click="() => handleViewChange('time-of-day')">
-          <span class="icon">
-            <IconTimeOfDay />
-          </span>
-        </button>
+  <div 
+    :class="{ mobile: mobile }" 
+    class="data-view-options">
+
+    <div>
+      <label v-if="mobile">View:</label>
+      <div class="button-group has-addons">
+        <div class="buttons">
+          <button 
+            class="button"
+            v-tooltip="dashboardView === 'discrete-time' ? '' : 'Switch to discrete time view'"
+            :class="{ 'is-selected': dashboardView === 'discrete-time' }"
+            @click="() => handleViewChange('discrete-time')">
+            <span class="icon">
+              <IconDiscreteTime />
+            </span>
+            <span v-if="mobile">Discrete</span>
+          </button>
+
+          <button 
+            class="button"
+            v-tooltip="dashboardView === 'time-of-day' ? '' : 'Switch to time of day view'"
+            :class="{ 'is-selected': dashboardView === 'time-of-day' }"
+            @click="() => handleViewChange('time-of-day')">
+            <span class="icon">
+              <IconTimeOfDay />
+            </span>
+            <span v-if="mobile">Time of Day</span>            
+          </button>
+        </div>
       </div>
     </div>
 
@@ -32,6 +40,7 @@
       :interval="interval"
       :filter-period="filterPeriod"
       :view="dashboardView"
+      :mobile="mobile"
       @queryChange="handleQueryChange"
       @rangeChange="handleRangeChange"
       @intervalChange="handleIntervalChange"
@@ -68,6 +77,13 @@ export default {
     IconDiscreteTime
   },
 
+  props: {
+    mobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   data() {
     return {
       ranges: RANGES,
@@ -174,7 +190,36 @@ $breakpoint: 769px;
 .data-view-options {
   display: flex;
   gap: 8px;
-  align-items: center;
+  align-content: center;
+
+  &.mobile {
+    flex-direction: column;
+
+    label {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 500;
+      display: block;
+      color: #353535;
+      margin-bottom: 4px;
+    }
+
+    .buttons {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+    }
+
+    button {
+      display: flex;
+      min-width: auto;
+      width: 50%;
+      height: auto;
+      padding: 8px;
+      gap: 8px;
+      align-items: center;
+    }
+  }
 }
 
 .button-group .buttons {
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,3 +43,7 @@ @@
         }
       }
     }
+    .dropdown-menu {
+      z-index: 9999;
+    }