changes for UI

content_quality_tool_public/static/css/attr-extraction.css

@@ -68,7 +68,7 @@ button:hover { transform: translateY(-1px); border-color: #cbd5e1; }
 
 /* Cards layout */
 .list { display: grid; gap: 12px; }
-.product { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; }
+.product { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; }
 .product:hover { border-color: var(--row-hover); }
 .product.selected { outline: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
 
@@ -217,59 +217,62 @@ td.thumb-cell { width: 60px; }
   color: #666;
 }
 /* 
-
-/* Container for the attribute selection */
+/* General layout */
 .attribute-selectors {
-    padding: 10px 0;
-    border-top: 1px dashed #ddd;
-    margin-top: 10px;
-    transition: opacity 0.3s ease;
-
-    display: flex;
-    text-align: center;
-    width: -webkit-fill-available;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: space-around;
-    justify-content: space-around;
-    align-items: baseline;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    max-width: none;
+    margin: 5px auto;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    width: max-content;
+}
+
+/* Section titles */
+.mandatory-title,
+.optional-title {
+    font-size: 1.2em;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 10px;
+    padding-left: 5px;
+    border-left: 4px solid #007BFF;
 }
 
-.attribute-selectors.disabled {
-    opacity: 0.5;
-    pointer-events: none; /* Disable interaction */
+/* Attribute group block */
+.attribute-chip-group {
+    margin-bottom: 25px;
 }
 
-/* Header for the attribute group */
+/* Attribute headers */
 .attribute-header {
-    font-weight: bold;
-    margin: 10px 0 5px 0;
-    font-size: 0.9em;
-    color: #333;
+    font-size: 1em;
+    font-weight: 500;
+    color: #555;
+    margin-bottom: 10px;
 }
 
-/* Container for the individual chips */
+/* Chips container layout */
 .chips-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px; /* Space between chips */
-    margin-bottom: 10px;
-    justify-content: center;
+    gap: 10px;
 }
 
-/* The label/chip itself */
+/* Individual chip */
 .attribute-chip {
     display: inline-flex;
     align-items: center;
-    padding: 4px 10px;
+    background-color: #f0f4f8;
     border: 1px solid #ccc;
-    border-radius: 20px; 
+    border-radius: 20px;
+    padding: 8px 14px;
     cursor: pointer;
-    background-color: #f8f8f8;
-    transition: all 0.2s ease;
-    font-size: 0.85em;
-    color: #555;
-    user-select: none; /* Prevent text selection */
+    transition: background-color 0.2s, box-shadow 0.2s;
+    user-select: none;
+    font-size: 0.95em;
 }
 
 /* Hide the native checkbox */
@@ -277,115 +280,40 @@ td.thumb-cell { width: 60px; }
     display: none;
 }
 
-/* Style when the chip is checked (selected) */
-.attribute-chip input[type="checkbox"]:checked + span {
-    background-color: #007bff; /* Primary color */
-    color: white;
-    border-color: #007bff;
-    padding: 4px 10px; /* Ensure padding remains after hiding checkbox */
-    border-radius: 20px;
-}
-
-/* Style the visible span part */
+/* Style span inside chip */
 .attribute-chip span {
-    display: block;
-    line-height: 1;
-}
-
-/* Hover effect */
-.attribute-chip:hover {
-    background-color: #eee;
-}
-
-/* Style for when the checkbox is checked, applied to the parent label/chip */
-.attribute-chip input[type="checkbox"]:checked + span {
-    background-color: #007bff;
-    color: white;
-    font-weight: 500;
-} */
-
-/* Container for all attribute groups, adding padding at the bottom for separation */
-.attribute-selectors {
-    padding: 10px 0 20px 0; /* More padding at bottom */
-    border-top: 1px dashed #ddd;
-    margin-top: 10px;
-}
-
-/* Style for the individual attribute group block */
-.attribute-chip-group {
-    margin-bottom: 15px; /* Add space between groups */
-    padding: 8px 0;
-    border-bottom: 1px dotted #eee; /* Light divider between groups */
-}
-
-/* Style for the attribute name header */
-.attribute-header {
-    font-weight: 600; /* Slightly bolder */
-    margin: 0 0 5px 0;
-    font-size: 0.95em;
     color: #333;
-    /* Optional: Use a slightly different color or background for better distinction */
-    /* background-color: #f7f7f7; */
-    /* padding: 3px 0; */
 }
 
-/* Container for the individual chips - ensure consistent wrapping */
-.chips-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px; /* Slightly more space between chips */
-}
-
-/* The visual chip style for better clarity */
-.attribute-chip {
-    padding: 6px 12px; /* Increased padding */
-    border: 1px solid #c9c9c9;
-    border-radius: 4px; /* Slightly squarer, more modern look */
-    background-color: #fcfcfc;
-    font-size: 0.8em;
-    color: #444;
+/* Highlight chip when selected */
+.attribute-chip input[type="checkbox"]:checked + span {
+    font-weight: 600;
+    color: #007BFF;
 }
 
-/* Style when selected */
-.attribute-chip input[type="checkbox"]:checked + span {
-    background-color: #28a745; /* Using a distinct "selected" color (e.g., green) */
-    color: white;
-    border-color: #28a745;
+/* Add visual feedback for selected chips */
+.attribute-chip input[type="checkbox"]:checked + span::before {
+    content: "✔ ";
+    color: #007BFF;
+    margin-right: 4px;
 }
 
 /* Hover effect */
 .attribute-chip:hover {
-    background-color: #efefef;
-    border-color: #aaa;
+    background-color: #e6f0ff;
+    border-color: #007BFF;
+    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
 }
 
-/* Add separation and a strong visual break before the Optional section starts */
-.attribute-chip-group.first-optional-group {
-    /* Push it down from the last mandatory group */
-    margin-top: 15px;
-    
-    /* Stronger visual separator than the dotted line used for groups */
-    border-top: 2px solid #ddd; 
-    padding-top: 15px; /* Add space between the border and the header */
-}
-
-/* Refined Spacing for the main attribute container */
-.attribute-selectors {
-    /* Increase padding to ensure groups don't touch the top/bottom border */
-    padding: 15px 0 20px 0; 
-    border-top: 1px dashed #ccc;
-    margin-top: 10px;
-}
+/* Responsive */
+@media (max-width: 600px) {
+    .chips-container {
+        flex-direction: column;
+        gap: 8px;
+    }
 
-/* Ensure good spacing between individual attribute groups */
-.attribute-chip-group {
-    margin-bottom: 12px; 
-    /* Remove the dotted bottom border if you use the new separator above */
-    border-bottom: none; 
+    .attribute-chip {
+        width: 100%;
+        justify-content: center;
+    }
 }
-
-.pSelectRight {
-    padding-left: 50px !important;
-    /* text-align: center; */
-    /* width: 195px; */
-}

content_quality_tool_public/static/js/attr-extraction.js

@@ -277,7 +277,7 @@ function createProductCard(p) {
     inline.dataset.pid = p.item_id; // use item_id for mapping
 
     row.appendChild(left); row.appendChild(mid);
-    
+        row.appendChild(attrContainer); // Append the new attribute selectors container
     row.appendChild(right);
     // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) { 
       // const hr = el('hr');
@@ -285,7 +285,7 @@ function createProductCard(p) {
       // row.appendChild(attri);
       // row.appendChild(secondRight);
     // }
-    row.appendChild(attrContainer); // Append the new attribute selectors container
+
     row.appendChild(inline);
     
     return row;