@reldens/cms 0.19.0 → 0.21.0

package/admin/reldens-admin-client.css

@@ -27,13 +27,13 @@
     padding: 0;
     font-size: 12px;
 
-    & .wrapper {
+    .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }
 
-    & .notification {
+    .notification {
         display: none;
         position: absolute;
         top: 1.5rem;
@@ -56,7 +56,7 @@
             color: var(--white);
         }
 
-        & .close {
+        .close {
             position: absolute;
             top: 1rem;
             right: 1rem;
@@ -65,26 +65,29 @@
         }
     }
 
-    & .header {
-        background-color: var(--darkGrey);
+    .header {
+        /* height: 3.85rem; */
         padding: 1.5rem;
+        background-color: var(--darkGrey);
         text-align: center;
 
-        & .title a {
+        .title a {
             color: var(--white);
             text-decoration: none;
-            font-size: 24px;
+            font-size: 1.5rem;
             font-weight: var(--bold);
             font-family: var(--reldensFont);
         }
     }
 
-    & .content {
+    .content {
         display: flex;
+        flex-grow: 1;
         position: relative;
+        /* min-height: calc(100vh - 11.80rem); */
     }
 
-    & .button {
+    .button {
         padding: 0.5rem 1rem;
         border: none;
         border-radius: 4px;
@@ -97,7 +100,7 @@
         }
     }
 
-    & .button-primary {
+    .button-primary {
         color: var(--white);
         background-color: var(--lightBlue);
 
@@ -106,7 +109,7 @@
         }
     }
 
-    & .button-secondary {
+    .button-secondary {
         color: var(--white);
         background-color: var(--grey);
 
@@ -115,7 +118,7 @@
         }
     }
 
-    & .button-warning {
+    .button-warning {
         color: var(--white);
         background-color: var(--orange);
 
@@ -124,7 +127,7 @@
         }
     }
 
-    & .button-danger {
+    .button-danger {
         color: var(--white);
         background-color: var(--red);
 
@@ -133,17 +136,17 @@
         }
     }
 
-    & .icon {
+    .icon {
         &-sm {
             width: 32px;
         }
     }
 
-    & .clickable {
+    .clickable {
         cursor: pointer;
     }
 
-    & .modal-overlay {
+    .modal-overlay {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -156,7 +159,7 @@
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    & .modal {
+    .modal {
         max-width: 92vw;
         max-height: 92vh;
         padding: 1rem;
@@ -170,12 +173,12 @@
         }
     }
 
-    & .response-error {
+    .response-error {
         color: var(--red);
         font-weight: var(--bold);
     }
 
-    & .side-bar {
+    .side-bar {
         min-width: 230px;
         padding: 1.4rem;
         background-color: var(--darkBlue);
@@ -183,9 +186,9 @@
         box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
     }
 
-    & .with-sub-items {
+    .with-sub-items {
         &.active {
-            & .side-bar-item {
+            .side-bar-item {
                 display: block;
 
                 &:first-of-type {
@@ -200,7 +203,7 @@
             }
         }
 
-        & .side-bar-item {
+        .side-bar-item {
             display: none;
 
             & a {
@@ -222,7 +225,7 @@
         }
     }
 
-    & .side-bar-item {
+    .side-bar-item {
         margin-bottom: 0.2rem;
 
         &:first-child {
@@ -249,11 +252,11 @@
         }
     }
 
-    & .user-area {
+    .user-area {
         margin-top: 1.5rem;
     }
 
-    & .main-content {
+    .main-content {
         padding: 2rem;
         background-color: var(--white);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -263,30 +266,30 @@
         width: 100%;
     }
 
-    & .entity-list {
+    .entity-list {
         overflow: auto;
 
-        & .actions {
+        .actions {
             display: flex;
             justify-content: end;
             margin-bottom: 1rem;
         }
     }
 
-    & .forms-container {
+    .forms-container {
         width: 96%;
         max-width: 400px;
         margin: auto;
     }
 
-    & .form-title {
+    .form-title {
         font-size: 22px;
         margin-bottom: 2%;
         color: var(--darkGrey);
         text-align: center;
     }
 
-    & .input-box {
+    .input-box {
         margin: 0 auto 4%;
 
         & label {
@@ -320,7 +323,7 @@
         min-height: 300px;
     }
 
-    & .table-container {
+    .table-container {
         width: 96%;
         margin: auto;
     }
@@ -332,14 +335,14 @@
         text-align: center;
     }
 
-    & .list {
+    .list {
         width: 100%;
         border-collapse: collapse;
         margin-bottom: 2%;
         color: var(--darkGrey);
         table-layout: auto;
 
-        & .row {
+        .row {
             background-color: var(--white);
 
             &.row-header {
@@ -360,7 +363,7 @@
             }
         }
 
-        & .field {
+        .field {
             padding: 0.5rem 0;
             min-width: min-content;
             white-space: nowrap;
@@ -368,23 +371,23 @@
             border: 1px solid #ccc;
             text-align: left;
 
-            & .button-list-delete {
+            .button-list-delete {
                 border: none;
                 background-color: transparent;
                 cursor: pointer;
             }
 
-            & .field-actions-container {
+            .field-actions-container {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 margin: 0 1rem;
 
-                & .button {
+                .button {
                     margin-bottom: 1rem;
 
-                    &.list-delete-selection {
+                    &.list-select {
                         margin-bottom: 0;
                     }
                 }
@@ -405,7 +408,7 @@
             }
         }
 
-        & .field-edit, & .field-delete {
+        .field-edit, .field-delete {
             & span {
                 display: block;
                 text-align: center;
@@ -413,7 +416,7 @@
             }
         }
 
-        & .field-edit {
+        .field-edit {
             & span {
                 & svg, path {
                     width: 24px;
@@ -422,7 +425,7 @@
             }
         }
 
-        & .field-delete {
+        .field-delete {
             & span {
                 & svg, path {
                     width: 24px;
@@ -432,11 +435,11 @@
         }
     }
 
-    & .filters-toggle {
+    .filters-toggle {
         cursor: pointer;
     }
 
-    & .filters-toggle-content {
+    .filters-toggle-content {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
@@ -447,7 +450,7 @@
         }
     }
 
-    & .pagination {
+    .pagination {
         width: 100%;
         display: flex;
         flex-flow: wrap;
@@ -469,9 +472,9 @@
         }
     }
 
-    & .footer {
+    .footer {
+        padding: 2rem;
         text-align: center;
-        padding: 2%;
         background-color: var(--darkGrey);
         color: var(--white);
 
@@ -485,7 +488,7 @@
         }
     }
 
-    & .copyright {
+    .copyright {
         position: relative;
         display: block;
         width: 100%;
@@ -502,23 +505,23 @@
 
     }
 
-    & .alert {
+    .alert {
         font-weight: var(--bold);
         color: var(--red);
     }
 
-    & .shutting-down {
+    .shutting-down {
         margin-bottom: 1rem;
     }
 
-    & .sub-content {
+    .sub-content {
         background-color: var(--lightGrey2);
         padding: 1rem;
         margin-bottom: 1rem;
         border: 1px solid #ccc;
         border-radius: 4px;
 
-        & .sub-content-form {
+        .sub-content-form {
             display: flex;
             flex-wrap: wrap;
             align-items: flex-end;
@@ -529,8 +532,7 @@
                 flex-direction: row;
                 vertical-align: middle;
                 align-items: center;
-                width: 100%;
-                margin: 0 0 1rem 0;
+                margin: 0 1rem 1rem 0;
                 font-size: 14px;
                 color: var(--darkGrey);
 
@@ -544,13 +546,13 @@
                 }
             }
 
-            & .actions {
+            .actions {
                 display: flex;
                 width: 100%;
                 margin: 1rem 0 0 0;
             }
 
-            & .sub-content-box {
+            .sub-content-box {
                 display: flex;
                 flex-direction: column;
                 margin-bottom: 1rem;
@@ -584,18 +586,71 @@
         }
     }
 
-    & .maps-wizard {
-        & .main-action-container.maps-selection {
+    .filters-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 1rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .filters-toggle {
+        cursor: pointer;
+        margin: 0;
+        padding: 0.5rem 0;
+        flex-shrink: 0;
+    }
+
+    .filters-toggle img {
+        width: 34px;
+        height: auto;
+        margin-right: 0.5rem;
+    }
+
+    .search-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        flex: 1;
+        justify-content: flex-end;
+    }
+
+    .search-input-group input[type="text"] {
+        width: calc(100% - 1rem);
+        padding: 0.5rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1rem;
+    }
+
+    .search-input-group input[type="text"]:focus {
+        outline: none;
+        border-color: var(--lightBlue);
+        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+    }
+
+    .filter-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+    }
+
+    .maps-wizard {
+        .main-action-container.maps-selection {
             width: 100%;
 
-            & .wizard-options-container {
+            .wizard-options-container {
                 display: flex;
                 justify-content: space-between;
                 flex-wrap: wrap;
                 width: 100%;
 
                 /* 3 or more items => 4 columns */
-                & .wizard-map-option-container {
+                .wizard-map-option-container {
                     flex: 0 0 22%;
                     padding: 1rem 1% 0;
                     margin: 1.5rem 0 0;
@@ -603,7 +658,7 @@
                 }
 
                 /* 1 child => 1 columns */
-                & .wizard-map-option-container:only-child {
+                .wizard-map-option-container:only-child {
                     flex: 0 0 100%;
                     padding: 1rem 0 0;
                     border: none;
@@ -611,7 +666,7 @@
 
                 /* 2 children => 2 columns */
                 .wizard-map-option-container:first-child:nth-last-child(2),
-                & .wizard-map-option-container:last-child:nth-child(2) {
+                .wizard-map-option-container:last-child:nth-child(2) {
                     flex: 0 0 47%;
                 }
 
@@ -622,13 +677,13 @@
             }
         }
 
-        & .checkbox-container {
+        .checkbox-container {
             display: flex;
             flex-direction: row;
             font-weight: var(--bold);
         }
 
-        & .wizard-options-container {
+        .wizard-options-container {
             padding: 0;
             margin-bottom: 1rem;
 
@@ -638,7 +693,7 @@
                 margin-right: 6px;
             }
 
-            & .wizard-map-option-container {
+            .wizard-map-option-container {
                 display: flex;
                 flex-direction: column;
                 list-style: none;
@@ -656,39 +711,39 @@
                 }
             }
 
-            & .wizard-option-container {
+            .wizard-option-container {
                 list-style: none;
                 margin-bottom: 1rem;
 
-                & .main-option {
+                .main-option {
                     display: inline-block;
                     cursor: pointer;
                 }
 
-                & .maps-wizard-option-content {
+                .maps-wizard-option-content {
                     display: none;
                     padding-left: 1.6rem;
                 }
 
                 &.active {
-                    & .maps-wizard-option-content {
+                    .maps-wizard-option-content {
                         display: block;
                     }
                 }
             }
         }
 
-        & .maps-wizard-form {
+        .maps-wizard-form {
             align-items: flex-start;
             flex-direction: column;
             justify-content: flex-start;
 
-            & .submit-container {
+            .submit-container {
                 display: flex;
             }
         }
 
-        & .sub-map-option-description {
+        .sub-map-option-description {
             display: flex;
             align-items: center;
 
@@ -697,7 +752,7 @@
             }
         }
 
-        & .sub-maps-container {
+        .sub-maps-container {
             display: block;
 
             &.hidden {
@@ -710,7 +765,7 @@
         }
     }
 
-    & .loading {
+    .loading {
         max-width: 50px;
 
         &.hidden {
@@ -718,7 +773,7 @@
         }
     }
 
-    & .entity-view, .entity-edit {
+    .entity-view, .entity-edit {
         & h2 {
             font-size: 22px;
             margin-bottom: 2rem;
@@ -726,7 +781,7 @@
             text-align: center;
         }
 
-        & .view-field, .edit-field {
+        .view-field, .edit-field {
             display: flex;
             justify-content: space-between;
             padding: 0;
@@ -765,11 +820,11 @@
             }
         }
 
-        & .view-field .field-value img {
+        .view-field .field-value img {
             max-width: 200px;
         }
 
-        & .edit-field {
+        .edit-field {
             & span, input {
                 &.field-value {
                     display: flex;
@@ -784,12 +839,12 @@
                         margin: 0;
                         padding: 0.5rem;
                         border: none;
-                        background: transparent;
+                        background-color: transparent;
 
                         &:not([disabled]) {
                             margin: 0;
                             border: 1px solid #7f8c8d;
-                            background: var(--white);
+                            background-color: var(--white);
 
                             &[type="checkbox"] {
                                 max-width: max-content;
@@ -802,15 +857,15 @@
             }
         }
 
-        & .actions {
-            margin-top: 2rem;
+        .actions {
+            margin: 2rem 0;
             text-align: center;
 
             & form {
                 display: inline;
             }
 
-            & .button {
+            .button {
                 display: inline-block;
                 margin: 0 0.5rem;
             }
@@ -829,7 +884,7 @@
         text-align: center;
     }
 
-    & .extra-content-container, .default-room-container {
+    .extra-content-container, .default-room-container {
         display: flex;
         flex-direction: column;
         padding: 1rem 0;
@@ -841,14 +896,14 @@
         }
     }
 
-    & .association-maps-container {
+    .association-maps-container {
         display: block;
         width: 100%;
         max-height: 500px;
         overflow: auto;
     }
 
-    .cache-confirm-dialog {
+    .confirm-dialog {
         border: none;
         border-radius: 8px;
         padding: 0;
@@ -857,38 +912,40 @@
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
-    .cache-confirm-dialog::backdrop {
+    .confirm-dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    .cache-dialog-content {
+    .dialog-content {
         padding: 1rem;
     }
 
-    .cache-dialog-content h5 {
+    .dialog-content h5 {
         margin: 0 0 1rem 0;
         font-size: 18px;
         color: var(--darkGrey);
     }
 
-    .cache-dialog-content p {
+    .dialog-content p {
         margin: 0 0 1rem 0;
         color: var(--darkGrey);
     }
 
-    .cache-warning {
-        padding: 1rem;
-        background-color: #fff3cd;
-        border: 1px solid #ffeaa7;
-        border-radius: 4px;
-        color: #856404;
-        margin-bottom: 1rem;
-    }
-
-    .cache-dialog-actions {
+    .dialog-actions {
         display: flex;
         justify-content: flex-end;
         gap: 1rem;
     }
 
 }
+
+@media (max-width: 768px) {
+    .reldens-admin-panel .filter-actions {
+        flex-direction: column;
+    }
+
+    .reldens-admin-panel .filter-actions .button {
+        width: 100%;
+        text-align: center;
+    }
+}