feat: mobile and tablet layouts

fluidd-core · Oct 12, 2020 · f79f945 · f79f945
1 parent 6b34f72
commit f79f945
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/src/components/cards/ToolsCard.vue b/src/components/cards/ToolsCard.vue
@@ -42,19 +42,19 @@
       background-color="tertiary"
     >
       <v-tab :key="0">
-        Macros
+        <span class="d-none d-sm-inline">Macros</span>
         <v-icon>{{ icons.fileCode }}</v-icon>
       </v-tab>
       <v-tab :key="1">
-        Sys Commands
+        <span class="d-none d-sm-inline">Sys Commands</span>
         <v-icon>{{ icons.tools }}</v-icon>
       </v-tab>
       <v-tab :key="2">
-        Jobs
+        <span class="d-none d-sm-inline">Jobs</span>
         <v-icon>{{ icons.files }}</v-icon>
       </v-tab>
       <v-tab :key="3">
-        Console
+        <span class="d-none d-sm-inline">Console</span>
         <v-icon>{{ icons.console }}</v-icon>
       </v-tab>
     </v-tabs>
@@ -82,3 +82,10 @@ export default class ToolsCard extends Mixins(UtilsMixin) {
   activeTab = 0
 }
 </script>
+
+<style lang="scss" scoped>
+  ::v-deep .v-tabs > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile > .v-slide-group__prev,
+  ::v-deep .v-tabs > .v-slide-group--is-overflowing.v-tabs-bar--is-mobile > .v-slide-group__next {
+    display: none !important;
+  }
+</style>
diff --git a/src/components/widgets/TemperatureTargetsWidget.vue b/src/components/widgets/TemperatureTargetsWidget.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="py-2 px-6">
-      <v-row>
+      <v-row class="d-none d-sm-flex">
         <v-col offset="4" class="py-0 px-2 text-subtitle-1 grey--text text--darken-1">
           Actual
         </v-col>
@@ -24,15 +24,16 @@
           </v-menu> -->
         </v-col>
       </v-row>
+
       <v-row v-for="item in heaters" :key="item.name">
-        <v-col class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
+        <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
           {{ item.name }}
           <small class="ml-3" v-if="item.target === 0">off</small>
         </v-col>
-        <v-col class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
           {{ item.temperature.toFixed(1) }}<small>°C</small>
         </v-col>
-        <v-col class="py-1 px-2">
+        <v-col cols="6" sm="4" class="py-1 px-2">
           <input-temperature
             :value="item.target"
             @input="setHeaterTargetTemp(item, $event)"
@@ -41,8 +42,9 @@
           ></input-temperature>
         </v-col>
       </v-row>
+
       <v-row v-for="item in fans" :key="item.name">
-        <v-col class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
+        <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
           {{ item.name }}
           <small class="ml-2" v-if="item.speed > 0 && item.target > 0">
             <v-icon
@@ -59,10 +61,10 @@
           </small>
           <small class="ml-2" v-if="item.speed <=0 && item.target <= 0">off</small>
         </v-col>
-        <v-col class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
           {{ item.temperature.toFixed(1) }}<small>°C</small>
         </v-col>
-        <v-col class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
           <input-temperature
             :value="item.target"
             @input="setFanTargetTemp(item, $event)"
@@ -71,11 +73,12 @@
           ></input-temperature>
         </v-col>
       </v-row>
+
       <v-row v-for="item in sensors" :key="item.name">
-        <v-col class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
+        <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
           {{ item.name }}
         </v-col>
-        <v-col class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
           <v-tooltip right>
             <template v-slot:activator="{ on, attrs }">
               <span v-bind="attrs" v-on="on">{{ item.temperature.toFixed(1) }}<small>°C</small></span>
@@ -85,11 +88,11 @@
               <span class="red--text text--lighten-2">{{ item.maxMeasuredTemp.toFixed(1) }}°C</span>
             </span>
           </v-tooltip>
-
         </v-col>
-        <v-col class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
         </v-col>
       </v-row>
+
     </v-container>
 </template>
 

diff --git a/src/views/Configuration.vue b/src/views/Configuration.vue
@@ -9,18 +9,18 @@
           </v-card-title>
         </v-card>
         <v-row>
-          <v-col cols="7" v-if="supportsBedMesh">
+          <v-col cols="12" md="7" v-if="supportsBedMesh">
             <bed-mesh-widget></bed-mesh-widget>
             <v-row>
-              <v-col cols="6">
+              <v-col cols="12" sm="6">
                 <runout-sensor-widget></runout-sensor-widget>
               </v-col>
-              <v-col cols="6">
+              <v-col cols="12" sm="6">
                 <end-stops-widget></end-stops-widget>
               </v-col>
             </v-row>
           </v-col>
-          <v-col cols="5">
+          <v-col cols="12" md="5">
             <!-- <printer-limits-widget></printer-limits-widget> -->
             <file-system-widget
               :root="['config', 'config_examples']"

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -10,11 +10,11 @@
           </v-card-title>
         </v-card>
         <v-row>
-          <v-col cols="6">
+          <v-col cols="12" sm="6">
             <general-settings-widget></general-settings-widget>
             <!-- <temperature-presets-settings-widget></temperature-presets-settings-widget> -->
           </v-col>
-          <v-col cols="6">
+          <v-col cols="12" sm="6">
             <macro-settings-widget></macro-settings-widget>
           </v-col>
         </v-row>