Merge pull request #1113 from tblivet/improve/errors-and-logs-height

[NEW UI] Improve errors page and fix logs height

.gitignore

@@ -19,6 +19,7 @@ node_modules/
 /tests/UI/test-results/
 
 ## Compile assets
+/views/assets/
 /views/css/
 /views/img/
 /views/js/

_dev/package.json

@@ -40,6 +40,7 @@
     "prettier": "^3.3.3",
     "rollup-plugin-delete": "^2.1.0",
     "sass": "^1.77.8",
+    "terser": "^5.37.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": ">=5.5.4 <=5.6.0",

_dev/src/scss/_fonts.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Prestafont";
+  font-weight: 400;
+  src: url("../fonts/Prestafont-Regular.woff");
+  font-display: swap;
+}

_dev/src/scss/_variables.scss

@@ -46,6 +46,7 @@ $cdk-prefix: "cdk-";
   --#{$ua-prefix}primary: var(--#{$ua-prefix}primary-800);
   --#{$ua-prefix}primary-hover: var(--#{$ua-prefix}primary-700);
   --#{$ua-prefix}muted-background-color: var(--#{$ua-prefix}primary-200);
+  --#{$ua-prefix}font-family-prestafont: "Prestafont", sans-serif;
   --#{$ua-prefix}font-family-material-icons: var(
     --#{$cdk-prefix}font-family-material-icons,
     "Material Icons"

_dev/src/scss/layouts/_error.scss

@@ -1,4 +1,5 @@
 @use "../variables" as *;
+@use "../fonts" as *;
 
 $e: ".error-page";
 
@@ -14,9 +15,21 @@ $e: ".error-page";
       border: 1px solid var(--#{$ua-prefix}border-color);
     }
 
-    &__img {
-      max-width: 100%;
-      height: auto;
+    &__code {
+      font-family: var(--#{$ua-prefix}font-family-prestafont);
+      font-size: clamp(7rem, 13vw, 12rem);
+      line-height: 1;
+      color: var(--#{$ua-prefix}primary-800);
+    }
+
+    &__code-char {
+      &[data-error-code-char-index="2"] {
+        font-feature-settings: "ss02";
+      }
+
+      &[data-error-code-char-index="3"] {
+        font-feature-settings: "ss01";
+      }
     }
 
     &__infos {
@@ -54,10 +67,6 @@ $e: ".error-page";
         padding: 2rem;
       }
 
-      &__img {
-        width: 17.5rem;
-      }
-
       &__infos {
         justify-self: center;
         width: 100%;
@@ -72,18 +81,6 @@ $e: ".error-page";
       }
     }
   }
-
-  // Handle auto fit height
-  @container html-block (min-width: 0) {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: minmax(0, 1fr);
-    min-height: calc(100cqh - var(--#{$ua-prefix}header-offset-mobile));
-  }
-
-  @container html-block (min-width: 1024px) {
-    min-height: calc(100cqh - var(--#{$ua-prefix}header-offset));
-  }
 }
 
 // Enable auto fit height
@@ -122,6 +119,22 @@ html {
       #main {
         padding-block-end: 0;
       }
+
+      // Handle auto fit height
+      @container html-block (min-width: 0) {
+        #{$ua-id} {
+          display: grid;
+          grid-template-rows: 1fr;
+          grid-template-columns: minmax(0, 1fr);
+          min-height: calc(100cqh - var(--#{$ua-prefix}header-offset-mobile));
+        }
+      }
+
+      @container html-block (min-width: 1024px) {
+        #{$ua-id} {
+          min-height: calc(100cqh - var(--#{$ua-prefix}header-offset));
+        }
+      }
     }
   }
 }

_dev/src/scss/layouts/_logs-pages.scss

@@ -29,6 +29,10 @@ html {
       // Logs adjustments
       .logs {
         flex-grow: 1;
+
+        &__scroll {
+          container-type: size;
+        }
       }
 
       // Page adjustments to handle auto fit height

_dev/vite.config.ts

@@ -42,6 +42,12 @@ export default defineConfig({
           return 'assets/[name].[ext]';
         }
       }
+    },
+    minify: 'terser',
+    terserOptions: {
+      mangle: {
+        reserved: ['$']
+      }
     }
   },
   plugins: [

views/templates/layouts/error.html.twig

@@ -3,8 +3,10 @@
 {% block update_assistant %}
   <div id="ua_error_{{ error_code }}" class="error-page">
     <div class="error-page__container">
-      {% block img %}
-        {# Default image can go here, or it can be left empty so that children can override it #}
+      {% block error_code %}
+        <div class="error-page__code">
+          {% for char in error_code|split('') %}<span class="error-page__code-char" data-error-code-char-index="{{ loop.index }}">{{ char == '0' ? 'O' : char }}</span>{% endfor %}
+        </div>
       {% endblock %}
 
       <div class="error-page__infos">

views/templates/pages/errors/404.html.twig

@@ -1,9 +1,5 @@
 {% extends "@ModuleAutoUpgrade/layouts/error.html.twig" %}
 
-{% block img %}
-  <img class="error-page__img" src="{{ assets_base_path }}/img/404.svg" width="408" height="141" alt=""/>
-{% endblock %}
-
 {% block title %}
   <h2 class="error-page__title">
     {{ 'Something went wrong...'|trans({}) }}

views/templates/pages/errors/500.html.twig

@@ -1,9 +1,5 @@
 {% extends "@ModuleAutoUpgrade/layouts/error.html.twig" %}
 
-{% block img %}
-  <img class="error-page__img" src="{{ psBaseUri }}img/500.svg" width="403" height="174" alt=""/>
-{% endblock %}
-
 {% block title %}
   <h2 class="error-page__title">
     {{ 'Something went wrong...'|trans({}) }}