Update sidebar styles (#12744)

* update sidebars to the filter-sidebar components

* update sidebars to the filter-sidebar components

* use object v-for instead of Object.keys

website/client/src/components/challenges/sidebar.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="standard-sidebar d-none d-sm-block">
-    <div class="form-group">
-      <input
-        v-model="searchTerm"
-        class="form-control search"
-        type="text"
-        :placeholder="$t('search')"
+    <filter-sidebar>
+      <div
+        slot="search"
+        class="form-group"
       >
-    </div>
-    <form>
-      <h2 v-once>
-        {{ $t('filter') }}
-      </h2>
-      <div class="form-group">
-        <h3>{{ $t('category') }}</h3>
+        <input
+          v-model="searchTerm"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div>
+      <filter-group :title="$t('category')">
         <div
           v-for="group in categoryOptions"
           :key="group.key"
@@ -34,12 +33,8 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-      <div
-        v-if="$route.name !== 'findChallenges'"
-        class="form-group"
-      >
-        <h3>{{ $t('membership') }}</h3>
+      </filter-group>
+      <filter-group :title="$t('role')">
         <div
           v-for="group in roleOptions"
           :key="group.key"
@@ -60,9 +55,33 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-      <div class="form-group">
-        <h3>{{ $t('ownership') }}</h3>
+      </filter-group>
+      <filter-group :title="$t('membership')"
+        v-if="$route.name !== 'findChallenges'"
+        class="form-group"
+      >
+        <div
+          v-for="group in roleOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="roleFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            >
+            <label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </filter-group>
+      <filter-group :title="$t('ownership')">
         <div
           v-for="group in ownershipOptions"
           :key="group.key"
@@ -83,15 +102,18 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-    </form>
+      </filter-group>
+    </filter-sidebar>
   </div>
 </template>
 
 <script>
 import throttle from 'lodash/throttle';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
 
 export default {
+  components: { FilterGroup, FilterSidebar },
   data () {
     return {
       categoryFilters: [],

website/client/src/components/groups/sidebar.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="standard-sidebar d-none d-sm-block">
-    <div class="form-group">
-      <input
-        v-model="searchTerm"
-        class="form-control search"
-        type="text"
-        :placeholder="$t('search')"
+    <filter-sidebar>
+      <div
+        slot="search"
+        class="form-group"
       >
-    </div>
-    <form>
-      <h2 v-once>
-        {{ $t('filter') }}
-      </h2>
-      <div class="form-group">
-        <h3>{{ $t('category') }}</h3>
+        <input
+          v-model="searchTerm"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div>
+      <filter-group :title="$t('category')">
         <div
           v-for="group in categoryOptions"
           :key="group.key"
@@ -34,9 +33,8 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-      <div class="form-group">
-        <h3>{{ $t('role') }}</h3>
+      </filter-group>
+      <filter-group :title="$t('role')">
         <div
           v-for="group in roleOptions"
           :key="group.key"
@@ -57,9 +55,8 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-      <div class="form-group">
-        <h3>{{ $t('guildSize') }}</h3>
+      </filter-group>
+      <filter-group :title="$t('guildSize')">
         <div
           v-for="group in guildSizeOptions"
           :key="group.key"
@@ -80,15 +77,20 @@
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div>
-    </form>
+      </filter-group>
+    </filter-sidebar>
   </div>
 </template>
 
 <script>
 import throttle from 'lodash/throttle';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
+
+// TODO use checkbox-component to add/remove entries to *Filters, but without the v-model binding
 
 export default {
+  components: { FilterGroup, FilterSidebar },
   data () {
     return {
       categoryFilters: [],

website/client/src/components/shops/market/filter.vue

@@ -1,52 +1,52 @@
 <template>
-  <div class="form">
-    <h2 v-once>
-      {{ $t('filter') }}
-    </h2>
-    <div class="form-group">
-      <checkbox
-        v-for="viewOptionKey in Object.keys(viewOptions)"
-        :id="`category-${viewOptionKey}`"
-        :key="viewOptionKey"
-        :checked.sync="viewOptions[viewOptionKey].selected"
-        :text="viewOptions[viewOptionKey].text"
+  <filter-sidebar>
+    <filter-group>
+      <checkbox :checked.sync="viewOptionEntry.selected"
+                :id="`category-${viewOptionKey}`"
+                :key="viewOptionKey"
+                :text="viewOptionEntry.text"
+                v-for="(viewOptionEntry, viewOptionKey) in viewOptions"
       />
-    </div>
+    </filter-group>
     <div class="form-group clearfix">
       <h3
-        v-once
-        class="float-left"
+          class="float-left"
+          v-once
       >
         {{ $t('hideLocked') }}
       </h3>
       <toggle-switch
-        v-model="lockedChecked"
-        class="float-right"
-        @change="$emit('update:hideLocked', $event)"
+          @change="$emit('update:hideLocked', $event)"
+          class="float-right"
+          v-model="lockedChecked"
       />
     </div>
     <div class="form-group clearfix">
       <h3
-        v-once
-        class="float-left"
+          class="float-left"
+          v-once
       >
         {{ $t('hidePinned') }}
       </h3>
       <toggle-switch
-        v-model="pinnedChecked"
-        class="float-right"
-        @change="$emit('update:hidePinned', $event)"
+          @change="$emit('update:hidePinned', $event)"
+          class="float-right"
+          v-model="pinnedChecked"
       />
     </div>
-  </div>
+  </filter-sidebar>
 </template>
 
 <script>
 import Checkbox from '@/components/ui/checkbox';
 import toggleSwitch from '@/components/ui/toggleSwitch';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
 
 export default {
   components: {
+    FilterGroup,
+    FilterSidebar,
     Checkbox,
     toggleSwitch,
   },

website/client/src/components/shops/quests/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="row quests">
     <div class="standard-sidebar d-none d-sm-block">
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
+      <filter-sidebar>
+        <div
+          slot="search"
+          class="form-group"
         >
-      </div>
-      <div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2>
-        <div class="form-group">
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
+          >
+        </div>
+        <filter-group>
           <div
             v-for="category in categories"
             :key="category.identifier"
@@ -33,7 +33,7 @@
               >{{ category.text }}</label>
             </div>
           </div>
-        </div>
+        </filter-group>
         <div class="form-group clearfix">
           <h3
             v-once
@@ -58,7 +58,7 @@
             class="float-right"
           />
         </div>
-      </div>
+      </filter-sidebar>
     </div>
     <div class="standard-page">
       <div class="featuredItems">
@@ -341,6 +341,8 @@
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/variables.scss';
 
+  // these styles may be applied to other pages too
+
   .featured-label {
     margin: 24px auto;
   }
@@ -469,12 +471,16 @@ import QuestInfo from './questInfo.vue';
 import shops from '@/../../common/script/libs/shops';
 
 import isPinned from '@/../../common/script/libs/isPinned';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 
 export default {
   components: {
     SelectTranslatedArray,
+    FilterGroup,
+    FilterSidebar,
     ShopItem,
     Item,
     CountBadge,

website/client/src/components/shops/seasonal/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="row seasonal">
     <div class="standard-sidebar d-none d-sm-block">
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
+      <filter-sidebar>
+        <div
+          slot="search"
+          class="form-group"
         >
-      </div>
-      <div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2>
-        <div class="form-group">
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
+          >
+        </div>
+        <filter-group>
           <checkbox
             v-for="category in filterCategories"
             :id="`category-${category.key}`"
@@ -21,7 +21,7 @@
             :checked.sync="viewOptions[category.key].selected"
             :text="category.value"
           />
-        </div>
+        </filter-group>
         <div class="form-group clearfix">
           <h3
             v-once
@@ -34,7 +34,7 @@
             class="float-right"
           />
         </div>
-      </div>
+      </filter-sidebar>
     </div>
     <div class="standard-page">
       <div class="featuredItems">
@@ -212,6 +212,8 @@
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/variables.scss';
 
+  // these styles may be applied to other pages too
+
   .featured-label {
     margin: 24px auto;
   }
@@ -390,10 +392,14 @@ import i18n from '@/../../common/script/i18n';
 
 import shops from '@/../../common/script/libs/shops';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
 
 export default {
   components: {
     SelectTranslatedArray,
+    FilterGroup,
+    FilterSidebar,
     Checkbox,
     PinBadge,
     ShopItem,

website/client/src/components/shops/timeTravelers/index.vue

@@ -4,48 +4,42 @@
       v-if="!closed"
       class="standard-sidebar d-none d-sm-block"
     >
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
+      <filter-sidebar>
+        <div
+          slot="search"
+          class="form-group"
         >
-      </div><div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2><div class="form-group">
-          <div
-            v-for="category in categories"
-            :key="category.identifier"
-            class="form-check"
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
           >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="`category-${category.identifier}`"
-                v-model="viewOptions[category.identifier].selected"
-                class="custom-control-input"
-                type="checkbox"
-              ><label
-                v-once
-                class="custom-control-label"
-                :for="`category-${category.identifier}`"
-              >{{ category.text }}</label>
-            </div>
-          </div>
-        </div><div class="form-group clearfix">
+        </div>
+        <filter-group>
+          <checkbox
+            v-for="category in categories"
+            :id="`category-${category.identifier}`"
+            :key="category.identifier"
+            :checked.sync="viewOptions[category.identifier].selected"
+            :text="category.text"
+          />
+        </filter-group>
+        <div class="form-group clearfix">
           <h3
             v-once
             class="float-left"
           >
             {{ $t('hidePinned') }}
-          </h3><toggle-switch
+          </h3>
+          <toggle-switch
             v-model="hidePinned"
             class="float-right"
           />
         </div>
-      </div>
-    </div><div class="standard-page">
+      </filter-sidebar>
+    </div>
+    <div class="standard-page">
       <div class="featuredItems">
         <div
           class="background"
@@ -173,6 +167,8 @@
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/variables.scss';
 
+  // these styles may be applied to other pages too
+
   .featured-label {
     margin: 24px auto;
   }
@@ -297,11 +293,17 @@ import isPinned from '@/../../common/script/libs/isPinned';
 import shops from '@/../../common/script/libs/shops';
 
 import pinUtils from '@/mixins/pinUtils';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
+import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 export default {
   components: {
     SelectTranslatedArray,
+    Checkbox,
+    FilterGroup,
+    FilterSidebar,
     ShopItem,
     Item,
     ItemRows,

website/client/src/components/ui/filterGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h4>
+    <h4 v-if="title">
       {{ title }}
     </h4>
     <div class="form-group">