fix: make dialogs responsive

usnistgov · Jan 8, 2025 · 1614e0e · 1614e0e
1 parent 21cd290
commit 1614e0e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 54 deletions.
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
@@ -40,6 +40,10 @@
 
   const $q = useQuasar()
 
+  const isExtraSmall = computed(() => {
+    return $q.screen.xs
+  })
+
   const isMobile = computed(() => {
     return $q.screen.sm || $q.screen.xs
   })
@@ -50,6 +54,7 @@
   
   provide('isMobile', isMobile)
   provide('isMedium', isMedium)
+  provide('isExtraSmall', isExtraSmall)
 
   watch(route, (to) => {
     // on every route change, close snapshot drawer if open

diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
@@ -121,7 +121,7 @@ h2 {
 
 .field-label {
   width: 100px;
-  font-size: 1rem;
+  font-size: .6em;
   color: black;
 }
 

diff --git a/src/frontend/src/dialogs/DialogComponent.vue b/src/frontend/src/dialogs/DialogComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <q-dialog v-model="showDialog" aria-labelledby="modalTitle" :persistent="persistent">
-    <q-card flat style="min-width: 500px; max-width: 80%;">
+    <q-card flat :style="{ 'min-width': isMedium ? '50%' : '30%' }">
       <q-form @submit="$emit('emitSubmit')">
         <q-card-section class="bg-primary text-white q-mb-md">
           <div class="text-h6 row justify-between">
@@ -37,11 +37,13 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { inject } from 'vue'
   const showDialog = defineModel('showDialog')
   defineEmits(['emitSubmit', 'emitCancel', 'emitSaveDraft'])
   const props = defineProps(['hideDraftBtn', 'persistent', 'showHistoryToggle', 'disableConfirm'])
 
   const history = defineModel('history')
 
+  const isMedium = inject('isMedium')
+
 </script>
diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
@@ -16,62 +16,57 @@
     <div class="row">
       <!-- this is the form col -->
       <div
-        class="col-auto" 
-        style="width: 500px;"
+        :class="`${isExtraSmall ? 'col-12 q-mb-md' : 'col'}`"
         :style="{ 
           pointerEvents: history ? 'none' : 'auto', 
           opacity: history ? .65 : 1, 
           cursor: history ? 'not-allowed' : 'default' 
         }"
         ref="formCol"
       >
-        <div class="row items-center">
-          <label class="col-3 q-mb-lg" id="queueName">
-            Queue Name:
-          </label>
-          <q-input 
-            class="col q-mb-xs" 
-            outlined 
-            dense 
-            v-model.trim="name"  
-            autofocus 
-            :rules="[requiredRule]" 
-            aria-labelledby="queueName"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center q-mb-xs">
-          <label class="col-3 q-mb-lg" id="pluginGroup">
-            Group:
-          </label>
-          <q-select
-            class="col"
-            outlined 
-            v-model="group" 
-            :options="store.groups"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            dense
-            :rules="[requiredRule]"
-            aria-labelledby="pluginGroup"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center">
-          <label class="col-3" id="description">
-            Description:
-          </label>
-          <q-input
-            class="col"
-            v-model.trim="description"
-            outlined
-            type="textarea"
-            aria-labelledby="description"
-          />
-        </div>
-        <!-- <q-inner-loading :showing="history" size="0px" /> -->
+        <q-input 
+          class="q-mb-xs" 
+          outlined 
+          dense 
+          v-model.trim="name"  
+          autofocus 
+          :rules="[requiredRule]" 
+          id="queueName"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="queueName" class="field-label">Queue Name:</label>
+          </template>
+        </q-input>
+        <q-select
+          class="q-mb-xs"
+          outlined 
+          v-model="group" 
+          :options="store.groups"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          dense
+          :rules="[requiredRule]"
+          id="pluginGroup"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="pluginGroup" class="field-label">Group:</label>
+          </template>
+        </q-select>
+        <q-input
+          v-model.trim="description"
+          outlined
+          type="textarea"
+          id="description"
+          dense
+        >
+          <template #before>
+            <label for="description" class="field-label">Description:</label>
+          </template>
+        </q-input>
       </div>
       <!-- this is the history col -->
       <SnapshotList 
@@ -80,20 +75,22 @@
         type="queues"
         :id="props.editQueue.id"
         :maxHeight="formCol?.clientHeight"
-        class="q-ml-md"
+        :class="`${isExtraSmall ? 'col-12' : 'col-sm-auto q-ml-md'}`"
       />
     </div>
   </DialogComponent>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
+  import { ref, watch, inject } from 'vue'
   import DialogComponent from './DialogComponent.vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
   import SnapshotList from '../components/SnapshotList.vue'
 
   const store = useLoginStore()
 
+  const isExtraSmall = inject('isExtraSmall')
+
   const props = defineProps(['editQueue'])
   const emit = defineEmits(['addQueue', 'updateQueue', 'saveDraft'])