Set base font size as in production, compensate sizes #146 #160

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss

@@ -14,17 +14,14 @@
 }
 .form-group {
   flex: 1;
-  min-width: 15rem;
-  max-width: 30rem;
+  min-width: 20rem;
+  max-width: 40rem;
   margin-right: $spacer;
   margin-bottom: $spacer / 2;
 }
 .buttons {
   flex: none;
-  // Attempt to calculate size dynamically failed, since they have
-  // 1.5rem as base font size in production
-  // margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
-  margin-top: 31px;
+  margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
   margin-right: 0;
 }
 

src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss

@@ -14,17 +14,14 @@
 }
 .form-group {
   flex: 1;
-  min-width: 15rem;
-  max-width: 30rem;
+  min-width: 20rem;
+  max-width: 40rem;
   margin-right: $spacer;
   margin-bottom: $spacer / 2;
 }
 .buttons {
   flex: none;
-  // Attempt to calculate size dynamically failed, since they have
-  // 1.5rem as base font size in production
-  // margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
-  margin-top: 31px;
+  margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
   margin-right: 0;
 }
 

src/app/home.component.ts

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
   selector: 'erz-home',
   template: `
-    <ul>
+    <ul class="mt-3">
       <li *ngFor="let section of sections">
         <h2>
           <a [routerLink]="'/' + section">

src/app/presence-control/components/presence-control-entry/presence-control-entry.component.html

@@ -26,9 +26,7 @@
   ]"
   class="student-name"
 >
-  <span class="student-name-inner">
-    {{ entry.lessonPresence.StudentFullName }}
-  </span>
+  {{ entry.lessonPresence.StudentFullName }}
   <span class="unconfirmed-absences">
     {{
       hasUnconfirmedAbsences

src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss

@@ -52,40 +52,31 @@ a.comment,
   margin-right: 1.5 * $spacer;
 }
 
+$presence-control-status-size: 2.75rem;
 .status {
   grid-area: status;
 }
 .status .material-icons {
-  font-size: 2rem;
+  font-size: $presence-control-status-size;
 }
 
 .designation {
   grid-area: designation;
   text-align: left;
-  line-height: 2rem + $btn-padding-y;
+  line-height: $presence-control-status-size + $btn-padding-y;
 }
 
 .student-name {
   color: $body-color;
   grid-area: student-name;
   display: flex;
   flex-direction: column;
-
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-}
-a:hover,
-a:active {
-  .student-name-inner {
-    text-decoration: underline;
-  }
 }
 
+$presence-control-unconfimed-absences-size: 1.1rem;
 .unconfirmed-absences {
   color: $absent-color;
-  font-size: 0.8rem;
+  font-size: $presence-control-unconfimed-absences-size;
   line-height: 1;
 }
 
@@ -110,7 +101,7 @@ a:active {
   }
 
   .unconfirmed-absences {
-    height: 0.8rem; // Always occupy space, event if hint is not present
+    height: $presence-control-unconfimed-absences-size; // Always occupy space, even if hint is not present
   }
 }
 

src/app/shared/components/spinner/spinner.component.scss

@@ -7,8 +7,8 @@
 }
 
 .spinner-border {
-  width: 3rem;
-  height: 3rem;
+  width: 4rem;
+  height: 4rem;
   :host:not(.inline) & {
     margin-top: 100px;
   }

src/app/shared/styles/container.scss

@@ -7,12 +7,3 @@
   padding-top: $erz-container-padding-y;
   padding-bottom: $erz-container-padding-y;
 }
-
-.form-check-label {
-  margin-left: 0.5rem;
-}
-
-.ngb-dp-months {
-  padding: 5px 30px 5px 29px;
-  background: #f8f9fa;
-}

src/app/shared/styles/datepicker.scss

@@ -0,0 +1,22 @@
+ngb-datepicker-navigation-select > .custom-select {
+  font-size: 1rem !important;
+}
+
+$datepicker-cell-size: 2.5rem;
+.ngb-dp-day,
+.ngb-dp-week-number,
+.ngb-dp-weekday {
+  width: $datepicker-cell-size !important;
+  height: $datepicker-cell-size !important;
+}
+
+[ngbDatepickerDayView] {
+  width: $datepicker-cell-size !important;
+  height: $datepicker-cell-size !important;
+  line-height: $datepicker-cell-size !important;
+}
+
+.ngb-dp-months {
+  padding: (0.5 * $spacer) (2 * $spacer);
+  background: $gray-100;
+}

src/app/shared/styles/form.scss

@@ -0,0 +1,3 @@
+.form-check-label {
+  margin-left: $spacer;
+}

src/app/shared/styles/icons.scss

@@ -0,0 +1,3 @@
+.material-icons {
+  font-size: 2.2rem;
+}

src/app/shared/styles/typography.scss

@@ -0,0 +1,25 @@
+/**
+ * Here are the font sizes as present in the Evento application,
+ * where this app will be embedded in. We use the same – rather obscure –
+ * setup to match this production environment. We also set bootstrap's
+ * `$font-size-base` to 1.5rem for the calculations to be correct.
+ */
+html#erz-absenzenmanagement-dev {
+  font-size: 11px;
+}
+#erz-absenzenmanagement-dev body {
+  font-size: 1.5rem;
+}
+
+/**
+ * In the Evento application there is a global CSS rule to disable link
+ * underlines, we apply this for our development environment as well
+ * to match production.
+ */
+#erz-absenzenmanagement-dev {
+  a,
+  a:hover,
+  a:active {
+    text-decoration: none;
+  }
+}

src/bootstrap-variables.scss

@@ -13,21 +13,24 @@ $blue: #005189;
 $primary: $blue;
 $secondary: $gray;
 
-// font
-$font-family-sans-serif: "Open Sans", sans-serif;
-
 $present-color: #28a745;
 $absent-color: #dc3545;
 $late-color: $yellow;
 
+// Font
+$font-family-sans-serif: "Open Sans", sans-serif;
+$font-size-base: 1.5rem; // See app/shared/styles/typography.scss
+
+// Spacing
+$spacer: 1.5rem; // Compensate for the base font
+
 @import "node_modules/bootstrap/scss/variables";
 
 // Tables
 $table-head-bg: $table-border-color;
 $table-head-color: $gray-600;
 
 // Custom variables
-$erz-container-max-width: 600px;
 $erz-container-padding-x: $spacer;
 $erz-container-padding-y: $spacer;
 

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" id="erz-absenzenmanagement-dev">
   <head>
     <meta charset="utf-8" />
     <title>Absenzenmanagement</title>

src/styles.scss

@@ -10,5 +10,9 @@
 @import "~ngx-toastr/toastr-bs4-alert";
 
 // Shared application styles
+@import "src/app/shared/styles/typography";
 @import "src/app/shared/styles/container";
 @import "src/app/shared/styles/table";
+@import "src/app/shared/styles/form";
+@import "src/app/shared/styles/datepicker";
+@import "src/app/shared/styles/icons";