CSCEXAM-000 Starting to make some sense to style bloat

CSCfi · Feb 6, 2024 · ca6e90d · ca6e90d
1 parent b7c67b2
commit ca6e90d
Show file tree

Hide file tree

Showing 30 changed files with 2,227 additions and 2,936 deletions.
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
@@ -37,14 +37,25 @@ import { SessionService } from './session/session.service';
         @if (user) {
             <div>
                 <xm-navigation [hidden]="hideNavBar"></xm-navigation>
-                <main id="mainView" class="container-fluid pad0 w-auto" [ngClass]="{ 'vmenu-on': !hideNavBar }">
+                <main id="mainView" class="container-fluid" [ngClass]="{ 'vmenu-on': !hideNavBar }">
                     <router-outlet></router-outlet>
                 </main>
             </div>
         }
     `,
     standalone: true,
     imports: [DevLoginComponent, NavigationComponent, NgClass, RouterOutlet],
+    styles: [
+        `
+            #mainView {
+                width: auto !important;
+                @media print {
+                    margin: 0 15px;
+                    max-width: 1000px;
+                }
+            }
+        `,
+    ],
 })
 export class AppComponent implements OnInit, OnDestroy {
     user?: User;

diff --git a/ui/src/app/examination/section/examination-section.component.ts b/ui/src/app/examination/section/examination-section.component.ts
@@ -65,7 +65,7 @@ import { ExaminationQuestionComponent } from '../question/examination-question.c
             <div class="col-md-12">
                 @for (material of section.examMaterials; track material) {
                     <div class="row">
-                        <div class="col-md-12 info-row mart10">
+                        <div class="col-md-12 mart10">
                             <i class="text-muted bi-book" alt="exam materials"></i>
                             <span style="padding-left: 15px">{{ material.name }}</span>
                             @if (material.author) {

diff --git a/ui/src/app/facility/facility.component.html b/ui/src/app/facility/facility.component.html
@@ -7,7 +7,7 @@
             </a>
         </span>
         <span class="col-md-6">
-            <a class="header-top-link float-end me-4 bi-building btn btn-success" (click)="editMultipleRooms()">
+            <a class="float-end me-4 bi-building btn btn-success" (click)="editMultipleRooms()">
                 {{ 'i18n_edit_all_rooms' | translate }}
             </a>
         </span>

diff --git a/ui/src/app/facility/machines/machines.component.html b/ui/src/app/facility/machines/machines.component.html
@@ -67,12 +67,10 @@
                                     @for (software of machine.softwareInfo; track software; let l = $last) {
                                         <li class="float-start">
                                             @if (software.status !== 'DISABLED') {
-                                                <span>
-                                                    {{ software.name }}
-                                                    @if (!l) {
-                                                        <span>, </span>
-                                                    }
-                                                </span>
+                                                <span>{{ software.name }}</span>
+                                                @if (!l) {
+                                                    <span>,&nbsp;</span>
+                                                }
                                             }
                                         </li>
                                     }

diff --git a/ui/src/app/facility/machines/machines.component.ts b/ui/src/app/facility/machines/machines.component.ts
@@ -27,6 +27,13 @@ import type { ExamMachine, ExamRoom } from '../../reservation/reservation.model'
     selector: 'xm-machines',
     standalone: true,
     imports: [NgbPopover, NgClass, RouterLink, TranslateModule],
+    styles: [
+        `
+            li {
+                list-style: none;
+            }
+        `,
+    ],
 })
 export class MachineListComponent implements OnInit {
     @Input() room!: ExamRoom;

diff --git a/ui/src/app/facility/rooms/rooms.component.scss b/ui/src/app/facility/rooms/rooms.component.scss
@@ -1,9 +1,5 @@
 @import '../../shared/styles.scss';
 
-li {
-    list-style: none;
-}
-
 .selected {
     background-color: #d3e7a8;
     border-top: none;

diff --git a/ui/src/app/navigation/navigation.component.scss b/ui/src/app/navigation/navigation.component.scss
@@ -33,7 +33,6 @@
 
     a {
         display: flex;
-        background-color: black;
         text-decoration: none;
         padding-left: 1.5em;
         border-left: 3px solid black;
@@ -48,36 +47,25 @@
             border: 3px solid black;
             border-radius: 50px;
         }
+
+        &.selected {
+            font-weight: bold;
+            border-left: 3px solid $exam-dark-green;
+            @media (max-width: $mobile-width) {
+                border-left: 3px solid black;
+                border-radius: 50px !important;
+            }
+        }
     }
 
     a:hover {
-        text-decoration: none;
-        color: white;
         border-left: 3px solid $exam-dark-green;
         @media (max-width: $mobile-width) {
             border: 3px solid white;
             border-radius: 50px;
         }
     }
 
-    .selected {
-        background-color: black;
-        border-left: 3px solid $exam-dark-green;
-        text-decoration: none;
-        padding-left: 1.5em;
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-        font-weight: bold;
-        @media (max-width: $mobile-width) {
-            border: 3px solid $exam-dark-green !important;
-            border-radius: 50px !important;
-        }
-    }
-
     li {
         list-style: none;
         margin-bottom: 2.5em;
@@ -95,7 +83,6 @@
 
     .nav-header {
         background-color: black;
-        color: $exam-dark-grey;
         position: fixed;
         top: 0;
         left: 0;
@@ -123,7 +110,6 @@
     .nav-body {
         position: fixed;
         background-color: black;
-        color: $exam-dark-grey;
         top: 162px;
         bottom: 105px;
         overflow-y: auto;
@@ -137,16 +123,13 @@
     .nav-body-mobile {
         @media (max-width: $mobile-width) {
             background-color: black;
-            color: $exam-dark-grey;
             position: relative;
             width: 100%;
         }
     }
 
     .nav-footer {
         background-color: $exam-medium-green;
-        color: $exam-dark-grey;
-        display: block;
         position: fixed;
         bottom: 0;
         width: 17.125em;
@@ -162,20 +145,6 @@
         }
     }
 
-    .minimize .nav-header {
-        height: 175px;
-        width: 50px;
-    }
-
-    .minimize .nav-body {
-        top: 175px;
-        width: 50px;
-    }
-
-    .minimize .nav-footer {
-        width: 50px;
-    }
-
     .menu-item {
         margin: 0;
         @media (max-width: $mobile-width) {
@@ -196,7 +165,7 @@
         padding: 0.5em 1em 1em;
         font-family: $family-helvetica;
         font-size: 14px;
-        color: #ffffff;
+        color: white;
         letter-spacing: 0.27px;
         line-height: 18px;
         text-align: left;
@@ -218,17 +187,6 @@
         letter-spacing: 1px;
     }
 
-    .minify {
-        bottom: 0;
-        padding: 0.5em;
-        float: right;
-        color: #27b9ca;
-    }
-
-    .minimize .menu-item {
-        display: none;
-    }
-
     .locale-bar {
         margin-left: 1.7em;
         margin-top: 0.4em;
@@ -245,28 +203,16 @@
         color: white;
         padding: 0.5em;
         margin-left: 1.5em;
-        background-color: transparent;
         border: 0px;
-        text-decoration: none;
         @media (max-width: $mobile-width) {
             border: 3px solid #00000000;
         }
-    }
-    .locale-item:active .locale-item:hover {
-        font-weight: bold;
-    }
-
-    .minimize .locale-item {
-        text-align: center;
-        padding: 0.3em 0 0.3em 0;
-    }
-
-    .locale-item:hover {
-        color: white;
-        font-weight: bold;
-        @media (max-width: $mobile-width) {
-            border-radius: 50px;
-            border: 3px solid white;
+        :active :hover {
+            font-weight: bold;
+            @media (max-width: $mobile-width) {
+                border-radius: 50px;
+                border: 3px solid white;
+            }
         }
     }
 
@@ -288,53 +234,30 @@
         max-width: 165px;
     }
 
-    .sub-menu {
-        font-family: $family-helvetica;
-        font-size: 16px !important;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-
-        a {
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
-        }
-    }
-
     ul.submenu {
-        margin: 0px;
         margin-top: 20px;
         border-top: 15px;
         padding: 0px;
         border: 0px;
+        font-family: $family-helvetica;
+        font-size: 16px;
+        color: #e7e7e7;
+        letter-spacing: 0.27px;
+        line-height: 16px;
+        text-align: left;
 
         a {
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
-            margin: 0 30px;
+            margin: 0 10px 0 10px;
+            @media (max-width: $mobile-width) {
+                margin: 0;
+            }
         }
 
         li {
             margin-bottom: 15px;
         }
 
         div {
-            width: 175px;
-            font-family: $family-helvetica;
-            font-size: 16px;
-            color: #e7e7e7 !important;
-            letter-spacing: 0.27px;
-            line-height: 18px;
-            text-align: left;
             padding-left: 28px;
             text-indent: -35px;
         }
@@ -348,24 +271,4 @@
             margin-top: 10px;
         }
     }
-
-    .sub-menu-item {
-        padding-left: 1em;
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-    }
-    span.sub-menu-item {
-        font-family: $family-helvetica;
-        font-size: 16px;
-        color: #e7e7e7 !important;
-        letter-spacing: 0.27px;
-        line-height: 18px;
-        text-align: left;
-        text-indent: -4em;
-        width: 50px;
-    }
 }
diff --git a/ui/src/app/question/basequestion/multiple-choice-option.component.ts b/ui/src/app/question/basequestion/multiple-choice-option.component.ts
@@ -24,7 +24,7 @@ import { QuestionDraft, QuestionService } from '../question.service';
     selector: 'xm-mc-option-editor',
     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     template: `
