Skip to content

Commit 850787e

Browse files
DoktorShiftDoktorShift
authored
Merge pull request #7 from DoktorShift/update_v1
mobile screens web flasher
2 parents 46c8975 + 2c14eed commit 850787e

1 file changed

Lines changed: 88 additions & 13 deletions

File tree

‎templates/devicetimer/index.html‎

Lines changed: 88 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,59 @@
212212
background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
213213
pointer-events: none;
214214
}
215+
216+
/* Responsive Styles */
217+
@media (max-width: 599px) {
218+
.stat-item {
219+
padding: 10px 12px;
220+
}
221+
222+
.stat-label {
223+
font-size: 0.65rem;
224+
}
225+
226+
.stat-value {
227+
font-size: 1.2rem;
228+
}
229+
230+
.qr-wrapper {
231+
padding: 12px;
232+
}
233+
234+
.qr-image {
235+
width: 200px;
236+
height: 200px;
237+
}
238+
239+
.switch-card {
240+
padding: 10px;
241+
}
242+
243+
/* Hide Currency, Timezone, Hours columns on mobile */
244+
.q-table th:nth-child(3),
245+
.q-table td:nth-child(3),
246+
.q-table th:nth-child(4),
247+
.q-table td:nth-child(4),
248+
.q-table th:nth-child(5),
249+
.q-table td:nth-child(5) {
250+
display: none !important;
251+
}
252+
253+
.info-banner-wrapper {
254+
height: 100px;
255+
}
256+
}
257+
258+
@media (max-width: 400px) {
259+
.stat-value {
260+
font-size: 1rem;
261+
}
262+
263+
.qr-image {
264+
width: 160px;
265+
height: 160px;
266+
}
267+
}
215268
</style>
216269
{% endblock %}
217270

@@ -235,7 +288,7 @@
235288
borderless
236289
dense
237290
filled
238-
style="min-width: 200px;"
291+
style="min-width: 180px;"
239292
@update:model-value="onWalletChange"
240293
>
241294
<template v-slot:prepend>
@@ -277,7 +330,7 @@
277330

278331
<!-- Stats Cards -->
279332
<div class="row q-col-gutter-sm q-mb-md">
280-
<div class="col-4">
333+
<div class="col-12 col-sm-4">
281334
<q-card class="stat-card custom_border" flat>
282335
<div class="row items-center stat-item">
283336
<div class="col">
@@ -297,7 +350,7 @@
297350
</div>
298351
</q-card>
299352
</div>
300-
<div class="col-4">
353+
<div class="col-12 col-sm-4">
301354
<q-card class="stat-card custom_border" flat>
302355
<div class="row items-center stat-item">
303356
<div class="col">
@@ -317,7 +370,7 @@
317370
</div>
318371
</q-card>
319372
</div>
320-
<div class="col-4">
373+
<div class="col-12 col-sm-4">
321374
<q-card class="stat-card custom_border" flat>
322375
<div class="row items-center stat-item">
323376
<div class="col">
@@ -359,7 +412,7 @@
359412
<div class="row items-center q-px-md q-pt-md q-pb-sm">
360413
<div class="col">
361414
<div class="text-subtitle1 text-weight-medium">Timed Devices</div>
362-
<div class="text-caption text-grey">Manage your bitcoinSwitch devices</div>
415+
<div class="text-caption text-grey gt-xs">Manage your bitcoinSwitch devices</div>
363416
</div>
364417
<div class="col-auto row items-center q-gutter-x-sm">
365418
<q-input
@@ -369,13 +422,13 @@
369422
debounce="300"
370423
placeholder="Search..."
371424
class="search-input"
372-
style="width: 160px;"
425+
style="width: 140px;"
373426
>
374427
<template v-slot:prepend>
375428
<q-icon name="search" size="16px" color="grey-6"></q-icon>
376429
</template>
377430
</q-input>
378-
<q-btn flat round size="sm" @click="exportCSV">
431+
<q-btn flat round size="sm" @click="exportCSV" class="gt-xs">
379432
<q-icon size="18px">
380433
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
381434
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -385,8 +438,8 @@
385438
<q-tooltip>Export CSV</q-tooltip>
386439
</q-btn>
387440
<q-btn unelevated color="primary" size="sm" class="avatar_style" @click="openDeviceDialog()" no-caps>
388-
<q-icon name="add" size="18px" class="q-mr-xs"></q-icon>
389-
New Device
441+
<q-icon name="add" size="18px"></q-icon>
442+
<span class="q-ml-xs gt-xs">New Device</span>
390443
</q-btn>
391444
</div>
392445
</div>
@@ -455,7 +508,7 @@
455508
hide-bottom
456509
>
457510
<template v-slot:body-cell-id="props">
458-
<q-td :props="props">
511+
<q-td :props="props" class="hide-on-mobile">
459512
<div class="row items-center no-wrap">
460513
<code class="text-caption text-grey-7" style="font-size: 0.7rem;">{% raw %}{{ props.row.id.substring(0, 8) }}...{% endraw %}</code>
461514
<q-btn flat dense round size="xs" color="grey-6" class="q-ml-xs" @click="copyText(props.row.id, 'Device ID copied!')">
@@ -597,11 +650,33 @@
597650
<p class="text-body2 text-grey-7 q-mb-sm" style="line-height: 1.5;">
598651
Bring your physical devices to life with Bitcoin Lightning payments.
599652
</p>
600-
<p class="text-caption text-grey-6 q-mb-none" style="line-height: 1.5;">
653+
<p class="text-caption text-grey-6" style="line-height: 1.5;">
601654
DeviceTimer extends the bitcoinSwitch ecosystem with powerful time-based controls.
602655
Set operating hours, enforce cooldown periods, and limit daily usage.
603656
Perfect for animal feeders, arcade machines, vending machines, and any IoT device.
604657
</p>
658+
<q-btn
659+
unelevated
660+
color="orange-8"
661+
text-color="white"
662+
size="sm"
663+
class="full-width avatar_style q-mt-md"
664+
no-caps
665+
href="https://bitcoinswitch.lnbits.com"
666+
target="_blank"
667+
>
668+
<q-icon size="16px" class="q-mr-sm">
669+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
670+
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
671+
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5M12 4v12"/>
672+
</g>
673+
</svg>
674+
</q-icon>
675+
Flash Firmware (Web Flasher)
676+
</q-btn>
677+
<div class="text-center text-caption text-grey-5 q-mt-xs" style="font-size: 0.6rem;">
678+
Requires Chrome or Edge browser
679+
</div>
605680
</q-card-section>
606681

607682
<!-- Features -->
@@ -774,7 +849,7 @@
774849
></q-select>
775850

776851
<div class="row q-col-gutter-sm">
777-
<div class="col-6">
852+
<div class="col-12 col-sm-6">
778853
<q-select
779854
v-model="deviceDialog.data.currency"
780855
:options="currencies"
@@ -783,7 +858,7 @@
783858
label="Currency"
784859
></q-select>
785860
</div>
786-
<div class="col-6">
861+
<div class="col-12 col-sm-6">
787862
<q-select
788863
v-model="deviceDialog.data.timezone"
789864
:options="timezones"

0 commit comments

Comments
 (0)