krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update sidebar styles (#12744)

Browse Source 
* update sidebars to the filter-sidebar components

* update sidebars to the filter-sidebar components

* use object v-for instead of Object.keys
This commit is contained in:
negue
2020-11-09 23:00:57 +01:00
committed by GitHub
parent f2c6838e95
commit 4319bd5ad1
7 changed files with 166 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
website/client/src/components/challenges/sidebar.vue
View File

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

34
website/client/src/components/groups/sidebar.vue
View File

@@ -1,19 +1,18 @@
<template> <template>
<div class="standard-sidebar d-none d-sm-block"> <div class="standard-sidebar d-none d-sm-block">
<div class="form-group"> <filter-sidebar>
<div
slot="search"
class="form-group"
>
<input <input
v-model="searchTerm" v-model="searchTerm"
class="form-control search" class="form-control input-search"
type="text" type="text"
:placeholder="$t('search')" :placeholder="$t('search')"
> >
</div> </div>
<form> <filter-group :title="$t('category')">
<h2 v-once>
{{ $t('filter') }}
</h2>
<div class="form-group">
<h3>{{ $t('category') }}</h3>
<div <div
v-for="group in categoryOptions" v-for="group in categoryOptions"
:key="group.key" :key="group.key"
@@ -34,9 +33,8 @@
>{{ $t(group.label) }}</label> >{{ $t(group.label) }}</label>
</div> </div>
</div> </div>
</div> </filter-group>
<div class="form-group"> <filter-group :title="$t('role')">
<h3>{{ $t('role') }}</h3>
<div <div
v-for="group in roleOptions" v-for="group in roleOptions"
:key="group.key" :key="group.key"
@@ -57,9 +55,8 @@
>{{ $t(group.label) }}</label> >{{ $t(group.label) }}</label>
</div> </div>
</div> </div>
</div> </filter-group>
<div class="form-group"> <filter-group :title="$t('guildSize')">
<h3>{{ $t('guildSize') }}</h3>
<div <div
v-for="group in guildSizeOptions" v-for="group in guildSizeOptions"
:key="group.key" :key="group.key"
@@ -80,15 +77,20 @@
>{{ $t(group.label) }}</label> >{{ $t(group.label) }}</label>
</div> </div>
</div> </div>
</div> </filter-group>
</form> </filter-sidebar>
</div> </div>
</template> </template>
<script> <script>
import throttle from 'lodash/throttle'; 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 { export default {
components: { FilterGroup, FilterSidebar },
data () { data () {
return { return {
categoryFilters: [], categoryFilters: [],

34
website/client/src/components/shops/market/filter.vue
View File

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

22
website/client/src/components/shops/quests/index.vue
View File

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

22
website/client/src/components/shops/seasonal/index.vue
View File

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

50
website/client/src/components/shops/timeTravelers/index.vue
View File

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

2
website/client/src/components/ui/filterGroup.vue
View File

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