diff --git a/src/components/SearchToolbar.vue b/src/components/SearchToolbar.vue index 2bb6bda4ced5d04ebe60662eed1928eec48d0c2b..2170c595ad2cc2bd37cc1f1e1a653bec83121724 100644 --- a/src/components/SearchToolbar.vue +++ b/src/components/SearchToolbar.vue @@ -1,61 +1,81 @@ <template> <div> - <v-card v-if="$store.state.showSearchToolbar" rounded="xl"> + <v-card v-if="$vuetify.breakpoint.smAndDown" rounded="xl"> - <v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp"> - <v-row > - <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> + <v-list two-line v-if="expanded"> + <v-list-item> <v-autocomplete auto-select-first clearable - v-model="$parent.pos_selected" hide-details :menu-props="{ offsetY: true }" - :dense="$vuetify.breakpoint.smAndDown" - label="Ordklasse" + placeholder="Ordklasse" :items="pos_items" append-icon="expand_more" @input="updatePos"> </v-autocomplete> - </v-col> - <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> + </v-list-item> + <v-list-item> + <v-checkbox v-model="inflected_results" - :dense="$vuetify.breakpoint.smAndDown" + hide-details="" label="Vis bøyde former"/> + </v-list-item> + + - </v-col> - <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3"> - + <v-list-item> <v-checkbox v-model="fulltext" - :dense="$vuetify.breakpoint.smAndDown" - label="Fulltekstsøk"/> - </v-col> - </v-row> - - </v-container> + hide-details + label="Fritekstsøk"/> + </v-list-item> + + </v-list> <v-btn v-if="$vuetify.breakpoint.smAndDown" class="search_options" v-bind:class="{'expanded': expanded}" x-small rounded text - - @click="expanded=!expanded"> {{expanded? '' : 'Søkealternativer'}}<v-icon small :right="!expanded">{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn> </v-card> -<div v-else> +<div class="desktop_toolbar" v-else> + <span> <v-checkbox - class="single_checkbox" v-model="fulltext" dense hide-details - label="Fulltekstsøk"/> + label="Fritekstsøk"/> + </span> + <span> + <v-checkbox + v-model="inflected_results" + dense + hide-details + label="Vis bøyde former"/> + </span> + <span> + + <v-autocomplete + auto-select-first + + clearable + v-model="$parent.pos_selected" + hide-details + :menu-props="{ offsetY: true }" + dense + placeholder="Ordklasse" + :items="pos_items" + append-icon="expand_more" + @input="updatePos"> + </v-autocomplete> + </span> </div> </div> </template> @@ -123,10 +143,8 @@ export default { <style scoped> .v-card { - padding-top: 10px !important; - padding-left: 24px !important; - padding-right: 24px !important; - padding-bottom: 10px !important; + padding-top: 0px !important; + padding-bottom: 24px !important; padding-top: 10px; margin-top: 10px; margin-right: 10px; @@ -134,6 +152,11 @@ export default { min-height: 36px; } +.v-list-item { + padding-left: 24px; + padding-right: 24px; +} + .search_options { position: absolute; min-height: 36px; @@ -153,9 +176,18 @@ export default { min-height: 24px; } -.single_checkbox { + +.desktop_toolbar { + display: flex; padding-left: 10px; margin-left: 10px; + padding-right: 10px; + margin-right: 10px; + gap: 24px; +} + +.desktop_toolbar v-combobox { + width: 300px; } </style>