From bba6050c5f3d977ce462dfc69d4de1f70fe19520 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 8 Aug 2023 12:36:11 +0200
Subject: [PATCH 1/4] refs #6082 navBar

---
 src/components/NavBar.vue | 42 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 7b7b1097f..41654f815 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -6,6 +6,7 @@ import UserPanel from 'components/UserPanel.vue';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import PinnedModules from './PinnedModules.vue';
+import { useQuasar } from 'quasar';
 
 const { t } = useI18n();
 const session = useSession();
@@ -14,6 +15,7 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 const appName = 'Lilium';
+const quasar = useQuasar();
 
 onMounted(() => stateStore.setMounted());
 </script>
@@ -34,7 +36,13 @@ onMounted(() => stateStore.setMounted());
                 </QTooltip>
             </QBtn>
             <RouterLink to="/">
-                <QBtn class="q-ml-xs" color="primary" flat round>
+                <QBtn
+                    class="q-ml-xs"
+                    color="primary"
+                    flat
+                    round
+                    v-if="!quasar.platform.is.mobile"
+                >
                     <QAvatar square size="md">
                         <QImg
                             src="~/assets/logo_icon.svg"
@@ -56,13 +64,20 @@ onMounted(() => stateStore.setMounted());
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <QBtn id="pinnedModules" icon="apps" flat dense rounded>
+                <QBtn
+                    class="pinnedModules"
+                    id="pinnedModules"
+                    icon="apps"
+                    flat
+                    dense
+                    rounded
+                >
                     <QTooltip bottom>
                         {{ t('globals.pinnedModules') }}
                     </QTooltip>
                     <PinnedModules />
                 </QBtn>
-                <QBtn rounded dense flat no-wrap id="user">
+                <QBtn class="user-button" rounded dense flat no-wrap id="user">
                     <QAvatar size="lg">
                         <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -80,3 +95,24 @@ onMounted(() => stateStore.setMounted());
         </QToolbar>
     </QHeader>
 </template>
+
+<style lang="scss" scoped>
+.user-button {
+    display: flex;
+    align-items: center;
+    padding: 8px; /* Ajusta el valor de padding según tus necesidades */
+
+    /* Estilos específicos para dispositivos móviles */
+    @media (max-width: 768px) {
+        padding: 2px; /* Reduce el padding en dispositivos móviles */
+        margin-left: 1px;
+    }
+}
+
+.pinnedModules {
+    @media (max-width: 768px) {
+        padding: 2px; /* Reduce el padding en dispositivos móviles */
+        margin-left: 1px;
+    }
+}
+</style>

From f127c1019bb690739beb9bc835ef153e7566ea74 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 9 Aug 2023 14:41:50 +0200
Subject: [PATCH 2/4] refs #6082 v-if mobile icon search

---
 src/components/NavBar.vue         | 25 ++++++++++---------------
 src/components/ui/VnSearchbar.vue |  4 +++-
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 41654f815..7f7fc4b4e 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -77,7 +77,14 @@ onMounted(() => stateStore.setMounted());
                     </QTooltip>
                     <PinnedModules />
                 </QBtn>
-                <QBtn class="user-button" rounded dense flat no-wrap id="user">
+                <QBtn
+                    class="{quasar.platform.is.mobile: 'q-pa-sm q-ml-xs'}"
+                    rounded
+                    dense
+                    flat
+                    no-wrap
+                    id="user"
+                >
                     <QAvatar size="lg">
                         <QImg
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -97,22 +104,10 @@ onMounted(() => stateStore.setMounted());
 </template>
 
 <style lang="scss" scoped>
-.user-button {
-    display: flex;
-    align-items: center;
-    padding: 8px; /* Ajusta el valor de padding según tus necesidades */
-
-    /* Estilos específicos para dispositivos móviles */
-    @media (max-width: 768px) {
-        padding: 2px; /* Reduce el padding en dispositivos móviles */
-        margin-left: 1px;
-    }
-}
-
 .pinnedModules {
     @media (max-width: 768px) {
-        padding: 2px; /* Reduce el padding en dispositivos móviles */
-        margin-left: 1px;
+        padding: 0px;
+        margin-left: 0px;
     }
 }
 </style>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 453af78af..f495a49bb 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
 
 const props = defineProps({
     dataKey: {
@@ -93,7 +95,7 @@ async function search() {
             autofocus
         >
             <template #prepend>
-                <QIcon name="search" />
+                <QIcon name="search" v-if="!quasar.platform.is.mobile" />
             </template>
             <template #append>
                 <QIcon

From a63a24e5e691121012efa4c8e8500c02dbcd706d Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 10 Aug 2023 12:30:21 +0200
Subject: [PATCH 3/4] refs #6082 none

---
 src/components/NavBar.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 7f7fc4b4e..7d1633eea 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -65,8 +65,7 @@ onMounted(() => stateStore.setMounted());
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
                 <QBtn
-                    class="pinnedModules"
-                    id="pinnedModules"
+                    class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
                     icon="apps"
                     flat
                     dense
@@ -78,7 +77,7 @@ onMounted(() => stateStore.setMounted());
                     <PinnedModules />
                 </QBtn>
                 <QBtn
-                    class="{quasar.platform.is.mobile: 'q-pa-sm q-ml-xs'}"
+                    class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
                     rounded
                     dense
                     flat
@@ -103,11 +102,11 @@ onMounted(() => stateStore.setMounted());
     </QHeader>
 </template>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .pinnedModules {
     @media (max-width: 768px) {
         padding: 0px;
         margin-left: 0px;
     }
 }
-</style>
+</style> -->

From 36a487a9fcabc916aa746379664588f2841b744f Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 21 Aug 2023 12:50:01 +0200
Subject: [PATCH 4/4] refs #6082 navBar fix mobile

---
 src/components/NavBar.vue         | 17 +++++++----------
 src/components/PinnedModules.vue  | 16 +++++-----------
 src/components/ui/VnSearchbar.vue |  6 +-----
 3 files changed, 13 insertions(+), 26 deletions(-)

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;
     }
 }