From 1ce3c599c7f9582c1f61f323d39c1933f99fb9cf Mon Sep 17 00:00:00 2001
From: Mathis Hofer <hofer@puzzle.ch>
Date: Wed, 6 May 2020 13:47:31 +0200
Subject: [PATCH] Set base font size as in production, compensate sizes #146
 #160

---
 .../edit-absences-header.component.scss       |  9 +++----
 .../evaluate-absences-header.component.scss   |  9 +++----
 src/app/home.component.ts                     |  2 +-
 .../presence-control-entry.component.html     |  4 +--
 .../presence-control-entry.component.scss     | 21 +++++-----------
 .../components/spinner/spinner.component.scss |  4 +--
 src/app/shared/styles/container.scss          |  9 -------
 src/app/shared/styles/datepicker.scss         | 22 ++++++++++++++++
 src/app/shared/styles/form.scss               |  3 +++
 src/app/shared/styles/icons.scss              |  3 +++
 src/app/shared/styles/typography.scss         | 25 +++++++++++++++++++
 src/bootstrap-variables.scss                  | 11 +++++---
 src/index.html                                |  2 +-
 src/styles.scss                               |  4 +++
 14 files changed, 81 insertions(+), 47 deletions(-)
 create mode 100644 src/app/shared/styles/datepicker.scss
 create mode 100644 src/app/shared/styles/form.scss
 create mode 100644 src/app/shared/styles/icons.scss
 create mode 100644 src/app/shared/styles/typography.scss

diff --git a/src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss b/src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss
index 0e1452e9a..c0d5a5038 100644
--- a/src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss
+++ b/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;
 }
 
diff --git a/src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss b/src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss
index 0e1452e9a..c0d5a5038 100644
--- a/src/app/evaluate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss
+++ b/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;
 }
 
diff --git a/src/app/home.component.ts b/src/app/home.component.ts
index cbaa71682..9f3671a69 100644
--- a/src/app/home.component.ts
+++ b/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">
diff --git a/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.html b/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.html
index 8ae90feea..aaf773d3a 100644
--- a/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.html
+++ b/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
diff --git a/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss b/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss
index 4eac498f6..5ae5ec384 100644
--- a/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss
+++ b/src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss
@@ -52,17 +52,18 @@ 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 {
@@ -70,22 +71,12 @@ a.comment,
   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
   }
 }
 
diff --git a/src/app/shared/components/spinner/spinner.component.scss b/src/app/shared/components/spinner/spinner.component.scss
index 1d30c66cd..8ddbb4253 100644
--- a/src/app/shared/components/spinner/spinner.component.scss
+++ b/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;
   }
diff --git a/src/app/shared/styles/container.scss b/src/app/shared/styles/container.scss
index f8a73f36c..e2508fe13 100644
--- a/src/app/shared/styles/container.scss
+++ b/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;
-}
diff --git a/src/app/shared/styles/datepicker.scss b/src/app/shared/styles/datepicker.scss
new file mode 100644
index 000000000..d0779a31e
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/shared/styles/form.scss b/src/app/shared/styles/form.scss
new file mode 100644
index 000000000..f395806ae
--- /dev/null
+++ b/src/app/shared/styles/form.scss
@@ -0,0 +1,3 @@
+.form-check-label {
+  margin-left: $spacer;
+}
diff --git a/src/app/shared/styles/icons.scss b/src/app/shared/styles/icons.scss
new file mode 100644
index 000000000..1278ca457
--- /dev/null
+++ b/src/app/shared/styles/icons.scss
@@ -0,0 +1,3 @@
+.material-icons {
+  font-size: 2.2rem;
+}
diff --git a/src/app/shared/styles/typography.scss b/src/app/shared/styles/typography.scss
new file mode 100644
index 000000000..58efbd5b8
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/bootstrap-variables.scss b/src/bootstrap-variables.scss
index a201ece47..ec504b758 100644
--- a/src/bootstrap-variables.scss
+++ b/src/bootstrap-variables.scss
@@ -13,13 +13,17 @@ $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
@@ -27,7 +31,6 @@ $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;
 
diff --git a/src/index.html b/src/index.html
index 358022a24..ee860c52b 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/styles.scss b/src/styles.scss
index 417b6ce1f..56918fcb2 100644
--- a/src/styles.scss
+++ b/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";