pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improvement of the color scheme of the table editor.

Browse Source
This commit is contained in:
Josako
2025-05-30 09:48:42 +02:00
parent d290b46a0c
commit 49f9077a7b
1 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
eveai_app/templates/eveai_ordered_list_editor.html
View File

@@ -48,6 +48,8 @@ window.EveAI.OrderedListEditors = {
columns: columns,
layout: "fitColumns", // Changed to fitColumns to ensure columns display horizontally
movableRows: true,
movableRowsPlaceholder: false, // Don't use placeholder, show actual row content
movableRowsSender: "table", // Keep a copy of the row in the table while dragging
rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
maxHeight: "50%", // Auto height to display all rows
placeholder: "No Data Available",
@@ -534,6 +536,67 @@ document.addEventListener('DOMContentLoaded', function() {
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;