Fix #12348: fix display bugs in Collecte

ProgrammeVitam · Oct 24, 2024 · 5571fb6 · 5571fb6
1 parent ebf9ac6
commit 5571fb6
Show file tree

Hide file tree

Showing 19 changed files with 156 additions and 92 deletions.
diff --git a/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html b/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
@@ -1,4 +1,4 @@
 <div class="d-flex flex-column align-items-center">
   <div><img alt="compagny logo" [src]="footerLogoUrl" class="logo" /></div>
-  <div class="text normal spaced primary-300">{{ version }}</div>
+  <div class="text normal primary">{{ version }}</div>
 </div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
@@ -34,8 +34,10 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
+import { Directionality } from '@angular/cdk/bidi';
 import { CdkStepper } from '@angular/cdk/stepper';
-import { Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Inject, Injector, Input, Optional } from '@angular/core';
 import { transitionAnimation } from '../../animations/vitamui-common-animations';
 
 @Component({
@@ -47,4 +49,27 @@ import { transitionAnimation } from '../../animations/vitamui-common-animations'
   providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
   animations: [transitionAnimation],
 })
-export class StepperComponent extends CdkStepper {}
+export class StepperComponent extends CdkStepper {
+  @Input() disableScrollToTop = false;
+
+  constructor(
+    @Optional() dir: Directionality,
+    changeDetectorRef: ChangeDetectorRef,
+    private elementRef: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) document?: any,
+  ) {
+    super(dir, changeDetectorRef, elementRef, document);
+  }
+
+  // Automatically scroll to the top of the stepper after changing step (inspired by https://github.com/angular/components/issues/8881)
+  @HostListener('selectionChange')
+  selectionChanged() {
+    if (!this.disableScrollToTop) {
+      this.elementRef.nativeElement.scrollIntoView({
+        block: 'start',
+        inline: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }
+}
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
@@ -64,22 +64,17 @@
 }
 
 .btn {
+  @extend .button-medium;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
-  font-style: normal;
-  font-weight: bold;
 
-  line-height: 20px;
   border-radius: 50px;
   padding: 0 30px 0 30px;
   outline: none;
   white-space: nowrap;
-  font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
 
   flex-shrink: 0;
 

diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -30,3 +30,5 @@
 
 @import 'base/base';
 @import 'base/utilities';
+
+@import 'bootstrap/scss/bootstrap-grid';
diff --git a/ui/ui-frontend-common/src/sass/base/_typography.scss b/ui/ui-frontend-common/src/sass/base/_typography.scss
@@ -11,27 +11,36 @@ h5 {
 
 h1 {
   font-size: 96px;
+  line-height: 112px;
   font-weight: 800;
+  letter-spacing: -2.5px;
 }
 
 h2 {
   font-size: 60px;
+  line-height: 72px;
   font-weight: 900;
+  letter-spacing: -1px;
 }
 
 h3 {
   font-size: 42px;
+  line-height: 42px;
   font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 h4 {
   font-size: 30px;
-  font-weight: 600;
+  line-height: 36px;
+  font-weight: 700;
 }
 
 h5 {
   font-size: 24px;
+  line-height: 32px;
   font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 .text {
@@ -41,18 +50,31 @@ h5 {
 
   &.large {
     font-size: 20px;
+    line-height: 28px;
   }
 
   &.medium {
     font-size: 16px;
+    line-height: 24px;
   }
 
   &.normal {
     font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0.1px;
   }
 
   &.caption {
     font-size: 12px;
+    line-height: 16px;
+    letter-spacing: -0.2px;
+  }
+
+  &.subcaption {
+    font-size: 9px;
+    line-height: 13px;
+    letter-spacing: -0.2px;
+    font-weight: bold; // Subcaption only exists in bold
   }
 
   &.bold {
@@ -64,10 +86,6 @@ h5 {
     cursor: pointer;
   }
 
-  &.spaced {
-    letter-spacing: 0.8px;
-  }
-
   &.uppercase {
     text-transform: uppercase;
   }
@@ -79,6 +97,42 @@ h5 {
   @include text-colors;
 }
 
+@mixin button {
+  @extend .text;
+  @extend .bold;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.button {
+  &-large {
+    @include button;
+    @extend .medium;
+    line-height: 20px;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+  &-medium {
+    @include button;
+    @extend .normal;
+    line-height: 18px;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+  &-small {
+    @include button;
+    @extend .caption;
+
+    &-under {
+      text-decoration-line: underline;
+    }
+  }
+}
+
 .no-wrap {
   white-space: nowrap;
 }

diff --git a/ui/ui-frontend-common/src/sass/material/_modal.scss b/ui/ui-frontend-common/src/sass/material/_modal.scss
@@ -1,3 +1,5 @@
+@use 'bootstrap/scss/bootstrap-grid';
+
 $arrow-size: 70px;
 $header-height: 72px !default;
 $footer-height: 100px !default;
@@ -14,27 +16,31 @@ $footer-height: 100px !default;
   @extend %mat-dialog-container;
 
   .header {
-    padding: 30px 60px 20px 60px;
+    @extend .pt-5;
+    @extend .pb-4;
+    @extend .px-8;
   }
 
   .content {
-    padding: 0 60px 30px 60px;
+    @extend .px-6;
+    @extend .pb-6;
 
     // dialog title
     > .text.large:first-of-type {
       margin: 1.5rem 0;
     }
 
     .actions:last-of-type {
+      @extend .mt-6;
       display: flex;
-      margin-top: 35px;
     }
 
     .actions:last-of-type > button:not(:last-child) {
       margin-right: 20px;
     }
 
     .main-content {
+      @extend .mt-5;
       min-height: 25vh;
     }
   }

diff --git a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
@@ -19,10 +19,6 @@
     color: var(--vitamui-primary);
   }
 
-  &.primary-300 {
-    color: var(--vitamui-primary-300);
-  }
-
   &.secondary {
     color: var(--vitamui-secondary);
   }

diff --git a/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss b/ui/ui-frontend-common/src/sass/variables/_bootstrap-variables.scss
@@ -1 +1,12 @@
 $grid-gutter-width: 20px;
+$spacers: (
+  0: 0,
+  1: 5px,
+  2: 10px,
+  3: 15px,
+  4: 20px,
+  5: 30px,
+  6: 40px,
+  7: 50px,
+  8: 60px,
+);
diff --git a/ui/ui-frontend/projects/archive-search/src/sass/styles.scss b/ui/ui-frontend/projects/archive-search/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import '~ui-frontend-common/sass/icons/vitamui-icons.css';
 @import '~ui-frontend-common/sass/theme';
-@import '~bootstrap/scss/bootstrap-grid';
 
 @import '~ui-frontend-common/sass/fonts/font-styles.css';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,3 +30,5 @@

		@import 'base/base';
		@import 'base/utilities';

		@import 'bootstrap/scss/bootstrap-grid';