-        <div ngModelGroup="mcOptions" class="question-editor-option">
+        <div ngModelGroup="mcOptions" class="question-editor-option exclude">
             <div class="row">
                 <div
                     class="col-md-6 question-option-empty"

diff --git a/ui/src/app/question/basequestion/multiple-choice.component.ts b/ui/src/app/question/basequestion/multiple-choice.component.ts
@@ -63,7 +63,7 @@ import { WeightedMultipleChoiceOptionEditorComponent } from './weighted-multiple
             </div>
         }
         @for (option of question.options; track option.id; let i = $index) {
-            <div class="row" id="question-editor">
+            <div class="row">
                 <div class="col-md-12">
                     @if (question.type === 'MultipleChoiceQuestion') {
                         <xm-mc-option-editor

diff --git a/ui/src/app/question/basequestion/question-body.component.html b/ui/src/app/question/basequestion/question-body.component.html
@@ -105,10 +105,10 @@
                     {{ 'i18n_toolbar_cloze_test_question' | translate }}
                 }
                 @case ('MultipleChoiceQuestion') {
-                    {{ 'i18n_toolbar_mutltiplechoice_question' | translate }}
+                    {{ 'i18n_toolbar_multiplechoice_question' | translate }}
                 }
                 @case ('WeightedMultipleChoiceQuestion') {
-                    {{ 'i18n_toolbar_weighted_mutltiplechoice_question' | translate }}
+                    {{ 'i18n_toolbar_weighted_multiplechoice_question' | translate }}
                 }
                 @case ('ClaimChoiceQuestion') {
                     {{ 'i18n_toolbar_claim_choice_question' | translate }}

diff --git a/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts b/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
@@ -25,7 +25,7 @@ import { QuestionDraft } from '../question.service';
     selector: 'xm-wmc-option-editor',
     viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
     template: `
-        <div ngModelGroup="wmcOptions" class="question-editor-option">
+        <div ngModelGroup="wmcOptions" class="question-editor-option exclude">
             <div class="row">
                 <div
                     class="col-md-6 question-option-empty"