Merge pull request #38 from VirtualCable/gui-user-improve

Improves UI consistency and dark mode loading experience

Author: dkmstr

src/app/gui/components/filter/filter.component.scss

@@ -13,7 +13,7 @@
             padding: 0 16px !important;
 
             &::before {
-                display: none !important; /* Quitar línea base Material */
+                display: none !important; /* Remove Material baseline */
             }
         }
 
@@ -30,12 +30,17 @@
             padding-bottom: 12px !important;
             min-height: auto !important;
         }
-        
+
+        /* Remove the empty subscript wrapper (hint/error) that leaves a gap below the filter */
+        .mat-mdc-form-field-subscript-wrapper {
+            display: none !important;
+        }
+
         input {
             color: var(--text-primary) !important;
         }
 
-        /* Ocultar el label al flotar/foco para evitar solapamientos */
+        /* Hide the label on float/focus to avoid overlap */
         .mdc-floating-label--float-above {
             opacity: 0 !important;
             transition: opacity 0.2s ease !important;
@@ -54,6 +59,6 @@
 ::ng-deep .dark-theme .nav-input-field {
     &.mat-focused .mdc-floating-label,
     &.mat-form-field-should-float .mdc-floating-label {
-        color: rgba(255, 255, 255, 0.9) !important; /* Blanco claro en dark mode */
+        color: rgba(255, 255, 255, 0.9) !important; /* Light white in dark mode */
     }
 }

src/app/gui/components/staff-info/staff-info.component.html

@@ -49,7 +49,6 @@ <h1><uds-translate>Information</uds-translate></h1>
           }&nbsp;
         </ol>
       </mat-expansion-panel>
-    </mat-accordion>
     <mat-expansion-panel>
       <mat-expansion-panel-header class="staff-panel">
         <mat-panel-title>
@@ -65,5 +64,6 @@ <h1><uds-translate>Information</uds-translate></h1>
           }&nbsp;
         </ol>
       </mat-expansion-panel>
-    </div>
-  }
+    </mat-accordion>
+  </div>
+}

src/app/gui/footer/footer.component.scss

@@ -0,0 +1,12 @@
+a {
+	color: var(--text-primary);
+	opacity: 0.6;
+	text-decoration: none;
+	font-size: 0.85rem;
+	transition: opacity 0.2s ease;
+
+	&:hover {
+		opacity: 1;
+		text-decoration: underline;
+	}
+}

src/app/pages/login/login.component.css

@@ -12,7 +12,7 @@
 .login-brand {
 	margin-bottom: 1.5rem;
 	img {
-		max-width: 160px;
+		max-width: 130px;
 		filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
 	}
 }

src/app/pages/services/services.component.css

@@ -1,13 +1,13 @@
 .services-container {
     position: relative;
-    padding-top: 110px; /* Espacio para el navbar flotante en desktop */
+    padding-top: 30px; /* .content already adds margin-top 64px; 64+30 clears navbar (79) + ~15 margin */
     padding-left: 2%;
     padding-right: 2%;
 }
 
 @media only screen and (max-width: 744px) {
     .services-container {
-        padding-top: 85px; /* Espacio para el navbar flotante en móvil */
+        padding-top: 25px; /* .content adds margin-top 64px; mobile navbar reaches 74px */
         padding-left: 10px;
         padding-right: 10px;
     }
@@ -19,31 +19,35 @@
     z-index: 1;
 }
 
-/* Integración del filtro como capa */
-.filter-top {
+/* Filter overlays the tab bar, right-aligned on the same row as the tabs */
+.filter-top,
+.filter-bottom {
     position: absolute;
-    top: 110px; /* Alineado con el inicio del contenido */
+    top: 44px; /* On the tab bar: padding-top 30 + tabs margin-top 1rem */
     right: 2%;
     z-index: 10;
-    pointer-events: none; /* Deja pasar clicks si es necesario */
+    pointer-events: none; /* Let clicks pass through to the rest */
+}
+
+/* Push cards down: gap between filter/tabs and services */
+.tab-content {
+    padding-top: 1rem;
 }
 
-.filter-top ::ng-deep uds-filter {
-    pointer-events: auto; /* El filtro sí recibe clicks */
+.filter-top ::ng-deep uds-filter,
+.filter-bottom ::ng-deep uds-filter {
+    pointer-events: auto; /* Filter itself receives clicks */
 }
 
 @media only screen and (max-width: 744px) {
-    .filter-top {
+    .filter-top,
+    .filter-bottom {
         position: relative;
         top: 0;
         right: 0;
         margin-bottom: 1rem;
         pointer-events: auto;
+        display: flex;
+        justify-content: flex-end;
     }
 }
-
-.filter-bottom {
-    margin-top: 1.5rem;
-    display: flex;
-    justify-content: flex-end;
-}

src/app/pages/services/services.component.ts

@@ -122,7 +122,7 @@ export class ServicesComponent implements OnInit {
         groupedMap.get(element.group.id)!.services.push(element);
       });
 
-    // Convert map to array, sort by group priority and id, y filtrar grupos vacíos
+    // Convert map to array, sort by group priority and id, and filter out empty groups
     this.group = Array.from(groupedMap.values())
       .filter(g => g.services.length > 0)
       .sort((a, b) => {

src/index.html

@@ -12,6 +12,12 @@
       height: 100%;
     }
 
+    /* Dark loading background: avoids the white flash when navigating in dark mode */
+    html.dark-theme,
+    html.dark-theme body {
+      background-color: #0f111a;
+    }
+
     .app-loading {
       position: relative;
       display: flex;
@@ -74,6 +80,13 @@
 
   <!-- just in case translations cannot be loaded, provide a fallback -->
   <script type="text/javascript">
+    // Apply the stored theme before first paint to avoid the white flash
+    try {
+      if (localStorage.getItem('blackTheme') === 'true') {
+        document.documentElement.classList.add('dark-theme');
+      }
+    } catch (e) { /* localStorage unavailable */ }
+
     var django = {
       gettext: function (s) {
         return s;

src/styles.scss

@@ -52,7 +52,7 @@ $font-size: 14px;
   --text-secondary: #5f6368;
   --glass-bg: rgba(255, 255, 255, 0.35);
   --glass-hover-bg: rgba(255, 255, 255, 0.55);
-  --glass-border: rgba(255, 255, 255, 0.35);
+  --glass-border: rgba(0, 0, 0, 0.14);
   --glass-shadow: rgba(0, 0, 0, 0.16);
   --warning-color: #d32f2f;
   --bg-button: linear-gradient(135deg, #1976d2, #1565c0);
@@ -106,10 +106,12 @@ i.material-icons {
   html,
   body {
     background-color: var(--bg-surface);
-    background-image: 
+    background-image:
       radial-gradient(at 0% 0%, rgba(67, 56, 202, 0.25) 0px, transparent 50%),
       radial-gradient(at 100% 100%, rgba(88, 28, 135, 0.2) 0px, transparent 50%),
       radial-gradient(at 50% 50%, var(--bg-accent) 0px, var(--bg-surface) 100%);
+    background-attachment: fixed; /* Pinned to viewport: no seam when scrolling */
+    background-repeat: no-repeat;
   }
 
   .menu .mat-mdc-icon-button {
@@ -143,7 +145,7 @@ i.material-icons {
   .mat-mdc-tab-header {
     background: var(--bg-surface);
     border-radius: 12px 12px 0 0;
-    margin-bottom: 20px;
+    padding-bottom: 1rem;
   }
 
   .mat-mdc-tab-body-wrapper {