Changed units from vw/vh to percentage

src/EngagementOrganizer.SPA/src/app/app.component.scss

@@ -14,4 +14,9 @@
 
 *{
     font-family: "Segoe UI";
+}
+
+.theme-wrapper{
+    height: 100%;
+    margin: 0 1% 0 1%;
 }

src/EngagementOrganizer.SPA/src/app/calendar/calendar.component.html

@@ -1,4 +1,4 @@
-<div class="calendar-container">
+<div class="calendar-box">
   <div class="header">
     <div class="year-header">
       {{currentYear}}

src/EngagementOrganizer.SPA/src/app/calendar/calendar.component.scss

@@ -4,8 +4,10 @@
     height: $row-header-height;
 }
 
-.calendar-container{
+.calendar-box{
     display: inline-block;
+    height: 100% !important;
+    width: 100%;
 }
 
 .year-header{
@@ -63,7 +65,7 @@
     padding: 0vw 0vw 0vw 0vw;
     vertical-align: top;
     width:$day-width;
-    height: $row-height;
+    height: 100%;
     display: inline-block;
     text-align: center;
     border: $cell-border-size solid var(--calendarCellBorderColor);
@@ -83,19 +85,19 @@
 .month-header{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.95vw;
-   line-height: $row-height;
    border: $cell-border-size solid var(--calendarCellBorderColor);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    width:$year-month-col-width;
-   height: $row-height;
+   height: 100%;
    background-color: var(--calendarMonthHeaderColor);
    color:var(--calendarMonthHeaderTextColor);
-   display: inline-block;
-   text-align: center;
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
 }
 
 .day-label{
@@ -128,15 +130,16 @@
     vertical-align: top;
     padding: 0;
     width:$util-width;
-    height: $row-height;
+    height: 100%;
     font-size: $util-font-size;
     display: inline-block;
     border: $cell-border-size solid var(--calendarCellBorderColor);
     box-sizing: border-box;
     text-align: center;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    overflow: hidden;
     background-color: var(--calendarUtilsColor);
     color: var(--calendarUtilsTextColor);
-    line-height: $row-height;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }

src/EngagementOrganizer.SPA/src/app/customer-view/customer-view.component.html

@@ -1,8 +1,10 @@
-<div *ngFor="let cus of customers" [ngStyle]="getCustomerStyle(cus)" class="customer-tile">
+<div *ngFor="let cus of getCustomersWithAppointmentInYear()" [ngStyle]="getCustomerStyle(cus)" class="customer-tile">
     <div>
         <b>({{cus.shortDescription}}) - {{cus.name}}</b>
-        <div class="action-customer"><button (click)="customerSelectedForEdit.emit(cus)" mat-raised-button color="basic">EDIT</button>
+        <div class="action-customer"><button (click)="customerSelectedForEdit.emit(cus)" mat-raised-button
+                color="basic">EDIT</button>
         </div>
     </div>
     <span [innerHTML]="getCustomerSummary(cus)"></span>
-</div>
+</div>
+<div *ngIf="getCustomersWithAppointmentInYear()?.length==0">No customer's appointments for the selcted year</div>

src/EngagementOrganizer.SPA/src/app/customer-view/customer-view.component.ts

@@ -31,6 +31,11 @@ export class CustomerViewComponent implements OnInit {
   ngOnInit() {
   }
 
+  getCustomersWithAppointmentInYear() {
+    if (this.customers) {
+      return this.customers.filter(x => this.getCountEventsBySelectedYearAndCustomer(x.id) > 0);
+    }
+  }
 
   getCustomerStyle(cus: Customer) {
     let style = {
@@ -67,6 +72,10 @@ export class CustomerViewComponent implements OnInit {
     return ris;
   }
 
+  getCountEventsBySelectedYearAndCustomer(customerId: number) {
+    return this.appointments.filter(x => x.customerID == customerId && new Date(x.startDate.toString()).getFullYear() == this.selectedYear).length;
+  }
+
   getEventsByDateAndCustomer(date: Date, customerId: number): Array<Appointment> {
     var ris: Array<Appointment> = [];
     if (date != null) {

src/EngagementOrganizer.SPA/src/app/customer/customer.component.html

@@ -26,12 +26,14 @@
           placeholder="Color"></mat-form-field>&nbsp;
       <mat-form-field class="color"><input type="text" [(ngModel)]="currentCustomer.textColor" maxlength="7" matInput
           placeholder="Text"></mat-form-field>&nbsp;
-      <mat-form-field class="project-color"><input type="text" [(ngModel)]="currentCustomer.projectColors" maxlength="50" matInput
-          placeholder="Project color"></mat-form-field>&nbsp;
+      <mat-form-field class="project-color"><input type="text" [(ngModel)]="currentCustomer.projectColors"
+          maxlength="50" matInput placeholder="Project color"></mat-form-field>&nbsp;
       <button (click)="saveCustomer()" mat-raised-button color="primary">SAVE</button>&nbsp;
       <button (click)="cancelEditCustomer()" mat-raised-button color="primary">CANCEL</button>
     </div>
   </div>
 </div>
-<app-customer-view [customers]="customers" [appointments]="appointments" [selectedYear]="selectedYear"
-  [filterProject]="filterProject" (customerSelectedForEdit)="editCustomer($event)"></app-customer-view>
+<div class="customer-list">
+  <app-customer-view [customers]="customers" [appointments]="appointments" [selectedYear]="selectedYear"
+    [filterProject]="filterProject" (customerSelectedForEdit)="editCustomer($event)"></app-customer-view>
+</div>

src/EngagementOrganizer.SPA/src/app/customer/customer.component.scss

@@ -19,6 +19,12 @@
 }
 
 .header{
-    height: 65px;
-    padding: 0px 10px 0px 10px;
+    height: 7%;
+    padding: 0px 0px;
+    overflow: hidden;
+}
+
+.customer-list{
+    height: 90%;
+    overflow-y: auto;
 }

src/EngagementOrganizer.SPA/src/app/event-viewer/event-viewer.component.scss

@@ -5,10 +5,11 @@
     width: 100%;
     font-size: $event-font-size;
     height: $event-height;
-    line-height: $event-height;
-    display:inline-block;
     float: left;
     font-family: 'Segoe UI';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .event:hover{

src/EngagementOrganizer.SPA/src/app/home/home.component.html

@@ -22,6 +22,6 @@
     </div>
 </div>
 <div class="calendar-container">
-    <app-calendar [currentYear]="selectedYear" [filterProject]="filterProject" [appointments]="appointments"
+    <app-calendar  class="calendar-app" [currentYear]="selectedYear" [filterProject]="filterProject" [appointments]="appointments"
         (daySelected)="calendarDaySelected($event)" (eventSelected)="calendarEventSelcted($event)"></app-calendar>
 </div>

src/EngagementOrganizer.SPA/src/app/home/home.component.scss

@@ -1,12 +1,18 @@
 .calendar-container{
     text-align: center;
+    height: 91%;
 }
 
 .header{
-    height: 65px;
-    padding: 0px 10px 0px 10px;
+    height: 6%;
+    padding: 0px 0px;
+    overflow: hidden;
 }
 
 .calendar-option{
     float:right;
+}
+
+.calendar-app{
+    height: 45%;
 }

src/EngagementOrganizer.SPA/src/app/variable.scss

@@ -1,14 +1,13 @@
 $event-font-size:1.4vh;
-$event-height:2.6vh;
+$event-height:37.6%;
 $header-font-size:1.0vw;
 $month-font-size:1.05vw;
 $day-label-font-size:1.6vh;
 $day-label-height:1.7vh;
 $row-header-height:4vh;
-$row-height:7vh;
-$util-width: 2.6vw;
+$row-height:7.6%;
+$util-width: 3%;
 $util-font-size:1.1vw;
 $cell-border-size:0.5px;
-$year-month-col-width:2.7vw;
-$calendar-margin-width:0.5vw;
-$day-width:((100vw - $year-month-col-width - $util-width - ($calendar-margin-width * 2))/37);
+$year-month-col-width:3%;
+$day-width:((100% - $year-month-col-width - $util-width)/37);

src/EngagementOrganizer.SPA/src/styles.scss

@@ -1,8 +1,10 @@
 
-body
+body,html
 {
     margin: 0;
     font-family: 'Segoe UI';
+    height: 100%;
+    overflow: hidden;
 }
 
 .year-box{