mobile screens

Author: DoktorShift

templates/devicetimer/index.html

@@ -212,6 +212,59 @@
         background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
         pointer-events: none;
     }
+
+    /* Responsive Styles */
+    @media (max-width: 599px) {
+        .stat-item {
+            padding: 10px 12px;
+        }
+
+        .stat-label {
+            font-size: 0.65rem;
+        }
+
+        .stat-value {
+            font-size: 1.2rem;
+        }
+
+        .qr-wrapper {
+            padding: 12px;
+        }
+
+        .qr-image {
+            width: 200px;
+            height: 200px;
+        }
+
+        .switch-card {
+            padding: 10px;
+        }
+
+        /* Hide Currency, Timezone, Hours columns on mobile */
+        .q-table th:nth-child(3),
+        .q-table td:nth-child(3),
+        .q-table th:nth-child(4),
+        .q-table td:nth-child(4),
+        .q-table th:nth-child(5),
+        .q-table td:nth-child(5) {
+            display: none !important;
+        }
+
+        .info-banner-wrapper {
+            height: 100px;
+        }
+    }
+
+    @media (max-width: 400px) {
+        .stat-value {
+            font-size: 1rem;
+        }
+
+        .qr-image {
+            width: 160px;
+            height: 160px;
+        }
+    }
 </style>
 {% endblock %}
 
@@ -235,7 +288,7 @@
                     borderless
                     dense
                     filled
-                    style="min-width: 200px;"
+                    style="min-width: 180px;"
                     @update:model-value="onWalletChange"
                 >
                     <template v-slot:prepend>
@@ -277,7 +330,7 @@
 
         <!-- Stats Cards -->
         <div class="row q-col-gutter-sm q-mb-md">
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -297,7 +350,7 @@
                     </div>
                 </q-card>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -317,7 +370,7 @@
                     </div>
                 </q-card>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -359,7 +412,7 @@
             <div class="row items-center q-px-md q-pt-md q-pb-sm">
                 <div class="col">
                     <div class="text-subtitle1 text-weight-medium">Timed Devices</div>
-                    <div class="text-caption text-grey">Manage your bitcoinSwitch devices</div>
+                    <div class="text-caption text-grey gt-xs">Manage your bitcoinSwitch devices</div>
                 </div>
                 <div class="col-auto row items-center q-gutter-x-sm">
                     <q-input
@@ -369,13 +422,13 @@
                         debounce="300"
                         placeholder="Search..."
                         class="search-input"
-                        style="width: 160px;"
+                        style="width: 140px;"
                     >
                         <template v-slot:prepend>
                             <q-icon name="search" size="16px" color="grey-6"></q-icon>
                         </template>
                     </q-input>
-                    <q-btn flat round size="sm" @click="exportCSV">
+                    <q-btn flat round size="sm" @click="exportCSV" class="gt-xs">
                         <q-icon size="18px">
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -385,8 +438,8 @@
                         <q-tooltip>Export CSV</q-tooltip>
                     </q-btn>
                     <q-btn unelevated color="primary" size="sm" class="avatar_style" @click="openDeviceDialog()" no-caps>
-                        <q-icon name="add" size="18px" class="q-mr-xs"></q-icon>
-                        New Device
+                        <q-icon name="add" size="18px"></q-icon>
+                        <span class="q-ml-xs gt-xs">New Device</span>
                     </q-btn>
                 </div>
             </div>
@@ -455,7 +508,7 @@
                 hide-bottom
             >
                 <template v-slot:body-cell-id="props">
-                    <q-td :props="props">
+                    <q-td :props="props" class="hide-on-mobile">
                         <div class="row items-center no-wrap">
                             <code class="text-caption text-grey-7" style="font-size: 0.7rem;">{% raw %}{{ props.row.id.substring(0, 8) }}...{% endraw %}</code>
                             <q-btn flat dense round size="xs" color="grey-6" class="q-ml-xs" @click="copyText(props.row.id, 'Device ID copied!')">
@@ -774,7 +827,7 @@
                         ></q-select>
 
                         <div class="row q-col-gutter-sm">
-                            <div class="col-6">
+                            <div class="col-12 col-sm-6">
                                 <q-select
                                     v-model="deviceDialog.data.currency"
                                     :options="currencies"
@@ -783,7 +836,7 @@
                                     label="Currency"
                                 ></q-select>
                             </div>
-                            <div class="col-6">
+                            <div class="col-12 col-sm-6">
                                 <q-select
                                     v-model="deviceDialog.data.timezone"
                                     :options="timezones"