Arne Moerman
09349cb7b7
Introduced `RegistryItemCategory` entity for grouping and ordering items within registries. Updated `RegistryItem` and `Registry` entities to support categorization. Added database migrations for `RegistryItemCategories` and updated `RegistryItems` with `CategoryId` and `SortOrder`. Implemented drag-and-drop functionality for reordering categories and items using JavaScript and Blazor. Enhanced `RegistryAdmin` and `RegistryPublic` components to manage and display categories with collapsible sections. Updated `RegistryService` to handle category operations, including adding, renaming, removing, and reordering. Added new view models and updated CSS for category styling. Refactored logic to ensure proper ordering and fallback for unassigned items.
219 lines
3.5 KiB
CSS
219 lines
3.5 KiB
CSS
section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Tabs styling */
|
|
.nav-tabs {
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
color: #6c757d;
|
|
margin-bottom: -2px;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
border-bottom-color: #0d6efd;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
border-bottom-color: #0d6efd;
|
|
color: #0d6efd;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tab-content {
|
|
animation: fadeIn 0.2s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-pane.show.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Editor styling */
|
|
.editor-wrapper {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-container {
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-editor {
|
|
min-height: 200px;
|
|
padding: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-toolbar {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-toolbar.ql-snow {
|
|
padding: 10px;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-snow .ql-picker-label {
|
|
color: #495057;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-snow .ql-stroke {
|
|
stroke: #495057;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-snow .ql-fill {
|
|
fill: #495057;
|
|
}
|
|
|
|
.editor-wrapper ::deep .ql-snow .ql-picker.ql-expanded .ql-picker-item.selected {
|
|
color: #0d6efd;
|
|
}
|
|
|
|
/* Table styling */
|
|
.table {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.table thead th {
|
|
background-color: #f8f9fa;
|
|
border-top: 2px solid #dee2e6;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* Form styling */
|
|
.form-check {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.form-check-input {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Alert styling */
|
|
.alert {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.nav-tabs .nav-link {
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.table {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* Category grouping and drag-drop */
|
|
.category-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.category-group {
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.category-group .card-header {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.category-group [draggable="true"] {
|
|
cursor: move;
|
|
}
|
|
|
|
.category-group tbody tr[draggable="true"]:active {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Drop indicators */
|
|
.category-group.drop-target-category {
|
|
border-color: #0d6efd;
|
|
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
|
|
}
|
|
|
|
.drop-target-category-before {
|
|
box-shadow: inset 0 3px 0 #0d6efd;
|
|
}
|
|
|
|
.drop-target-category-after {
|
|
box-shadow: inset 0 -3px 0 #0d6efd;
|
|
}
|
|
|
|
.drop-target-item-end {
|
|
border-bottom: 3px solid #0d6efd;
|
|
}
|
|
|
|
.table tbody tr.drop-target-item-before {
|
|
box-shadow: inset 0 3px 0 #0d6efd;
|
|
}
|
|
|
|
.table tbody tr.drop-target-item-after {
|
|
box-shadow: inset 0 -3px 0 #0d6efd;
|
|
}
|
|
|
|
.category-list-end-drop-zone {
|
|
min-height: 18px;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.category-list-end-drop-zone.drop-target-category-list-end {
|
|
box-shadow: inset 0 -3px 0 #0d6efd;
|
|
}
|