minor ui fixes for responsivity problems

Arborator · Oct 30, 2024 · e1d6626 · e1d6626
1 parent 6264f80
commit e1d6626
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 34 deletions.
diff --git a/src/components/sample/AdvancedFilter.vue b/src/components/sample/AdvancedFilter.vue
@@ -2,8 +2,8 @@
   <div class="row q-pa-md">
     <Breadcrumbs :height="30" :font-size="16" />
   </div>
-  <div class="row q-pa-md q-gutter-x-md">
-    <div class="col-5">
+  <div class="row q-pa-md q-gutter-md">
+    <div class="col-4">
       <q-input 
         v-model="textFilter" 
         :label="$t('advancedFilter.textFilter')" 
@@ -13,7 +13,7 @@
         @keyup.enter="applyAdvancedFilter()"
       ></q-input>
     </div>
-    <div class="col-1 q-px-md q-gutter-md">
+    <div class="col-1">
       <q-select
         outlined
         dense
@@ -34,8 +34,10 @@
         </template>
       </q-select>
     </div>
-    <q-btn @click="applyAdvancedFilter" color="primary">{{ $t('advancedFilter.applyFilter') }}</q-btn>
-    <div class="col-2 q-px-md q-gutter-md">
+    <div class="col-1">
+      <q-btn @click="applyAdvancedFilter" color="primary">{{ $t('advancedFilter.applyFilter') }}</q-btn>
+    </div>
+    <div class="col-2">
       <q-select
         outlined
         dense
@@ -45,24 +47,26 @@
         @update:model-value="orderFilteredTrees(order)"
        />
     </div>
-    <q-separator vertical />
-    <q-btn no-caps v-if="config === 'ud' && !blindAnnotationMode" color="primary" :label="$t('advancedFilter.validateAllTrees')" @click="validateAllTrees()">
-      <q-tooltip>
-        {{ $t('advancedFilter.validateAllTreesTooltip') }}
-      </q-tooltip>
-    </q-btn>
-    <q-btn 
-      v-if="isLoggedIn" 
-      outline 
-      :disable="pendingModifications.size === 0" 
-      color="primary" 
-      :label="$t('advancedFilter.savePendingTrees')" 
-      @click="saveAllTrees()"
-    >
-      <q-badge v-if="pendingModifications.size > 0" color="red" floating>
-        {{ pendingModifications.size }}
-      </q-badge>
-    </q-btn>
+    <div class="col-2">
+      <q-separator vertical />
+      <q-btn no-caps v-if="config === 'ud' && !blindAnnotationMode" color="primary" :label="$t('advancedFilter.validateAllTrees')" @click="validateAllTrees()">
+        <q-tooltip>
+          {{ $t('advancedFilter.validateAllTreesTooltip') }}
+        </q-tooltip>
+      </q-btn>
+      <q-btn 
+        v-if="isLoggedIn" 
+        outline 
+        :disable="pendingModifications.size === 0" 
+        color="primary" 
+        :label="$t('advancedFilter.savePendingTrees')" 
+        @click="saveAllTrees()"
+      >
+        <q-badge v-if="pendingModifications.size > 0" color="red" floating>
+          {{ pendingModifications.size }}
+        </q-badge>
+      </q-btn>
+    </div>
   </div>
   <div class="q-pa-md">
     <div class="row text-h6">

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
@@ -1,14 +1,51 @@
 <template>
   <q-layout view="hHh Lpr fFf">
-    <q-header style="height: 3vw" :class="`${$q.dark.isActive ? 'bg-dark' : 'bg-white'}`"  class="q-pa-md" id="main-header">
+    <q-header style="height: 5vh" :class="`${$q.dark.isActive ? 'bg-dark' : 'bg-white'}`"  class="q-pa-md" id="main-header">
       <q-bar :class="$q.dark.isActive ? 'bg-dark' : 'bg-white text-black'" class="row justify-evenly">
         <q-btn flat to="/projects" :ripple="false" type="a">
           <div class="q-btn__content text-center col items-center q-anchor--skip row">
             <img v-if="$q.dark.isActive" alt="Arborator" src="/svg/arborator.grew.white.svg" style="height: 2.3vw" />
             <img v-else alt="Arborator" src="/svg/arborator.grew.svg" style="height: 2.3vw" />
           </div>
         </q-btn>
