Styling update

- add title - center header - limit card width - change column order - show absent input only for working days - use dense style for absent input
saxicek · Sep 22, 2024 · ea819a9 · ea819a9
1 parent d3fa7f1
commit ea819a9
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,6 +9,12 @@ import {FormComponent} from "./form/form.component";
     <h1>Generátor docházky</h1>
     <app-form></app-form>
   `,
+  styles: `
+  h1 {
+    text-align: center;
+    margin-top: 2rem;
+  }
+  `
 })
 export class AppComponent {
   title = 'attendance-generator';

diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="attendanceForm" novalidate (ngSubmit)="onSubmit()">
-  <mat-card class="shipping-card">
+  <mat-card class="shipping-card" [style.max-width.px]="1000">
     <mat-card-header>
       <mat-card-title>Počet dní v měsíci: {{dayCount}}</mat-card-title>
     </mat-card-header>
@@ -48,24 +48,28 @@
 
         <!-- Customize Column -->
         <ng-container matColumnDef="customize">
-          <th mat-header-cell *matHeaderCellDef></th>
+          <th mat-header-cell *matHeaderCellDef matTooltip="víkend/svátek/dovolená">Víkend</th>
           <td mat-cell *matCellDef="let e">
-            <mat-checkbox [checked]="!e.working" (change)="switchHoliday(e.day)"  matTooltip="dovolená/víkend">
+            <mat-checkbox [checked]="!e.working" (change)="switchHoliday(e.day)" matTooltip="víkend/svátek/dovolená">
             </mat-checkbox></td>
         </ng-container>
 
         <!-- Absent Column -->
         <ng-container matColumnDef="absent">
-          <th mat-header-cell *matHeaderCellDef></th>
+          <th mat-header-cell *matHeaderCellDef>Absence</th>
           <td mat-cell *matCellDef="let e; let i=index">
-            <input matInput type="number" [formControl]="getControl(i, 'absent')" matTooltip="absence (hodin)" class="day-absence">
+            @if (e.working) {
+              <mat-form-field subscriptSizing="dynamic" matTooltip="Absence (hodin)" [style.width.rem]="4">
+                <input matInput type="number" [formControl]="getControl(i, 'absent')" class="day-absence">
+              </mat-form-field>
+            }
           </td>
         </ng-container>
 
         <!-- Day Column -->
         <ng-container matColumnDef="day">
           <th mat-header-cell *matHeaderCellDef> Den </th>
-          <td mat-cell *matCellDef="let e"> {{e.day}} </td>
+          <td mat-cell *matCellDef="let e"> {{e.day}}. </td>
         </ng-container>
 
         <!-- Morning Start Column -->

diff --git a/src/app/form/form.component.css → src/app/form/form.component.scss b/src/app/form/form.component.css → src/app/form/form.component.scss
@@ -1,3 +1,9 @@
+@use '@angular/material' as mat;
+
+table {
+  @include mat.form-field-density(-5);
+}
+
 .full-width {
   width: 100%;
 }

diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
@@ -44,7 +44,7 @@ interface AttendanceDay {
 @Component({
   selector: 'app-form',
   templateUrl: './form.component.html',
-  styleUrl: './form.component.css',
+  styleUrl: './form.component.scss',
   standalone: true,
   imports: [
     MatInputModule,
@@ -79,9 +79,9 @@ export class FormComponent implements OnInit {
   readonly dayStart = 8 * 60;
 
   displayedColumns: string[] = [
+    'day',
     'customize',
     'absent',
-    'day',
     'morningStart',
     'afternoonEnd',
     'morningEnd',

diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AttendanceGenerator</title>
+  <title>Generátor docházky</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">