diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index fa0a505f9..7d09b09b8 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -62,7 +62,7 @@ const pinnedModulesRef = ref(); <QBadge label="Beta" align="top" /> </QToolbarTitle> <QSpace /> - <div id="searchbar"></div> + <div id="searchbar" class="searchbar"></div> <QSpace /> <div class="q-pl-sm q-gutter-sm row items-center no-wrap"> <div id="actions-prepend"></div> @@ -77,7 +77,7 @@ const pinnedModulesRef = ref(); </QTooltip> </QBtn> <QBtn - class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}" + :class="{ 'q-pa-none': quasar.platform.is.mobile }" id="pinnedModules" icon="apps" flat @@ -90,7 +90,7 @@ const pinnedModulesRef = ref(); <PinnedModules ref="pinnedModulesRef" /> </QBtn> <QBtn - class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}" + :class="{ 'q-pa-none': quasar.platform.is.mobile }" rounded dense flat @@ -115,14 +115,11 @@ const pinnedModulesRef = ref(); </QHeader> </template> -<!-- <style lang="scss" scoped> -.pinnedModules { - @media (max-width: 768px) { - padding: 0px; - margin-left: 0px; - } +<style lang="scss" scoped> +.searchbar { + width: max-content; } -</style> --> +</style> <i18n> en: Go to Salix: Go to Salix diff --git a/src/components/PinnedModules.vue b/src/components/PinnedModules.vue index c85b6b2fa..5f291b580 100644 --- a/src/components/PinnedModules.vue +++ b/src/components/PinnedModules.vue @@ -35,19 +35,13 @@ async function redirect() { <template> <QMenu anchor="bottom left" max-width="300px" max-height="400px"> <div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md"> - <QBtn - flat - stack - size="lg" - icon="more_up" - class="col-5" - @click="redirect($route.params.id)" - > - <div class="text-center button-text">Salix</div> + <QBtn flat stack size="lg" icon="more_up" @click="redirect($route.params.id)"> + <div class="button-text">Salix</div> </QBtn> - <QBtn flat stack size="lg" icon="home" class="col-5" to="/"> - <div class="text-center button-text">{{ t('Home') }}</div> + <QBtn flat stack size="lg" icon="home" to="/"> + <div class="button-text">{{ t('Home') }}</div> </QBtn> + <div class="row col-12 justify-around q-mt-md"> <QBtn flat diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue index f495a49bb..af6999b5b 100644 --- a/src/components/ui/VnSearchbar.vue +++ b/src/components/ui/VnSearchbar.vue @@ -114,13 +114,9 @@ async function search() { </template> <style lang="scss" scoped> -.q-field { - width: 250px; -} - @media screen and (min-width: $breakpoint-sm-max) { .q-field { - width: 400px; + width: 450px; } }