@visns-studio/visns-components 5.6.6 → 5.6.8

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -285,76 +285,129 @@
 
 .dropzone__files {
     list-style: none;
-    padding: 0;
+    padding: 16px 0;
     margin: 0;
     box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
+    gap: 16px;
+
+    /* Responsive grid layout */
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(1, 1fr); /* 1 column on small screens */
+    }
 
     li {
-        width: 100%;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         background: rgba(var(--primary-rgb), 0.05);
         color: var(--primary-color);
-        border-radius: 3px;
-        transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-        outline: none;
+        border-radius: 6px;
+        transition: all 0.2s ease;
         cursor: pointer;
-        border-radius: 3px;
-        padding: 0.5rem;
+        padding: 12px 16px;
         box-sizing: border-box;
         position: relative;
         border: 1px solid rgba(var(--primary-rgb), 0.15);
-        line-height: 1;
-        font-size: 0.85rem;
-        margin-bottom: 5px;
+        line-height: 1.4;
+        font-size: 0.9rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            background: rgba(var(--primary-rgb), 0.08);
+        }
 
-        svg {
-            position: relative;
-            top: -2px;
-            color: rgba(var(--secondary-rgb), 1);
-            float: left;
-            stroke-width: 1;
-            line-height: 1;
-            margin-right: 5px;
+        .file-info {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            overflow: hidden;
+
+            svg {
+                color: var(--secondary-color);
+                flex-shrink: 0;
+                margin-right: 12px;
+            }
+
+            .filename {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
         button {
-            position: relative;
-            float: right;
             background: none;
             outline: none;
             border: none;
-            z-index: 200;
+            padding: 6px;
+            margin-left: 8px;
+            border-radius: 4px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+                background-color: rgba(var(--primary-rgb), 0.1);
+            }
 
             svg {
-                font-size: 1em;
                 color: var(--primary-color);
-                line-height: 1;
             }
         }
     }
-
-    li:hover {
-        background: rgba(var(--secondary-color-rgb, 0.65));
-    }
 }
 
 .sortlist {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
+    gap: 16px;
+    padding: 16px 0;
     list-style: none;
 
+    /* Responsive grid layout */
+    @media (max-width: 1200px) {
+        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(2, 1fr); /* 2 columns on small screens */
+    }
+
+    @media (max-width: 480px) {
+        grid-template-columns: repeat(
+            1,
+            1fr
+        ); /* 1 column on very small screens */
+    }
+
     li {
         position: relative;
+        aspect-ratio: 4/3;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        cursor: pointer;
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
 
         .sortimg {
-            width: 300px;
-            height: 300px;
+            width: 100%;
+            height: 100%;
             border-radius: 8px;
             overflow: hidden;
             position: relative;
+            display: flex;
+            flex-direction: column;
 
             img {
                 width: 100%;
@@ -376,6 +429,21 @@
                     background: rgba(255, 255, 255, 1);
                 }
             }
+
+            .filename {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 8px;
+                background-color: rgba(0, 0, 0, 0.6);
+                color: white;
+                font-size: 0.8rem;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                z-index: 1;
+            }
         }
     }
 }

package/src/components/crm/generic/styles/GenericMain.module.scss

@@ -1,7 +1,7 @@
 .header {
     background: var(--primary-color);
     color: var(--primary-color);
-    position: relative;
+    position: sticky;
     top: 0;
     width: 100%;
     z-index: 995;
@@ -11,7 +11,7 @@
 .headerAlternate {
     background: var(--bg-color);
     color: var(--paragraph-color);
-    position: relative;
+    position: sticky;
     top: 0;
     width: 100%;
     z-index: 995;

package/src/components/crm/styles/DataGrid.module.scss

@@ -596,7 +596,22 @@
 
 /* DataGrid top container and search container styles */
 .dataGridTopContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 8px;
+    padding: 0 5px;
+}
+
+.dataGridTopLeftContainer {
+    flex: 1;
+}
+
+.dataGridTopRightContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
 }
 
 .searchContainer {
@@ -651,12 +666,44 @@
     justify-content: flex-end;
 }
 
+/* Auto-refresh controls */
+.autoRefreshContainer {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 15px;
+    height: 38px;
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: var(--br, 4px);
+    margin-left: 10px;
+    margin-bottom: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.autoRefreshLabel {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+    color: var(--secondary-color, #1f2937);
+    white-space: nowrap;
+    cursor: pointer;
+    font-weight: normal;
+}
+
+.autoRefreshCheckbox {
+    margin: 0;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+}
+
 /* Container for when only the action button is shown (search disabled) */
 .actionButtonsContainer {
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    margin-bottom: 8px; /* Reduced spacing to match when searchbar is present */
+    margin-bottom: 0; /* No bottom margin to align with auto-refresh */
 }
 
 .actionButtons {

package/src/components/crm/styles/Navigation.module.scss

@@ -618,6 +618,9 @@
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* IE and Edge */
+        position: sticky;
+        top: 0;
+        z-index: 995;
 
         /* Hide scrollbar for Chrome/Safari/Opera */
         &::-webkit-scrollbar {
@@ -805,6 +808,12 @@
 
     .content {
         margin-left: 0;
+
+        .content-header {
+            position: sticky;
+            top: 0;
+            z-index: 995;
+        }
     }
 
     .popup-content {