diff --git a/server/locales/en.json b/server/locales/en.json index 40015b02..11a2bd5a 100644 --- a/server/locales/en.json +++ b/server/locales/en.json @@ -1757,13 +1757,26 @@ "profile.title": "Profile", "profile.uploadNewAvatar": "Upload New Image", "profile.viewPublicProfile": "View Public Profile", + "search.editorAny": "Any editor", + "search.emptyQuery": "Enter a query in the search field above and press Enter.", + "search.filterEditor": "Editor", + "search.filterLocale": "Locale(s)", "search.filterLocaleDisplay": "Any locale | {n} locale only | {count} locales selected", + "search.filterPath": "Path starting with...", + "search.filterPublishState": "Publish State", + "search.filterTags": "Tags", "search.filters": "Filters", + "search.noResults": "No results found for {0} with the current filters.", + "search.publishStateAny": "Any publish state", + "search.publishStateDraft": "Draft", + "search.publishStatePublished": "Published", + "search.publishStateScheduled": "Scheduled", "search.results": "Search Results", "search.sortBy": "Sort By", "search.sortByLastUpdated": "Last Updated", "search.sortByRelevance": "Relevance", "search.sortByTitle": "Title", + "search.totalResults": "No result | {0} result | {0} results", "tags.clearSelection": "Clear Selection", "tags.currentSelection": "Current Selection", "tags.locale": "Locale", diff --git a/ux/src/components/HeaderNav.vue b/ux/src/components/HeaderNav.vue index e388b34e..a1837872 100644 --- a/ux/src/components/HeaderNav.vue +++ b/ux/src/components/HeaderNav.vue @@ -44,7 +44,8 @@ q-header.bg-header.text-white.site-header( ) template(v-slot:prepend) q-circular-progress.q-mr-xs( - v-if='siteStore.searchIsLoading' + v-if='siteStore.searchIsLoading && route.path !== `/_search`' + instant-feedback indeterminate rounded color='primary' diff --git a/ux/src/css/animation.scss b/ux/src/css/animation.scss index 36edbf84..654fd0de 100644 --- a/ux/src/css/animation.scss +++ b/ux/src/css/animation.scss @@ -37,6 +37,23 @@ opacity: 0 } +// -> Slide Up Transition + +.slide-up-enter-active, +.slide-up-leave-active { + transition: all 0.25s ease-out; +} + +.slide-up-enter-from { + opacity: 0; + transform: translateY(15px); +} + +.slide-up-leave-to { + opacity: 0; + transform: translateY(-15px); +} + // -> fadeIn @keyframes fadeIn { diff --git a/ux/src/pages/Search.vue b/ux/src/pages/Search.vue index b231c2b0..7c8f8d00 100644 --- a/ux/src/pages/Search.vue +++ b/ux/src/pages/Search.vue @@ -30,7 +30,7 @@ q-layout(view='hHh Lpr lff') q-input( outlined dense - placeholder='Path starting with...' + :placeholder='t(`search.filterPath`)' prefix='/' v-model='state.params.filterPath' ) @@ -39,31 +39,31 @@ q-layout(view='hHh Lpr lff') q-input.q-mt-sm( outlined dense - placeholder='Tags' + :placeholder='t(`search.filterTags`)' ) template(v-slot:prepend) q-icon(name='las la-hashtag', size='xs') - q-input.q-mt-sm( - outlined - dense - placeholder='Last updated...' - ) - template(v-slot:prepend) - q-icon(name='las la-calendar', size='xs') - q-input.q-mt-sm( - outlined - dense - placeholder='Last edited by...' - ) - template(v-slot:prepend) - q-icon(name='las la-user-edit', size='xs') + //- q-input.q-mt-sm( + //- outlined + //- dense + //- placeholder='Last updated...' + //- ) + //- template(v-slot:prepend) + //- q-icon(name='las la-calendar', size='xs') + //- q-input.q-mt-sm( + //- outlined + //- dense + //- placeholder='Last edited by...' + //- ) + //- template(v-slot:prepend) + //- q-icon(name='las la-user-edit', size='xs') q-select.q-mt-sm( outlined v-model='state.params.filterLocale' emit-value map-options dense - :aria-label='t(`admin.groups.ruleLocales`)' + :aria-label='t(`search.filterLocale`)' :options='siteStore.locales.active' option-value='code' option-label='name' @@ -85,7 +85,7 @@ q-layout(view='hHh Lpr lff') emit-value map-options dense - aria-label='Editor' + :aria-label='t(`search.filterEditor`)' :options='editors' ) template(v-slot:prepend) @@ -96,7 +96,7 @@ q-layout(view='hHh Lpr lff') emit-value map-options dense - aria-label='Publish State' + :aria-label='t(`search.filterPublishState`)' :options='publishStates' ) template(v-slot:prepend) @@ -105,10 +105,19 @@ q-layout(view='hHh Lpr lff') .text-header.flex span {{t('search.results')}} q-space - span.text-caption #[strong {{ state.total }}] results + transition(name='slide-up', mode='out-in') + i18n-t( + v-if='!siteStore.searchIsLoading' + keypath='search.totalResults' + tag='span' + class='text-caption' + :plural='state.total' + ) + strong {{ state.total }} .q-pa-lg(v-if='state.results.length < 1') - span(v-if='siteStore.search && siteStore.searchLastQuery') No results found for #[strong "{{ siteStore.searchLastQuery }}"] with the current filters. - span(v-else): em Enter a query in the search field above and press Enter. + i18n-t(keypath='search.noResults', tag='span', v-if='siteStore.search && siteStore.searchLastQuery') + strong {{ siteStore.searchLastQuery }} + span(v-else): em {{ t('search.emptyQuery') }} q-list(separator) q-item( v-for='item of state.results' @@ -209,7 +218,7 @@ const orderByOptions = computed(() => { const editors = computed(() => { return [ - { label: 'Any editor', value: '' }, + { label: t('search.editorAny'), value: '' }, { label: 'AsciiDoc', value: 'asciidoc' }, { label: 'Markdown', value: 'markdown' }, { label: 'Visual Editor', value: 'wysiwyg' } @@ -218,10 +227,10 @@ const editors = computed(() => { const publishStates = computed(() => { return [ - { label: 'Any publish state', value: '' }, - { label: 'Draft', value: 'draft' }, - { label: 'Published', value: 'published' }, - { label: 'Scheduled', value: 'scheduled' } + { label: t('search.publishStateAny'), value: '' }, + { label: t('search.publishStateDraft'), value: 'draft' }, + { label: t('search.publishStatePublished'), value: 'published' }, + { label: t('search.publishStateScheduled'), value: 'scheduled' } ] })