krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 23:27:26 +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

70
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>
<input <div
v-model="searchTerm" slot="search"
class="form-control search" class="form-group"
type="text"
:placeholder="$t('search')"
> >
</div> <input
<form> v-model="searchTerm"
<h2 v-once> class="form-control input-search"
{{ $t('filter') }} type="text"
</h2> :placeholder="$t('search')"
<div class="form-group"> >
<h3>{{ $t('category') }}</h3> </div>
<filter-group :title="$t('category')">
<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>
</div> </filter-group>
<div class="form-group"> <filter-group :title="$t('membership')"
<h3>{{ $t('ownership') }}</h3> 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 <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: [],

44
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>
<input <div
v-model="searchTerm" slot="search"
class="form-control search" class="form-group"
type="text"
:placeholder="$t('search')"
> >
</div> <input
<form> v-model="searchTerm"
<h2 v-once> class="form-control input-search"
{{ $t('filter') }} type="text"
</h2> :placeholder="$t('search')"
<div class="form-group"> >
<h3>{{ $t('category') }}</h3> </div>
<filter-group :title="$t('category')">
<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: [],

46
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> :id="`category-${viewOptionKey}`"
<div class="form-group"> :key="viewOptionKey"
<checkbox :text="viewOptionEntry.text"
v-for="viewOptionKey in Object.keys(viewOptions)" v-for="(viewOptionEntry, viewOptionKey) in viewOptions"
:id="`category-${viewOptionKey}`"
:key="viewOptionKey"
:checked.sync="viewOptions[viewOptionKey].selected"
:text="viewOptions[viewOptionKey].text"
/> />
</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" @change="$emit('update:hideLocked', $event)"
class="float-right" class="float-right"
@change="$emit('update:hideLocked', $event)" 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" @change="$emit('update:hidePinned', $event)"
class="float-right" class="float-right"
@change="$emit('update:hidePinned', $event)" 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,
}, },

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

@@ -1,19 +1,19 @@
<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>
<input <div
v-model="searchText" slot="search"
class="form-control input-search" class="form-group"
type="text"
:placeholder="$t('search')"
> >
</div> <input
<div class="form"> v-model="searchText"
<h2 v-once> class="form-control input-search"
{{ $t('filter') }} type="text"
</h2> :placeholder="$t('search')"
<div class="form-group"> >
</div>
<filter-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,

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

@@ -1,19 +1,19 @@
<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>
<input <div
v-model="searchText" slot="search"
class="form-control input-search" class="form-group"
type="text"
:placeholder="$t('search')"
> >
</div> <input
<div class="form"> v-model="searchText"
<h2 v-once> class="form-control input-search"
{{ $t('filter') }} type="text"
</h2> :placeholder="$t('search')"
<div class="form-group"> >
</div>
<filter-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,

64
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>
<input <div
v-model="searchText" slot="search"
class="form-control input-search" class="form-group"
type="text"
:placeholder="$t('search')"
> >
</div><div class="form"> <input
<h2 v-once> v-model="searchText"
{{ $t('filter') }} class="form-control input-search"
</h2><div class="form-group"> type="text"
<div :placeholder="$t('search')"
v-for="category in categories"
:key="category.identifier"
class="form-check"
> >
<div class="custom-control custom-checkbox"> </div>
<input <filter-group>
:id="`category-${category.identifier}`" <checkbox
v-model="viewOptions[category.identifier].selected" v-for="category in categories"
class="custom-control-input" :id="`category-${category.identifier}`"
type="checkbox" :key="category.identifier"
><label :checked.sync="viewOptions[category.identifier].selected"
v-once :text="category.text"
class="custom-control-label" />
:for="`category-${category.identifier}`" </filter-group>
>{{ category.text }}</label> <div class="form-group clearfix">
</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>
</div> </filter-sidebar>
</div><div class="standard-page"> </div>
<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">