mobile view
This commit is contained in:
parent
c387b71cae
commit
d3ee9a3790
@ -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; }
|
||||
.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 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>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 id="subjectsTbody">
|
||||
<?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 id="subjectsList">
|
||||
<!-- MOBILE: Cards (< md) -->
|
||||
<div class="d-md-none">
|
||||
<?php foreach ($subjects as $s): ?>
|
||||
<div class="subject-card"
|
||||
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'] ?>">
|
||||
<div class="sc-header">
|
||||
<span class="sc-swatch" style="background: <?= htmlspecialchars($s['color'], ENT_QUOTES, 'UTF-8') ?>"></span>
|
||||
<span class="sc-name"><?= htmlspecialchars($s['name'], ENT_QUOTES, 'UTF-8') ?></span>
|
||||
</div>
|
||||
<div class="sc-stats">
|
||||
<span>Scadenze: <strong><?= (int)$s['deadline_count'] ?></strong></span>
|
||||
<span>Aperte: <strong><?= (int)$s['open_count'] ?></strong></span>
|
||||
</div>
|
||||
<div class="sc-actions">
|
||||
<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>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- DESKTOP: Table (>= md) -->
|
||||
<div class="d-none d-md-block">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@ -225,13 +289,13 @@ $subjects = $pdo->query("
|
||||
|
||||
$('#btnAddSubject').on('click', () => openModal(null));
|
||||
|
||||
$('#subjectsTbody').on('click', '.btn-edit', function () {
|
||||
const $tr = $(this).closest('tr');
|
||||
$('#subjectsList').on('click', '.btn-edit', function () {
|
||||
const $tr = $(this).closest('[data-id]');
|
||||
openModal({ id: $tr.data('id'), name: $tr.data('name'), color: $tr.data('color') });
|
||||
});
|
||||
|
||||
$('#subjectsTbody').on('click', '.btn-delete', function () {
|
||||
const $tr = $(this).closest('tr');
|
||||
$('#subjectsList').on('click', '.btn-delete', function () {
|
||||
const $tr = $(this).closest('[data-id]');
|
||||
const inUse = parseInt($tr.data('in-use') || 0, 10);
|
||||
const name = $tr.data('name');
|
||||
if (inUse > 0) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user