From 2298806de83fbe266cbb4ff0436b4a3d2230e5b4 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 27 Dec 2021 11:19:34 +0100
Subject: [PATCH] tweak search options menu
---
src/components/SearchToolbar.vue | 37 +++++++++++++++++++++++---------
1 file changed, 27 insertions(+), 10 deletions(-)
diff --git a/src/components/SearchToolbar.vue b/src/components/SearchToolbar.vue
index 35416c1e..211471c5 100644
--- a/src/components/SearchToolbar.vue
+++ b/src/components/SearchToolbar.vue
@@ -1,13 +1,6 @@
<template>
<v-card rounded="xl">
- <v-btn v-if="$vuetify.breakpoint.smAndDown"
- class="search_options"
- small
- text
- rounded
-
- @click="expanded=!expanded">
- <v-icon small left color="primary">filter_alt</v-icon>Søkealternativer<v-icon small right>{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn>
+
<v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp">
<v-row >
<v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
@@ -42,6 +35,16 @@
</v-row>
</v-container>
+ <v-btn v-if="$vuetify.breakpoint.smAndDown"
+ class="search_options"
+ v-bind:class="{'expanded': expanded}"
+ x-small
+ rounded
+ text
+
+
+ @click="expanded=!expanded">
+ <v-icon v-if="!expanded" small left color="primary">filter_alt</v-icon>{{expanded? '' : 'Søkealternativer'}}<v-icon small :right="!expanded">{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn>
</v-card>
</template>
@@ -113,18 +116,32 @@ export default {
padding-left: 24px !important;
padding-right: 24px !important;
padding-bottom: 10px !important;
+ padding-top: 10px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
+ min-height: 36px;
}
.search_options {
- justify-content: center;
+ position: absolute;
+ min-height: 36px;
+ bottom: 0px;
+ left: 0px;
+ border-radius: 28px;
+
+
+ float: left;
- padding-right: 24px !important;
width: 100%;
}
+.search_options.expanded {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ min-height: 24px;
+}
+
</style>
--
GitLab