From d3ee9a379075e0d61a1f8731b51090f44af2e904 Mon Sep 17 00:00:00 2001
From: "r.mubarakzyanov" <rusa959@gmail.com>
Date: Sat, 18 Apr 2026 17:28:49 +0300
Subject: [PATCH] mobile view

---
 .../userarea/scadenzario/subjects/index.php   | 144 +++++++++++++-----
 1 file changed, 104 insertions(+), 40 deletions(-)

diff --git a/public/userarea/scadenzario/subjects/index.php b/public/userarea/scadenzario/subjects/index.php
index 9baf598..d31b6a1 100644
--- a/public/userarea/scadenzario/subjects/index.php
+++ b/public/userarea/scadenzario/subjects/index.php
@@ -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) {