Fix problemi header su mobile

Aggiunta design responsive (by Perona)
Cambio tag immagine in compose
2026-05-14 14:52:04 +00:00 · 2026-04-21 09:47:02 +02:00 · 2026-04-21 09:26:38 +02:00 · 2026-04-17 12:42:43 +02:00 · 2026-04-17 12:38:14 +02:00 · 2026-04-17 12:05:10 +02:00
4 changed files with 530 additions and 12 deletions
@@ -1,18 +1,25 @@
 services:
  techstore:
-    image: andrestork/techstore:dev
+    image: andrestork/techstore:latest
    ports:
      - 8069:80
    environment:
-      DB_HOST: mariadb
+      DB_HOST: db
      DB_USERNAME: techstore
      DB_PASSWORD: changeme
      DB_DATABASE: TechStore
-  mariadb:
+    volumes:
+      - ./images:/var/www/html/img
+    restart: unless-stopped
+    depends_on:
+      - db
+  db:
    image: mariadb
-    restart: always
+    restart: unless-stopped
    environment:
      MARIADB_ROOT_PASSWORD: changemeplease
      MARIADB_USER: techstore
      MARIADB_PASSWORD: changeme
-      MARIADB_DATABASE: TechStore
+      MARIADB_DATABASE: TechStore
+    volumes:
+      - ./db:/var/lib/mysql
@@ -1,3 +1,7 @@
+<?php
+session_start();
+include '../db_conf.php';
+?>
 <!DOCTYPE html>
 <html lang="it">
 <head>
@@ -8,9 +12,6 @@
 </head>
 <body>
    <?php