-        <div>
+        <div v-if="$q.platform.is.mobile">
+          <q-btn-dropdown flat label="More">
+            <q-list>
+              <q-item 
+                v-close-popup 
+                clickable 
+                to="/projects"
+              >
+                <q-item-section>
+                  <q-item-label>Projects page</q-item-label>
+                </q-item-section> 
+              </q-item>
+              <q-item 
+                v-close-popup 
+                clickable 
+                href="https://arborator.github.io/arborator-documentation/#/" 
+                target="_blank"
+              >
+                <q-item-section>
+                  <q-item-label>Documentation</q-item-label>
+                </q-item-section>
+                <q-tooltip content-class="text-white bg-primary">{{ $t('documentation') }}</q-tooltip>
+              </q-item>
+              <q-item 
+                v-close-popup 
+                clickable 
+                href="https://github.com/Arborator/arborator-frontend/issues"  
+                target="_blank"
+              >
+                <q-item-section>
+                  <q-item-label>Discussion</q-item-label>
+                </q-item-section>
+                <q-tooltip content-class="text-white bg-primary">{{ $t('feedback') }}</q-tooltip>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
+        <div v-else>
           <q-btn
             no-caps
             flat 
@@ -42,7 +79,7 @@
             <q-tooltip content-class="text-white bg-primary">{{ $t('feedback') }}</q-tooltip>
           </q-btn>
         </div>
-        <div class="row justify-start q-gutter-md">
+        <div :class="!$q.platform.is.mobile ? 'row justify-start q-gutter-md' : ''">
           <q-toggle 
             v-model="darkMode"
             checked-icon="dark_mode"
@@ -70,7 +107,7 @@
             </q-list>
           </q-btn-dropdown>
           <q-btn v-else rounded outline color="primary">
-            <q-icon :name="loggedWithGithub ? 'fab fa-github' : 'fab fa-google'" class="q-mr-md" />
+            <q-icon v-if="!$q.platform.is.mobile" :name="loggedWithGithub ? 'fab fa-github' : 'fab fa-google'" class="q-mr-md" />
             <q-tooltip> {{ $t('userInformation') }} {{ loggedWithGithub ? ' Github' : 'Gmail' }} </q-tooltip>
             <q-icon v-if="pictureUrl === ''" name="account_circle" />
             <q-avatar v-else :key="avatarKey" color="default" text-color="white" size="xs">
@@ -102,7 +139,7 @@
               </div>
             </q-menu>
           </q-btn>
-          <q-select rounded v-model="lang" :options="langOptions" dense outlined options-dense map-options emit-value>
+          <q-select :style="$q.platform.is.mobile ? 'width: 60px;': ''" v-model="lang" :options="langOptions" dense outlined options-dense map-options emit-value>
             <q-tooltip> {{ $t('switchLanguage') }} </q-tooltip>
           </q-select>
         </div>

diff --git a/src/pages/MyProjects.vue b/src/pages/MyProjects.vue
@@ -26,7 +26,7 @@
         </q-card-section>
         <q-separator />
         <q-card-section>
-          <div class="row q-gutter-x-md" style="justify-content: right;">
+          <div class="row q-gutter-md" style="justify-content: right;">
             <q-btn
               no-caps
               color="primary"

diff --git a/src/pages/ProjectsHub.vue b/src/pages/ProjectsHub.vue
@@ -4,9 +4,11 @@
     <q-card flat class="full">
       <q-card-section class="q-pa-md row items-start q-gutter-md">
         <q-toolbar class="q-gutter-md">
-          <q-toolbar-title :class="($q.dark.isActive ? '' : 'text-primary') + ' text-bold'">
-            {{ $t('projectHub.title') }}
-          </q-toolbar-title>
+          <div :class="$q.platform.is.mobile ? 'row': ''">
+            <q-toolbar-title :class="($q.dark.isActive ? '' : 'text-primary') + ' text-bold'">
+              {{ $t('projectHub.title') }}
+            </q-toolbar-title>
+          </div>
           <q-btn
             no-caps
             :disable="!isLoggedIn"
@@ -87,12 +89,13 @@
         <q-virtual-scroll
           v-if="$q.platform.is.mobile"
           :items="filteredProjects"
-          style="max-height: 60vh; width: 80vw"
           :virtual-scroll-slice-size="30"
           :virtual-scroll-item-size="200"
         >
           <template #default="{ item }">
-            <ProjectCard :key="item.id" style="max-width: 80vw" :project="item" :parent-delete-project="deleteProject"></ProjectCard>
+            <div class="q-pa-md row q-gutter-md">
+              <ProjectCard :key="item.id" style="max-width: 80vw" :project="item" :parent-delete-project="deleteProject"></ProjectCard>
+            </div>
           </template>
         </q-virtual-scroll>
         <div v-if="!$q.platform.is.mobile" class="q-pa-md row q-gutter-md">