@visns-studio/visns-components 5.14.11 → 5.14.13

package/src/components/generic/StandardModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Popup from 'reactjs-popup';
 import { X } from 'lucide-react';
 import formStyles from '../styles/Form.module.scss';
@@ -33,6 +33,40 @@ const StandardModal = ({
     showHeader = false,
     customStyles = {}
 }) => {
+    // Device detection state
+    const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    
+    // Device detection utility
+    const getDeviceType = () => {
+        const hasTouch = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+        const userAgent = typeof window !== 'undefined' ? navigator.userAgent : '';
+        
+        // Mobile detection: width + user agent + touch
+        const isMobileUA = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        const isMobileWidth = windowWidth <= 768;
+        const isMobile = isMobileUA || (isMobileWidth && hasTouch);
+        
+        // Tablet detection: iPad or Android tablets or medium width with touch
+        const isTabletUA = /iPad|Android(?!.*Mobile)/i.test(userAgent);
+        const isTabletWidth = windowWidth > 768 && windowWidth <= 1024;
+        const isTablet = isTabletUA || (isTabletWidth && hasTouch && !isMobile);
+        
+        return { isMobile, isTablet, isDesktop: !isMobile && !isTablet };
+    };
+    
+    const { isMobile, isTablet } = getDeviceType();
+    
+    // Handle window resize
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        
+        const handleResize = () => {
+            setWindowWidth(window.innerWidth);
+        };
+        
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
     // Apply vertical alignment class if needed
     const getModalClasses = () => {
         let classes = formStyles.modal;
@@ -42,36 +76,52 @@ const StandardModal = ({
         return classes;
     };
 
-    // Get size-based styles for the popup content
+    // Get size-based styles for the popup content with device-aware positioning
     const getContentStyle = () => {
         const baseStyle = {
             ...customStyles.modal
         };
 
-        // Apply size-based styles
+        // Device-specific positioning for virtual keyboard accommodation
+        let positioningStyle = {};
+        if (isMobile || isTablet) {
+            // Position modal higher on mobile/tablet to accommodate virtual keyboard
+            positioningStyle = {
+                top: '5%', // Position higher (5% from top)
+                left: '50%', // Center horizontally
+                transform: 'translateX(-50%)', // Only center horizontally, no vertical transform
+                maxHeight: '85vh', // Limit height to prevent overflow
+                overflowY: 'auto', // Allow scrolling within modal if needed
+                position: 'fixed' // Ensure fixed positioning for proper centering
+            };
+        }
+
+        // Apply size-based styles with device considerations
         switch (size) {
             case 'small':
                 return {
                     ...baseStyle,
-                    width: '400px',
-                    minWidth: '400px',
-                    maxWidth: '600px'
+                    ...positioningStyle,
+                    width: isMobile ? '95vw' : '400px',
+                    minWidth: isMobile ? '300px' : '400px',
+                    maxWidth: isMobile ? '95vw' : '600px'
                 };
             case 'large':
                 return {
                     ...baseStyle,
+                    ...positioningStyle,
                     width: '95vw',
-                    minWidth: '800px',
-                    maxWidth: '1600px'
+                    minWidth: isMobile ? '300px' : '800px',
+                    maxWidth: isMobile ? '95vw' : '1600px'
                 };
             case 'medium':
             default:
-                // Use the same dimensions as modalWide class (original modal sizing)
                 return {
                     ...baseStyle,
-                    width: '90vw',
-                    minWidth: '600px',
-                    maxWidth: '1400px'
+                    ...positioningStyle,
+                    width: isMobile ? '95vw' : '90vw',
+                    minWidth: isMobile ? '300px' : '600px',
+                    maxWidth: isMobile ? '95vw' : '1400px'
                 };
         }
     };

package/src/components/styles/Field.module.scss

@@ -845,66 +845,146 @@ input[type='file']:hover {
 .file-upload-container {
     display: flex;
     flex-direction: column;
-    gap: 0.5em;
+    gap: 1em;
     width: 100%;
+    border: 2px dashed var(--border-color, #ddd);
+    border-radius: var(--br, 8px);
+    padding: 1.5em;
+    background: var(--tertiary-color, #fafafa);
+    transition: all 0.3s ease;
+    position: relative;
 }
 
+/* Removed hover effect on main container */
+
 .file-upload-container input[type='file'] {
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--br);
-    width: auto;
-    background: var(--tertiary-color);
+    position: absolute;
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.file-upload-button-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+    padding: 1em;
+    border: 2px dashed transparent;
+    border-radius: var(--br, 6px);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+/* Removed hover effect on button wrapper */
+
+.file-upload-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.75em 1.5em;
+    background: var(--primary-color, #007bff);
+    color: #ffffff;
+    border: none;
+    border-radius: var(--br, 6px);
+    font-weight: 500;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(var(--primary-color-rgb, 0, 123, 255), 0.2);
+}
+
+.file-upload-button:hover {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.9);
+    color: #ffffff;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+}
+
+.file-upload-help-text {
+    font-size: 0.85em;
+    color: var(--muted-text-color, #6c757d);
+    text-align: center;
+    margin-top: 0.5em;
 }
 
 .file-list {
     width: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: var(--br);
-    background: var(--tertiary-color);
-    max-height: 200px;
+    background: transparent;
+    max-height: 220px;
     overflow-y: auto;
-    padding: 0.5em;
+    padding: 0;
+    margin-top: 0.75em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
 }
 
 .file-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75em 1em;
-    border-bottom: 1px solid var(--border-color);
-    font-size: 0.9rem;
-    background: white;
-    border-radius: 5px;
-    transition: background 0.3s;
-    margin-bottom: 5px;
+    padding: 0.5em 0.75em;
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e0e6ed);
+    border-radius: var(--br, 6px);
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    min-height: 36px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    position: relative;
+    overflow: hidden;
 }
 
-.file-list li:last-child {
-    border-bottom: none;
+.file-list li:hover {
+    border-color: var(--primary-color, #007bff);
+    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    transform: translateY(-1px);
 }
 
-.file-list li:hover {
-    background: rgba(var(--paragraph-color-rgb), 0.1);
+.file-list li:hover .file-icon {
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    border-color: rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+    transform: scale(1.05);
+}
+
+.file-list li:hover .file-image-preview {
+    transform: scale(1.05);
+}
+
+.file-list li:hover .file-name {
+    color: var(--primary-color, #007bff);
 }
 
 .trash-button {
-    background: transparent;
-    border: none;
+    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.08);
+    border: 1px solid rgba(var(--danger-color-rgb, 220, 53, 69), 0.2);
     cursor: pointer;
-    color: var(--primary-color);
+    color: var(--danger-color, #dc3545);
     display: flex;
     align-items: center;
-    transition: color 0.3s;
+    justify-content: center;
+    padding: 0.35em;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    min-width: 28px;
+    height: 28px;
+    flex-shrink: 0;
 }
 
 .trash-button:hover {
-    color: var(--secondary-color);
+    background: var(--danger-color, #dc3545);
+    color: var(--secondary-color, #fff);
+    border-color: var(--danger-color, #dc3545);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(var(--danger-color-rgb, 220, 53, 69), 0.3);
 }
 
 .trash-button svg {
-    width: 1.2em;
-    height: 1.2em;
+    width: 0.9em;
+    height: 0.9em;
 }
 
 /* Enhanced File Upload Styling */
@@ -1034,15 +1114,16 @@ input[type='file']:hover {
 .file-list-item-image {
     display: flex;
     align-items: center;
-    gap: 0.75em;
-    padding: 0.75em 1em;
-    border-bottom: 1px solid var(--border-color, #e9ecef);
-    font-size: 0.9rem;
-    background: var(--item-color, #fff);
-    border-radius: var(--br, 6px);
-    transition: all 0.3s ease;
-    margin-bottom: 0.5em;
+    gap: 0.5em;
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid rgba(var(--border-color-rgb, 224, 230, 237), 0.3);
+    font-size: 0.85rem;
+    background: transparent;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    margin-bottom: 0.25em;
     border: 1px solid transparent;
+    min-height: 36px;
 }
 
 .file-list-item-image {
@@ -1063,23 +1144,37 @@ input[type='file']:hover {
     border-color: var(--success-color, #28a745);
 }
 
+/* Enhanced image file styling */
+.file-list-item-image .file-icon,
+.file-list-item-image .file-image-preview {
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.12) !important;
+    border-color: rgba(var(--success-color-rgb, 40, 167, 69), 0.3) !important;
+}
+
 .file-icon {
-    font-size: 1.5em;
+    font-size: 1.1em;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2em;
-    height: 2em;
+    width: 1.8em;
+    height: 1.8em;
     flex-shrink: 0;
+    background: rgba(var(--primary-color-rgb, 0, 123, 255), 0.08);
+    border-radius: 4px;
+    border: 1px solid rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
+    transition: all 0.2s ease;
 }
 
 .file-name {
     flex: 1;
-    color: var(--paragraph-color, #495057);
+    color: var(--paragraph-color, #2c3e50);
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-left: 0.75em;
+    font-size: 0.85em;
+    line-height: 1.3;
 }
 
 /* Image Preview Styling */
@@ -1123,21 +1218,22 @@ input[type='file']:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 3em;
-    height: 3em;
+    width: 1.8em;
+    height: 1.8em;
     flex-shrink: 0;
-    background: rgba(var(--item-color-rgb, 255, 255, 255), 0.9);
-    border: 1px solid var(--border-color, #e9ecef);
-    border-radius: var(--br, 4px);
+    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.08);
+    border: 1px solid rgba(var(--success-color-rgb, 40, 167, 69), 0.2);
+    border-radius: 4px;
     overflow: hidden;
+    transition: all 0.2s ease;
 }
 
 .file-thumbnail {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: var(--br, 4px);
-    transition: transform 0.3s ease;
+    border-radius: 3px;
+    transition: transform 0.2s ease;
 }
 
 .file-thumbnail:hover {