Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-05-15 07:32:23 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile: grid + layout reflow (Commit 2/4)

Browse source 
- Dashboard stats row (.dash-stats-row): flex column on mobile
- Content-library toolbar: stack upload area + remote URL + YouTube boxes vertically
- Info grid: 1 col on mobile (was 2 col); device detail metadata reads cleaner
- Content grid: drop to 1 col below 480px (iPhone SE)
- Schedule controls: wrap, device select fills row
- Schedule calendar: already wrapped in overflow-x:auto, kept horizontal-scroll
  approach (future: dedicated mobile day-view)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ScreenTinker 2026-04-21 15:50:56 -05:00
parent 09dbb4b199
commit 7c8504d593
4 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/css/main.css
View file

@ -920,10 +920,29 @@ body {
.page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.device-grid { grid-template-columns: 1fr; }
.content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.info-grid { grid-template-columns: 1fr 1fr; }
.info-grid { grid-template-columns: 1fr; }
.remote-container { flex-direction: column; }
.remote-controls { width: 100%; flex-direction: row; flex-wrap: wrap; }
.modal { width: 95vw; max-height: 90vh; overflow-y: auto; }
.tabs { overflow-x: auto; }
.tab { white-space: nowrap; }
/* Dashboard stats stack to single column */
.dash-stats-row { flex-direction: column; }
.dash-stats-row .info-card { flex: none; }
/* Content-library 3-up toolbar stacks vertically */
.content-toolbar { flex-direction: column; }
.content-toolbar > div[style*="width:320px"] { width: auto !important; }
/* Schedule controls: allow wrap and widen select to full row */
.schedule-controls { gap: 8px; }
.schedule-controls > select { flex: 1 1 100%; }
.schedule-controls > button,
.schedule-controls > span { flex: 0 1 auto; }
}
@media (max-width: 480px) {
.content-grid { grid-template-columns: 1fr; }
.assign-content-grid { grid-template-columns: 1fr 1fr; }
}

2
frontend/js/views/content-library.js
View file

@ -19,7 +19,7 @@ export function render(container) {
</div>
</div>
<div style="display:flex;gap:16px;margin-bottom:24px">
<div class="content-toolbar" style="display:flex;gap:16px;margin-bottom:24px">
<div class="upload-area" id="uploadArea" style="flex:1;margin-bottom:0">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>

2
frontend/js/views/dashboard.js
View file

@ -167,7 +167,7 @@ export function render(container) {
</button>
</div>
</div>
<div id="dashStats" style="display:flex;gap:12px;margin-bottom:16px"></div>
<div id="dashStats" class="dash-stats-row" style="display:flex;gap:12px;margin-bottom:16px"></div>
<div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
<input type="text" id="deviceSearch" class="input" placeholder="Search displays..." style="max-width:300px">
<select id="deviceFilter" class="input" style="width:140px;background:var(--bg-input)">

4
frontend/js/views/schedule.js
View file

@ -28,8 +28,8 @@ export async function render(container) {
<div class="page-header">
<div><h1>Schedule <span class="help-tip" data-tip="Visual weekly calendar for content scheduling. Click Add Schedule to create time slots. Set recurrence for repeating content. Higher priority overrides lower. Device-level schedules override group-level.">?</span></h1><div class="subtitle">Content scheduling calendar</div></div>
</div>
<div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
<select id="schedDevice" class="input" style="width:200px;background:var(--bg-input)">
<div class="schedule-controls" style="display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
<select id="schedDevice" class="input" style="width:200px;max-width:100%;background:var(--bg-input)">
${devices.map(d => `<option value="${esc(d.id)}">${esc(d.name)}</option>`).join('')}
</select>
<button class="btn btn-secondary btn-sm" id="prevWeek">&lt; Prev</button>