kiosk

public/userarea/production_line_view2.php

@@ -1426,6 +1426,62 @@ if (!empty($_GET['ajax'])) {
             color: #fff;
             opacity: .95;
         }
+
+        .descr-btn {
+            display: flex;
+            align-items: center;
+            gap: .5rem;
+            width: 100%;
+            min-height: 44px;
+            padding: .55rem .8rem;
+            border: 1px solid #cbd5e1;
+            border-radius: .7rem;
+            background: #f8fafc;
+            color: #334155;
+            font-size: .95rem;
+            font-weight: 600;
+            text-align: left;
+            cursor: pointer;
+        }
+
+        .descr-btn span {
+            flex: 1;
+            min-width: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #334155;
+            font-weight: 600;
+        }
+
+        .descr-cell {
+            grid-column: span 3;
+            min-width: 0;
+        }
+
+        @media (max-width: 700px) {
+            .descr-cell {
+                grid-column: 1 / -1;
+            }
+        }
+
+        .descr-btn .bi-card-text {
+            color: #ea580c;
+            font-size: 1.2rem;
+        }
+
+        #descrText {
+            white-space: pre-wrap;
+            text-align: left;
+            font-size: 1.15rem;
+            line-height: 1.5;
+            background: #f8fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: .8rem;
+            padding: 1rem 1.2rem;
+            max-height: 60vh;
+            overflow-y: auto;
+        }
     </style>
 </head>
 
@@ -2824,6 +2880,17 @@ if (!empty($_GET['ajax'])) {
         $(document).on("click", "#closeMescole", function() {
             $("#mescoleModal").removeClass("active");
         });
+
+        // --- MODALE DESCRIZIONE ---
+        $(document).on("click", ".descr-btn", function(e) {
+            e.stopPropagation();
+            $("#descrTitle").text($(this).attr("data-title") || "Descrizione");
+            $("#descrText").text($(this).attr("data-descr") || "");
+            $("#descrModal").addClass("active");
+        });
+        $(document).on("click", "#closeDescr, #descrModal", function(e) {
+            if (e.target === this) $("#descrModal").removeClass("active");
+        });
     </script>
 
     <!-- MODALE PER PREVIEW IMMAGINE -->
@@ -2864,6 +2931,17 @@ if (!empty($_GET['ajax'])) {
     </div>
 
 
+    <!-- MODALE DESCRIZIONE -->
+    <div id="descrModal" class="custom-modal">
+        <div class="modal-content" style="max-width:760px; width:94%;">
+            <h3 id="descrTitle">Descrizione</h3>
+            <div id="descrText"></div>
+            <div class="modal-buttons">
+                <button class="modal-btn modal-cancel" id="closeDescr">Chiudi</button>
+            </div>
+        </div>
+    </div>
+
     <!-- MODALE MESCOLE -->
     <div id="mescoleModal" class="custom-modal">
         <div class="modal-content" style="max-width:400px;">