feat: layout improvements for small screen

src/components/common/AddInstanceDialog.vue

@@ -4,17 +4,11 @@
     max-width="320"
     :save-button-disabled="!verified"
     :valid.sync="valid"
+    :title="$t('app.general.title.add_printer')"
+    :help-tooltip="$t('app.endpoint.tooltip.endpoint_examples')"
     persistent
     @save="addInstance"
   >
-    <template #title>
-      <span class="focus--text">{{ $t('app.general.title.add_printer') }}</span>
-      <v-spacer />
-      <app-inline-help bottom>
-        <span v-html="$t('app.endpoint.tooltip.endpoint_examples')" />
-      </app-inline-help>
-    </template>
-
     <v-card-text>
       <span v-html="helpTxt" />
 

src/components/common/PeripheralsDialog.vue

@@ -51,7 +51,7 @@
       </v-tooltip>
     </v-toolbar>
 
-    <v-card-text>
+    <v-card-text class="fill-height">
       <v-tabs-items
         v-model="tab"
         touchless

src/components/common/ScrewsTiltAdjustDialog.vue

@@ -5,7 +5,7 @@
     max-width="500"
     @save="retry"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <v-simple-table>
         <thead>
           <tr>
@@ -54,7 +54,7 @@
           </tr>
         </tbody>
       </v-simple-table>
-    </div>
+    </v-card-text>
 
     <template #actions>
       <v-spacer />

src/components/settings/auth/UserConfigDialog.vue

@@ -6,7 +6,7 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.general.label.name')">
         <v-text-field
           v-model="user.username"
@@ -42,7 +42,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/settings/auth/UserPasswordDialog.vue

@@ -7,19 +7,18 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
-      <v-card-text
-        v-if="error"
-        class="mb-0"
-      >
+    <v-card-text class="pa-0">
+      <template v-if="error">
         <v-alert
           type="error"
           text
-          class="mb-0"
+          class="mx-4 mt-4"
         >
           {{ $t('app.general.msg.wrong_password') }}
         </v-alert>
-      </v-card-text>
+
+        <v-divider />
+      </template>
 
       <app-setting :title="$t('app.general.label.current_password')">
         <v-text-field
@@ -54,7 +53,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/settings/cameras/CameraConfigDialog.vue

@@ -8,7 +8,7 @@
     :no-actions="camera.source === 'config'"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.setting.label.enable')">
         <v-switch
           v-model="camera.enabled"
@@ -187,7 +187,7 @@
           />
         </app-setting>
       </template>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/settings/console/ConsoleFilterDialog.vue

@@ -5,7 +5,7 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting
         :title="$t('app.setting.label.enable')"
         :r-cols="8"
@@ -73,7 +73,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/settings/macros/MacroSettingsDialog.vue

@@ -7,7 +7,7 @@
     max-width="480"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting
         :title="$t('app.general.label.alias')"
       >
@@ -95,7 +95,7 @@
           hide-details
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/settings/presets/PresetDialog.vue

@@ -6,7 +6,7 @@
     :save-button-text="(preset.id !== -1) ? $t('app.general.btn.save') : $t('app.general.btn.add')"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.setting.label.thermal_preset_name')">
         <v-text-field
           v-model="preset.name"
@@ -21,12 +21,10 @@
 
       <v-divider />
 
-      <template
-        v-for="(item, i) in heaters"
-      >
+      <template v-for="(item, i) in heaters">
         <app-setting
           :key="`${i}heater`"
-          :title="item.name"
+          :title="$filters.startCase(item.name)"
         >
           <v-checkbox
             v-model="preset.values[item.name].active"
@@ -52,12 +50,10 @@
         <v-divider :key="i + 'heaterd'" />
       </template>
 
-      <template
-        v-for="(item, i) in fans"
-      >
+      <template v-for="(item, i) in fans">
         <app-setting
           :key="`${i}fan`"
-          :title="item.name"
+          :title="$filters.startCase(item.name)"
         >
           <v-checkbox
             v-model="preset.values[item.name].active"
@@ -93,7 +89,7 @@
           class="console-command"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 

src/components/ui/AppDialog.vue

@@ -3,6 +3,8 @@
     v-model="open"
     :scrollable="scrollable"
     v-bind="$attrs"
+    :fullscreen="isMobileViewport"
+    :transition="isMobileViewport ? 'dialog-bottom-transition' : undefined"
   >
     <v-form
       ref="form"
@@ -21,9 +23,49 @@
             'collapsable-card-title': titleShadow
           }"
         >
-          <slot name="title">
-            <span class="focus--text">{{ title }}</span>
-          </slot>
+          <v-row
+            no-gutters
+            class="flex-nowrap"
+          >
+            <v-col
+              align-self="center"
+              class="text-no-wrap"
+            >
+              <slot name="title">
+                <span class="focus--text">{{ title }}</span>
+                <app-inline-help
+                  v-if="helpTooltip"
+                  bottom
+                  small
+                  :tooltip="helpTooltip"
+                />
+              </slot>
+            </v-col>
+
+            <v-col
+              cols="auto"
+              align-self="center"
+            >
+              <slot name="menu" />
+            </v-col>
+
+            <v-col
+              cols="auto"
+              align-self="center"
+            >
+              <v-btn
+                fab
+                text
+                x-small
+                class="ml-1"
+                @click="open = false"
+              >
+                <v-icon>
+                  $close
+                </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
         </v-card-title>
 
         <v-card-subtitle
@@ -71,11 +113,12 @@
 </template>
 
 <script lang="ts">
+import BrowserMixin from '@/mixins/browser'
 import type { VForm } from '@/types'
-import { Component, Vue, Prop, VModel, Ref, PropSync } from 'vue-property-decorator'
+import { Component, Prop, VModel, Ref, PropSync, Mixins } from 'vue-property-decorator'
 
 @Component({})
-export default class AppDialog extends Vue {
+export default class AppDialog extends Mixins(BrowserMixin) {
   @VModel({ type: Boolean })
     open?: boolean
 
@@ -85,6 +128,9 @@ export default class AppDialog extends Vue {
   @Prop({ type: String })
   readonly title?: string
 
+  @Prop({ type: String })
+  readonly helpTooltip?: string
+
   @Prop({ type: String })
   readonly subTitle?: string