Moved styling elements in eveai_ordered_list_editor.html to eveai.css for consistency

nginx/static/assets/css/eveai.css

@@ -8,7 +8,7 @@
   --bs-danger: #9c2d66;
 }
 
-/* Overriding the background gradient and text colors */
+/* Overriding the background gradient and text colors ------------------------------------------ */
 .bg-gradient-success {
     background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
 }
@@ -44,7 +44,7 @@
     font-weight: 700; /* Retain bold text */
 }
 
-/* Navbar customization */
+/* Navbar customization ------------------------------------------------------------------------ */
 .navbar-light .navbar-brand {
     color: var(--bs-primary) !important; /* Primary color for the brand text */
 }
@@ -114,7 +114,7 @@
     color: var(--bs-white) !important;
 }
 
-/* Page header customization */
+/* Page header customization ------------------------------------------------------------------- */
 .page-header {
     background-size: cover;
     background-position: center;
@@ -148,7 +148,7 @@
     margin-top: -5rem; /* Adjust margin to improve vertical alignment */
 }
 
-/* Card and table customization */
+/* Card and table customization ---------------------------------------------------------------- */
 .card {
     border: 1px solid var(--bs-secondary) !important; /* Secondary color for the card border */
     border-radius: 0.5rem; /* Keeps the border-radius consistent */
@@ -258,7 +258,6 @@ input[type="radio"] {
 .pagination {
     display: flex;
     justify-content: center;
-    padding-left: 0;
     list-style: none;
     border-radius: 0.375rem;
     margin-left: 0 !important;
@@ -314,7 +313,7 @@ input[type="radio"] {
     text-align: center !important;
 }
 
-/* Form and Input Fields */
+/* Form and Input Fields ----------------------------------------------------------------------- */
 .form-group label.form-label {
     color: var(--bs-secondary) !important; /* Secondary color for labels */
     font-weight: 500; /* Slightly bolder labels */
@@ -353,7 +352,7 @@ input[type="radio"] {
     color: var(--bs-body-color) !important; /* Consistent text color for check labels */
 }
 
-/* Tabs Navigation */
+/* Tabs Navigation ----------------------------------------------------------------------------- */
 .nav-pills .nav-link {
     color: var(--bs-primary) !important; /* Primary color for inactive tab text */
     border-radius: 0.375rem !important; /* Rounded corners for tabs */
@@ -370,7 +369,7 @@ input[type="radio"] {
     color: var(--bs-white) !important; /* White text on hover */
 }
 
-/* Tabs Content */
+/* Tabs Content -------------------------------------------------------------------------------- */
 .tab-pane {
     padding-top: 1rem; /* Consistent padding inside tabs */
 }
@@ -379,7 +378,7 @@ input[type="radio"] {
     background-color: var(--bs-primary) !important; /* Primary color for the moving tab indicator */
 }
 
-/* Buttons */
+/* Buttons ------------------------------------------------------------------------------------- */
 
 .btn-primary:hover {
     background-color: var(--bs-secondary) !important;
@@ -436,7 +435,7 @@ input[type="radio"] {
   box-shadow: none;
 }
 
-/* Custom styles for chat session view */
+/* Custom styles for chat session view --------------------------------------------------------- */
 .accordion-button:not(.collapsed) {
     background-color: var(--bs-primary);
     color: var(--bs-white);
@@ -489,7 +488,7 @@ input[type="radio"] {
     background-color: var(--bs-light);
 }
 
-/* Markdown content styles */
+/* Markdown content styles --------------------------------------------------------------------- */
 .markdown-content {
     font-size: 1rem;
     line-height: 1.5;
@@ -533,7 +532,7 @@ input[type="radio"] {
     display: none !important;
 }
 
-/* Ensure the original select is visible and styled */
+/* Ensure the original select is visible and styled -------------------------------------------- */
 select.select2 {
     display: block !important;
     width: 100% !important;
@@ -554,7 +553,7 @@ select.select2[multiple] {
     height: auto !important;
 }
 
-/* REQUIRED FIELD SETTINGS ---------------------------------------------------- */
+/* REQUIRED FIELD SETTINGS --------------------------------------------------------------------- */
 /* Required field indicator styling */
 .field-label-wrapper {
     display: flex;
@@ -614,7 +613,7 @@ select.select2[multiple] {
     border: 0;
 }
 
-/* TAB ERROR STYLES ----------------------------------------------------------- */
+/* TAB ERROR STYLES ---------------------------------------------------------------------------- */
 /* Style for tabs with errors */
 .nav-link.has-error {
     position: relative;
@@ -704,7 +703,7 @@ select.select2[multiple] {
     font-size: 1.1rem;
 }
 
-/* JSON Editor Styling - EveAI Aanpassingen */
+/* JSON Editor Styling - EveAI Aanpassingen ---------------------------------------------------- */
 :root {
   /* Hoofdkleuren gebaseerd op EveAI kleurenschema */
   --jse-theme-color: var(--bs-primary); /* Paars als hoofdkleur */
@@ -813,4 +812,369 @@ select.select2[multiple] {
   line-height: 1.5;
 }
 
+/* Tabulator styling / ordered_list ------------------------------------------------------------ */
+.ordered-list-editor {
+    margin-bottom: 1rem;
+    min-height: 200px; /* Minimum height, will expand as needed */
+}
+
+/* Make sure the Tabulator container has a proper height */
+.ordered-list-editor .tabulator {
+    height: auto; /* Auto height to display all rows */
+    min-height: 200px; /* Minimum height */
+    width: 100%;
+    border: 1px solid var(--bs-primary); /* Primary color for border */
+    border-radius: 0.375rem; /* Match application's border-radius */
+    margin-bottom: 0.5rem;
+    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Match application's shadow style */
+}
+
+/* Ensure the table holder has a scrollbar */
+.ordered-list-editor .tabulator-tableholder {
+    /* overflow-y: auto !important; - Removed to allow Tabulator to handle overflow */
+    /* max-height: calc(100% - 42px) !important; - Removed to allow Tabulator to handle height */
+    /* Consider using non-!important values if specific scrolling behavior is needed */
+    overflow-y: auto;
+    max-height: calc(100% - 42px);
+}
+
+/* Style for the table element */
+.ordered-list-editor .tabulator-table {
+    display: table !important; /* Force display as table */
+    width: 100% !important;
+    table-layout: fixed !important; /* Use fixed table layout for consistent column widths */
+}
+
+/* Style for the handle column */
+.ordered-list-editor .tabulator-row-handle {
+    cursor: move;
+    background-color: var(--bs-light, #f8f9fa);
+    border-right: 1px solid var(--bs-gray-300, #dee2e6);
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+/* Hover effect for handle column */
+.ordered-list-editor .tabulator-row:hover .tabulator-row-handle {
+    background-color: var(--bs-secondary); /* Secondary color on hover */
+}
+
+/* Style for the handle bars to make them more visible */
+.ordered-list-editor .tabulator-row-handle-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.ordered-list-editor .tabulator-row-handle-bar {
+    background: var(--bs-primary); /* Primary color for handle bars */
+    display: inline-block;
+    width: 10px;
+    height: 2px;
+    margin: 1px 0;
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+/* Change handle bar color on hover */
+.ordered-list-editor .tabulator-row:hover .tabulator-row-handle-bar {
+    background: #ffffff; /* White handle bars on hover */
+}
+
+/* Style for the delete button */
+.ordered-list-editor .tabulator-cell button.btn-danger {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+}
+
+/* Style for boolean columns */
+.ordered-list-editor .tabulator-cell[data-type="boolean"] {
+    text-align: center;
+}
+
+/* Style for boolean cell icons */
+.ordered-list-editor .tabulator-cell .material-icons {
+    font-size: 1.2rem;
+    vertical-align: middle;
+}
+
+/* Style for true/checked icons */
+.ordered-list-editor .tabulator-cell[aria-checked="true"] .material-icons {
+    color: var(--bs-primary); /* Primary color for checked state */
+}
+
+/* Style for false/unchecked icons */
+.ordered-list-editor .tabulator-cell[aria-checked="false"] .material-icons {
+    color: var(--bs-danger); /* Danger color for unchecked state */
+}
+
+/* Style for the table header */
+.ordered-list-editor .tabulator-header {
+    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */
+    border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */
+    color: #ffffff; /* White text for better contrast on gradient */
+}
+
+/* Style for the headers container */
+.ordered-list-editor .tabulator-headers {
+    display: table-row !important; /* Force display as table row */
+}
+
+/* Style for the header cells */
+.ordered-list-editor .tabulator-col {
+    background: transparent; /* Let the header gradient show through */
+    padding: 8px;
+    font-weight: bold;
+    text-align: center;
+    display: table-cell !important; /* Force display as table cell */
+    box-sizing: border-box !important; /* Include padding in width calculation */
+    position: relative !important; /* Ensure proper positioning */
+    color: #ffffff; /* White text for better contrast on gradient */
+}
+
+/* Override any inline styles that might hide column headers */
+.ordered-list-editor .tabulator-col[style*="display: none"] {
+    display: table-cell !important; /* Force display as table cell */
+}
+
+/* Ensure header cells have the same width as their corresponding data cells */
+.ordered-list-editor .tabulator-col,
+.ordered-list-editor .tabulator-cell
+{
+}
+
+/* Style for the header cell content */
+.ordered-list-editor .tabulator-col-title {
+    white-space: normal; /* Allow header text to wrap */
+    word-break: break-word; /* Break words to prevent horizontal overflow */
+    font-weight: bold;
+    color: #ffffff; /* White text for better contrast on gradient */
+}
+
+/* Style for the table rows */
+.ordered-list-editor .tabulator-row {
+    border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's row border color */
+    display: table-row !important; /* Force display as table row */
+}
+
+/* Hover effect for rows */
+.ordered-list-editor .tabulator-row:hover {
+    background-color: var(--bs-secondary) !important; /* Secondary color on hover */
+    color: #ffffff !important; /* White text on hover */
+}
+
+/* Ensure all text in hovered rows changes to white */
+.ordered-list-editor .tabulator-row:hover .tabulator-cell,
+.ordered-list-editor .tabulator-row:hover .tabulator-cell * {
+    color: #ffffff !important; /* White text for all elements in hovered rows */
+}
+
+/* Style for even rows */
+.ordered-list-editor .tabulator-row-even {
+    background-color: #f8f9fa; /* Light gray for even rows */
+}
+
+/* Style for odd rows */
+.ordered-list-editor .tabulator-row-odd {
+    background-color: #ffffff; /* White for odd rows */
+}
+
+/* Style for selected rows */
+.ordered-list-editor .tabulator-row.tabulator-selected {
+    background-color: var(--bs-primary) !important; /* Primary color for selected rows */
+    color: #ffffff !important; /* White text for contrast */
+}
+
+/* Style for row being moved */
+.ordered-list-editor .tabulator-row.tabulator-moving {
+    background-color: var(--bs-primary) !important; /* Primary color for moving rows */
+    color: #ffffff !important; /* White text for contrast */
+    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
+    opacity: 0.9 !important; /* Slightly transparent to distinguish from other rows */
+    box-shadow: 0 0 10px rgba(118, 89, 154, 0.5) !important; /* Shadow for depth */
+    z-index: 100 !important; /* Ensure it appears above other rows */
+    pointer-events: none !important; /* Allow events to pass through to elements below */
+    transform: scale(1.02) !important; /* Slightly larger to stand out */
+    transition: transform 0.2s ease !important; /* Smooth transition */
+}
+
+/* Style for cells in the row being moved */
+.ordered-list-editor .tabulator-row.tabulator-moving .tabulator-cell {
+    color: #ffffff !important; /* Ensure text is white for contrast */
+    background-color: transparent !important; /* Use the row's background color */
+    border-color: transparent !important; /* Hide cell borders */
+    display: table-cell !important; /* Ensure cells are visible */
+    overflow: visible !important; /* Show all content */
+}
+
+/* Style for the moving element (the ghost row that follows the cursor) */
+.tabulator-moving-element {
+    background-color: var(--bs-primary) !important; /* Primary color for moving element */
+    color: #ffffff !important; /* White text for contrast */
+    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
+    opacity: 0.9 !important; /* Slightly transparent */
+    box-shadow: 0 0 15px rgba(118, 89, 154, 0.7) !important; /* Stronger shadow for better visibility */
+    border-radius: 0.375rem !important; /* Rounded corners */
+    overflow: visible !important; /* Show all content */
+    width: auto !important; /* Allow width to adjust to content */
+    max-width: none !important; /* Don't limit width */
+    pointer-events: none !important; /* Allow events to pass through */
+    display: table !important; /* Ensure it's displayed as a table */
+    table-layout: fixed !important; /* Fixed table layout for consistent cell widths */
+}
+
+/* Style for cells in the moving element */
+.tabulator-moving-element .tabulator-cell,
+.tabulator-moving-element .tabulator-row .tabulator-cell {
+    color: #ffffff !important; /* White text for contrast */
+    background-color: transparent !important; /* Use the row's background color */
+    border-color: transparent !important; /* Hide cell borders */
+    display: table-cell !important; /* Ensure cells are visible */
+    overflow: visible !important; /* Show all content */
+    padding: 8px !important; /* Consistent padding */
+    white-space: normal !important; /* Allow text to wrap */
+    word-break: break-word !important; /* Break words to prevent overflow */
+    font-size: 0.85rem !important; /* Consistent font size */
+    vertical-align: middle !important; /* Center content vertically */
+}
+
+/* Style for the active moving element */
+.tabulator-moving-element-active {
+    opacity: 1 !important; /* Fully opaque when active */
+    transform: scale(1.05) !important; /* Slightly larger when active */
+    box-shadow: 0 0 20px rgba(118, 89, 154, 0.8) !important; /* Stronger shadow when active */
+    z-index: 1000 !important; /* Higher z-index to ensure it's on top */
+}
+
+/* Style for the table cells */
+.ordered-list-editor .tabulator-cell {
+    padding: 8px;
+    white-space: normal; /* Allow text to wrap */
+    overflow: visible; /* Show overflowing content */
+    height: auto !important; /* Allow cell to grow as needed */
+    word-break: break-word; /* Break words to prevent horizontal overflow */
+    display: table-cell !important; /* Force display as table cell */
+    scroll-margin-top: 100px; /* Prevent unwanted scrolling when focusing */
+    scroll-behavior: auto; /* Disable smooth scrolling which might cause jumping */
+    font-size: 0.85rem; /* Smaller font size */
+}
+
+/* Style for truncated cells */
+.ordered-list-editor .truncated-cell {
+    position: relative;
+    padding-right: 20px;
+}
+
+.ordered-list-editor .truncated-content {
+    white-space: normal;
+    word-break: break-word;
+}
+
+.ordered-list-editor .show-more {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--bs-primary); /* Use primary color for the show more indicator */
+    cursor: pointer;
+    transition: color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.ordered-list-editor .show-more:hover {
+    color: var(--bs-secondary); /* Use secondary color on hover */
+}
+
+/* Style for the visible cells */
+.ordered-list-editor .tabulator-cell-visible {
+    display: table-cell !important; /* Force display as table cell */
+}
+
+/* Override any inline styles that might hide cells */
+.ordered-list-editor .tabulator-cell[style*="display: none"] {
+    display: table-cell !important; /* Force display as table cell */
+}
+
+/* Style for the textarea editor */
+.ordered-list-editor .tabulator-cell textarea {
+    min-height: 60px;
+    resize: vertical;
+    width: 100%; /* Ensure textarea fills the cell */
+    border: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's input border */
+    border-radius: 0.375rem; /* Match application's border-radius */
+    padding: 0.625rem 0.75rem; /* Match application's input padding */
+    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effect */
+}
+
+/* Focus state for textarea */
+.ordered-list-editor .tabulator-cell textarea:focus {
+    border-color: var(--bs-primary); /* Primary color for focus state */
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(118, 89, 154, 0.25); /* Subtle glow with primary color */
+}
+
+/* Style for the placeholder */
+.ordered-list-editor .tabulator-placeholder {
+    padding: 20px;
+    text-align: center;
+    color: var(--bs-secondary); /* Secondary color for placeholder text */
+    font-style: italic;
+    background-color: var(--bs-light, #f8f9fa); /* Light background for placeholder */
+    border-radius: 0.375rem; /* Match application's border-radius */
+    margin: 10px;
+    border: 1px dashed var(--bs-gray-300, #dee2e6); /* Dashed border for empty state */
+}
+
+/* Style for the Add Row button */
+.ordered-list-editor + .btn-primary {
+    margin-top: 0.5rem;
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Hover effect for primary button */
+.ordered-list-editor + .btn-primary:hover {
+    background-color: var(--bs-secondary) !important;
+    border-color: var(--bs-secondary) !important;
+}
+
+/* Style for the Expand button */
+.ordered-list-editor + .btn-primary + .btn-secondary {
+    margin-top: 0.5rem;
+    background-color: var(--bs-secondary) !important;
+    border-color: var(--bs-secondary) !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Hover effect for secondary button */
+.ordered-list-editor + .btn-primary + .btn-secondary:hover {
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
+}
+
+/* Fullscreen mode styles */
+.ordered-list-editor.fullscreen-mode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    background: var(--bs-light, #f8f9fa); /* Use light background color */
+    padding: 20px;
+    margin: 0;
+    overflow: auto;
+    box-sizing: border-box;
+    border: 2px solid var(--bs-primary); /* Primary color border */
+    box-shadow: 0 0 20px rgba(118, 89, 154, 0.3); /* Larger shadow for modal effect */
+}
+
+.ordered-list-editor.fullscreen-mode .tabulator {
+    height: calc(100vh - 100px) !important;
+    width: 100% !important;
+    border: 1px solid var(--bs-primary); /* Consistent border */
+    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Consistent shadow */
+}