solocla/zibo-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile view

Browse Source
This commit is contained in:
r.mubarakzyanov
2026-04-18 17:28:49 +03:00
parent c387b71cae
commit d3ee9a3790
1 changed files with 104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/scadenzario/subjects/index.php
+104 -40
View File
@@ -55,6 +55,37 @@ $subjects = $pdo->query("
.color-swatch { width: 28px; height: 28px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0,0,0,0.08); vertical-align: middle; } .color-swatch { width: 28px; height: 28px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0,0,0,0.08); vertical-align: middle; }
.subject-row { border-left: 4px solid var(--row-color, #e9ecef); } .subject-row { border-left: 4px solid var(--row-color, #e9ecef); }
/* Mobile cards */
.subject-card {
background: #fff;
border: 1px solid var(--scad-card-border);
border-left: 5px solid var(--row-color, #e9ecef);
border-radius: 0.6rem;
padding: 0.85rem 0.95rem;
margin-bottom: 0.6rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.subject-card .sc-header {
display: flex; align-items: center; gap: 0.6rem;
margin-bottom: 0.5rem;
}
.subject-card .sc-swatch {
width: 22px; height: 22px; border-radius: 5px;
border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0;
}
.subject-card .sc-name {
font-weight: 700; color: var(--scad-heading);
font-size: 0.95rem; flex: 1; word-break: break-word;
}
.subject-card .sc-stats {
display: flex; gap: 0.75rem; font-size: 0.8rem; color: #6c757d;
margin-bottom: 0.6rem;
}
.subject-card .sc-stats strong { color: var(--scad-heading); }
.subject-card .sc-actions {
display: flex; gap: 0.4rem; justify-content: flex-end;
}
.empty-state { text-align: center; padding: 3rem 1rem; color: #6c757d; } .empty-state { text-align: center; padding: 3rem 1rem; color: #6c757d; }
.empty-state i { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; } .empty-state i { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; }
@@ -104,42 +135,75 @@ $subjects = $pdo->query("
<p>Nessun argomento definito.<br>Clicca <strong>"Nuovo Argomento"</strong> per aggiungere il primo.</p> <p>Nessun argomento definito.<br>Clicca <strong>"Nuovo Argomento"</strong> per aggiungere il primo.</p>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="table-responsive"> <div id="subjectsList">
<table class="table table-hover align-middle mb-0"> <!-- MOBILE: Cards (< md) -->
<thead> <div class="d-md-none">
<tr> <?php foreach ($subjects as $s): ?>
<th style="width:60px">Colore</th> <div class="subject-card"
<th>Nome</th> style="--row-color: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"
<th class="text-center" style="width:120px">Scadenze</th> data-id="<?= (int)$s['id'] ?>"
<th class="text-center" style="width:120px">Aperte</th> data-name="<?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?>"
<th class="text-center" style="width:180px">Azioni</th> data-color="<?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"
</tr> data-in-use="<?= (int)$s['deadline_count'] ?>">
</thead> <div class="sc-header">
<tbody id="subjectsTbody"> <span class="sc-swatch" style="background: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"></span>
<?php foreach ($subjects as $s): ?> <span class="sc-name"><?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?></span>
<tr class="subject-row" </div>
style="--row-color: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>" <div class="sc-stats">
data-id="<?= (int)$s['id'] ?>" <span>Scadenze: <strong><?= (int)$s['deadline_count'] ?></strong></span>
data-name="<?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?>" <span>Aperte: <strong><?= (int)$s['open_count'] ?></strong></span>
data-color="<?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>" </div>
data-in-use="<?= (int)$s['deadline_count'] ?>"> <div class="sc-actions">
<td><span class="color-swatch" style="background: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"></span></td> <a href="scadenzario/index.php?subject_id=<?= (int)$s['id'] ?>" class="btn-action btn-action-history" title="Storico scadenze">
<td class="fw-semibold" style="color:var(--scad-heading)"><?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?></td> <i class="fa-solid fa-clock-rotate-left"></i>
<td class="text-center"><?= (int)$s['deadline_count'] ?></td> </a>
<td class="text-center"><?= (int)$s['open_count'] ?></td> <button class="btn-action btn-action-edit btn-edit" title="Modifica"><i class="fa-solid fa-pen"></i></button>
<td class="text-center"> <button class="btn-action btn-action-delete btn-delete" title="Elimina"><i class="fa-solid fa-trash"></i></button>
<div class="d-inline-flex gap-1"> </div>
<a href="scadenzario/index.php?subject_id=<?= (int)$s['id'] ?>" class="btn-action btn-action-history" title="Storico scadenze"> </div>
<i class="fa-solid fa-clock-rotate-left"></i> <?php endforeach; ?>
</a> </div>
<button class="btn-action btn-action-edit btn-edit" title="Modifica"><i class="fa-solid fa-pen"></i></button>
<button class="btn-action btn-action-delete btn-delete" title="Elimina"><i class="fa-solid fa-trash"></i></button> <!-- DESKTOP: Table (>= md) -->
</div> <div class="d-none d-md-block">
</td> <div class="table-responsive">
</tr> <table class="table table-hover align-middle mb-0">
<?php endforeach; ?> <thead>
</tbody> <tr>
</table> <th style="width:60px">Colore</th>
<th>Nome</th>
<th class="text-center" style="width:120px">Scadenze</th>
<th class="text-center" style="width:120px">Aperte</th>
<th class="text-center" style="width:180px">Azioni</th>
</tr>
</thead>
<tbody>
<?php foreach ($subjects as $s): ?>
<tr class="subject-row"
style="--row-color: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"
data-id="<?= (int)$s['id'] ?>"
data-name="<?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?>"
data-color="<?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"
data-in-use="<?= (int)$s['deadline_count'] ?>">
<td><span class="color-swatch" style="background: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"></span></td>
<td class="fw-semibold" style="color:var(--scad-heading)"><?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?></td>
<td class="text-center"><?= (int)$s['deadline_count'] ?></td>
<td class="text-center"><?= (int)$s['open_count'] ?></td>
<td class="text-center">
<div class="d-inline-flex gap-1">
<a href="scadenzario/index.php?subject_id=<?= (int)$s['id'] ?>" class="btn-action btn-action-history" title="Storico scadenze">
<i class="fa-solid fa-clock-rotate-left"></i>
</a>
<button class="btn-action btn-action-edit btn-edit" title="Modifica"><i class="fa-solid fa-pen"></i></button>
<button class="btn-action btn-action-delete btn-delete" title="Elimina"><i class="fa-solid fa-trash"></i></button>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
@@ -225,13 +289,13 @@ $subjects = $pdo->query("
$('#btnAddSubject').on('click', () => openModal(null)); $('#btnAddSubject').on('click', () => openModal(null));
$('#subjectsTbody').on('click', '.btn-edit', function () { $('#subjectsList').on('click', '.btn-edit', function () {
const $tr = $(this).closest('tr'); const $tr = $(this).closest('[data-id]');
openModal({ id: $tr.data('id'), name: $tr.data('name'), color: $tr.data('color') }); openModal({ id: $tr.data('id'), name: $tr.data('name'), color: $tr.data('color') });
}); });
$('#subjectsTbody').on('click', '.btn-delete', function () { $('#subjectsList').on('click', '.btn-delete', function () {
const $tr = $(this).closest('tr'); const $tr = $(this).closest('[data-id]');
const inUse = parseInt($tr.data('in-use') || 0, 10); const inUse = parseInt($tr.data('in-use') || 0, 10);
const name = $tr.data('name'); const name = $tr.data('name');
if (inUse > 0) { if (inUse > 0) {