diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue index e590d98c..dac09bf8 100644 --- a/client/components/common/nav-header.vue +++ b/client/components/common/nav-header.vue @@ -71,6 +71,7 @@ single-line, solo flat + rounded hide-details, prepend-inner-icon='mdi-magnify', :loading='searchIsLoading', diff --git a/client/components/tags.vue b/client/components/tags.vue index ed9f8d9f..255f15e7 100644 --- a/client/components/tags.vue +++ b/client/components/tags.vue @@ -21,6 +21,7 @@ .overline.mr-3.animated.fadeInLeft Current Selection v-chip.mr-3.primary--text( v-for='tag of tagsSelected' + :key='`tagSelected-` + tag.tag' color='white' close @click:close='toggleTag(tag.tag)' @@ -38,7 +39,7 @@ template(v-else) v-icon.mr-3.animated.fadeInRight mdi-arrow-left .overline.animated.fadeInRight Select one or more tags - v-toolbar(color='grey lighten-4', flat, height='58') + v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-l5` : `grey lighten-4`', flat, height='58') v-text-field.tags-search( label='Search within results...' solo @@ -50,12 +51,29 @@ prepend-icon='mdi-file-document-box-search-outline' append-icon='mdi-arrow-right' ) + template(v-if='locales.length > 1') + v-divider.mx-3(vertical) + .overline Locale + v-select.ml-2( + :items='locales' + v-model='locale' + :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`' + hide-details + label='Locale' + item-text='name' + item-value='code' + rounded + single-line + dense + height='40' + style='max-width: 170px;' + ) v-divider.mx-3(vertical) .overline Order By v-select.ml-2( :items='orderByItems' v-model='orderBy' - background-color='white' + :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`' hide-details label='Order By' rounded @@ -64,12 +82,13 @@ height='40' style='max-width: 250px;' ) - v-divider.mx-3(vertical) - v-btn-toggle(v-model='displayStyle', rounded, mandatory) - v-btn(text, height='40'): v-icon(small) mdi-view-list - v-btn(text, height='40'): v-icon(small) mdi-cards-variant - v-btn(text, height='40'): v-icon(small) mdi-format-align-justify + v-btn-toggle.ml-2(v-model='orderByDirection', rounded, mandatory) + v-btn(text, height='40'): v-icon(size='20') mdi-chevron-double-up + v-btn(text, height='40'): v-icon(size='20') mdi-chevron-double-down v-divider + .text-center.pt-10 + img(src='/svg/icon-price-tag.svg') + .subtitle-2.grey--text Select one or more tags on the left. nav-footer notify search-results @@ -77,16 +96,25 @@