-        session_start();
-        include '../db_conf.php';
-        
        if (!isset($_SESSION['id'])) {
            header('Location: ../login.php');
            exit();
@@ -1,3 +1,7 @@
+<?php
+session_start();
+include '../db_conf.php';
+?>
 <!DOCTYPE html>
 <html lang="it">
 <head>
@@ -8,9 +12,6 @@
 </head>
 <body>
    <?php
-        session_start();
-        include '../db_conf.php';
-        
        if (!isset($_SESSION['id'])) {
            header('Location: ../login.php');
            exit();
@@ -1,5 +1,150 @@
-body{
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.6;
+}
+
+/* Header responsive */
+header {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 10px !important;
+    background-color: #f2f2f2 !important;
+    border-bottom: 1px solid #ddd !important;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+header #logo {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+header #logo img {
+    height: 32px;
+    width: auto;
+}
+
+header > div:last-child {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+header button, header a button {
+    padding: 8px 12px;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+header span {
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: row;
+        align-items: center !important;
+        justify-content: space-between !important;
+        padding: 8px !important;
+        gap: 5px;
+    }
+    
+    header #logo {
+        margin-bottom: 0;
+        flex-shrink: 0;
+    }
+    
+    header > div:last-child {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 3px;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 1;
+    }
+    
+    header button, header a button {
+        padding: 6px 8px;
+        font-size: 11px;
+        flex: 0 1 auto;
+        white-space: nowrap;
+    }
+    
+    header span {
+        font-size: 11px;
+        white-space: nowrap;
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    header {
+        padding: 6px !important;
+        gap: 3px;
+    }
+    
+    header #logo img {
+        height: 28px;
+    }
+    
+    header button, header a button {
+        padding: 5px 6px;
+        font-size: 10px;
+        margin-right: 2px !important;
+    }
+    
+    header span {
+        font-size: 10px;
+        display: none;
+    }
+    
+    .admin-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
+    
+    .product-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 5px;
+        min-width: 70px;
+    }
+    
+    .cart-table {
+        font-size: 10px;
+        display: block;
+        overflow-x: auto;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 5px;
+        min-width: 60px;
+    }
 }
 .products-grid {
    display: grid;
@@ -7,6 +152,22 @@ body{
    gap: 20px;
    padding: 20px;
 }
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+}
 .product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
@@ -599,3 +760,351 @@ form button:hover {
 .btn-reset:hover {
    background-color: #138496;
 }
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Tablet
+   ============================================ */
+
+@media (max-width: 768px) {
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 15px;
+        padding: 15px;
+    }
+    
+    .product-card {
+        padding: 12px;
+    }
+    
+    .product-card h3 {
+        font-size: 16px;
+    }
+    
+    .product-card button {
+        padding: 6px 12px;
+        font-size: 13px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 12px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 8px;
+    }
+    
+    .cart-table button {
+        padding: 4px 8px;
+        font-size: 11px;
+    }
+    
+    .product-table {
+        font-size: 12px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 8px;
+    }
+    
+    .cart-container {
+        padding: 15px;
+        margin: 15px auto;
+    }
+    
+    form {
+        padding: 15px;
+        margin: 30px auto;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+    }
+    
+    .admin-table {
+        font-size: 12px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 8px;
+    }
+    
+    .order-card {
+        padding: 15px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+
+/* ============================================
+   MEDIA QUERIES RESPONSIVE - Mobile
+   ============================================ */
+
+@media (max-width: 480px) {
+    html {
+        font-size: 14px;
+    }
+    
+    .products-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 10px;
+        padding: 10px;
+    }
+    
+    .product-card {
+        padding: 10px;
+    }
+    
+    .product-card h3 {
+        font-size: 14px;
+        margin: 8px 0;
+    }
+    
+    .product-card p {
+        font-size: 12px;
+    }
+    
+    .product-card button {
+        padding: 6px 10px;
+        font-size: 12px;
+        width: 100%;
+    }
+    
+    .cart-table {
+        font-size: 11px;
+    }
+    
+    .cart-table th, .cart-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-table button {
+        padding: 3px 6px;
+        font-size: 10px;
+        width: 100%;
+    }
+    
+    .product-table {
+        font-size: 11px;
+    }
+    
+    .product-table th, .product-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .cart-container {
+        max-width: 100%;
+        padding: 10px;
+        margin: 10px auto;
+    }
+    
+    .cart-container h1 {
+        font-size: 18px;
+    }
+    
+    .clear-cart-btn, .checkout-btn {
+        padding: 8px 12px;
+        font-size: 12px;
+        margin-left: 0;
+        margin-right: 5px;
+        width: 48%;
+        display: inline-block;
+    }
+    
+    .cart-summary {
+        font-size: 14px;
+    }
+    
+    form {
+        max-width: 95%;
+        margin: 20px auto;
+        padding: 12px;
+        width: 95%;
+    }
+    
+    form h2 {
+        font-size: 18px;
+        margin-bottom: 12px;
+    }
+    
+    form label {
+        font-size: 13px;
+        margin-bottom: 4px;
+    }
+    
+    form input[type=\"text\"],
+    form input[type=\"password\"],
+    form input[type=\"email\"],
+    form button {
+        font-size: 14px;
+        padding: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .product-detail {
+        max-width: 95%;
+        margin: 10px auto;
+        padding: 12px;
+    }
+    
+    .product-detail h2 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .add-product-panel {
+        padding: 12px;
+        margin-bottom: 15px;
+    }
+    
+    .add-product-panel h2 {
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .admin-stats-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    
+    .admin-stat-card {
+        padding: 15px;
+    }
+    
+    .admin-stat-card h2 {
+        font-size: 28px;
+        margin-bottom: 8px;
+    }
+    
+    .admin-stat-card p {
+        font-size: 12px;
+    }
+    
+    .admin-table {
+        font-size: 11px;
+    }
+    
+    .admin-table th, .admin-table td {
+        padding: 6px;
+        word-break: break-word;
+    }
+    
+    .btn-delete, .btn-reset {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-card {
+        padding: 12px;
+    }
+    
+    .order-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .order-header h3 {
+        font-size: 14px;
+    }
+    
+    .order-status {
+        padding: 4px 8px;
+        font-size: 10px;
+    }
+    
+    .order-details p {
+        font-size: 12px;
+        margin: 3px 0;
+    }
+    
+    .account-layout {
+        gap: 15px;
+        margin: 15px auto;
+        padding: 0 10px;
+    }
+    
+    .my-sidebar, .my-container {
+        flex: 1 1 100%;
+        padding: 15px;
+    }
+    
+    .my-container h1 {
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+    
+    .my-container p {
+        font-size: 12px;
+        margin-bottom: 8px;
+    }
+    
+    .empty-cart {
+        padding: 25px;
+        font-size: 14px;
+    }
+}
+
+/* Header buttons styling */
+header a button,
+header button {
+    margin-left: 0 !important;
+    margin-right: 5px !important;
+    padding: 8px 12px !important;
+    background-color: #007bff !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease;
+}
+
+header a[href*="logout"] button,
+header a:has(button[style*="#dc3545"]) button {
+    background-color: #dc3545 !important;
+}
+
+header a[href*="login"] button,
+header a:has(button[style*="#28a745"]) button {
+    background-color: #28a745 !important;
+}
+
+header button:hover {
+    opacity: 0.9;
+}
+
+/* Responsive nav adjustments */
+@media (max-width: 768px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 10px !important;
+        font-size: 12px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    header a button,
+    header button {
+        margin-right: 3px !important;
+        padding: 6px 8px !important;
+        font-size: 11px !important;
+    }
+}
Author	SHA1	Message	Date
AndreStork	1836ffe086	Fix problemi header su mobile	2026-04-21 09:47:02 +02:00
AndreStork	2c2d1456d4	Aggiunta design responsive (by Perona)	2026-04-21 09:26:38 +02:00
AndreStork	00176f0424	Cambio tag immagine in compose	2026-04-17 12:42:43 +02:00
AndreStork	65fb68d68e	Aggiustamenti docker compose	2026-04-17 12:38:14 +02:00
AndreStork	65888cc865	Fix problemi sessione Apache	2026-04-17 12:05:10 +02:00