gui: improve timetable

customer/app/src/app/components/month-calendar-day/month-calendar-day.component.html

@@ -1,15 +1,21 @@
-<h5 class="row align-items-center">
+<ng-container *ngIf="day.active">
-  <span class="date col-1">{{getDateOfDay()}}</span>
+  <div class="bg-white border h-100 p-2 ">
-  <small class="col d-sm-none text-center text-muted">{{getDayOfWeekName()}}</small>
-  <span class="col-1"></span>
-</h5>
-<p  *ngIf="!hasEvents()" class="d-sm-none">No events</p>
-<ng-container *ngIf="hasEvents()">
-
-  <app-month-calendar-event
-    *ngFor="let event of day.events"
-    [event]="event"
-    (onEvent)="handleEvent($event)"
-  ></app-month-calendar-event>
 
+    <div class="row">
+      <div class="col-12 d-block d-md-none d-lg-block">{{getMonthOfDay()}}.{{getDateOfDay()}}</div>
+      <div class="col-12 d-none d-md-block d-lg-none">{{getMonthOfDay()}}.</div>
+      <div class="col-12 d-none d-md-block d-lg-none">{{getDateOfDay()}}</div>
+      <div class="col-12">
+        <span class=" d-md-none text-center text-muted">{{getDayOfWeekName()}}</span>
+      </div>
+      <div *ngIf="!hasEvents()" class="col-12  text-wrap">-</div>
+    </div>
+    <ng-container *ngIf="hasEvents()">
+      <app-month-calendar-event
+        *ngFor="let event of day.events"
+        [event]="event"
+        (onEvent)="handleEvent($event)"
+      ></app-month-calendar-event>
+    </ng-container>
+  </div>
 </ng-container>

customer/app/src/app/components/month-calendar-day/month-calendar-day.component.scss

@@ -1,20 +0,0 @@
-@media (max-width:575px) {
-  .display-4 {
-    font-size: 1.5rem;
-  }
-  .day h5 {
-    background-color: #f8f9fa;
-    padding: 3px 5px 5px;
-    margin: -8px -8px 8px -8px;
-  }
-  .date {
-    padding-left: 16px;
-  }
-}
-
-@media (min-width: 576px) {
-  .day {
-    min-height: 14.2857vw;
-  }
-}
-

customer/app/src/app/components/month-calendar-day/month-calendar-day.component.ts

@@ -33,17 +33,21 @@ export class MonthCalendarDayComponent implements OnInit {
     return this.oMoment.format('DD');
   }
 
+  getMonthOfDay(){
+    return this.oMoment.format('MMM');
+  }
+
   hasEvents(){
     return this.day.active && this.day.events && this.day.events.length;
   }
 
   @HostBinding('class') get styleClass(){
-    let styleClass = "day col-sm p-2 border border-left-0 border-top-0 text-truncate";
+    let styleClass = "day   text-truncate";
-    if ( !this.day.active ){
+    // if ( !this.day.active ){
-      styleClass += " d-none d-sm-inline-block bg-light text-muted";
+    //   styleClass += " d-none d-md-block bg-light text-muted";
-    } else {
+    // } else {
-      styleClass += " bg-primary text-light"
+    //   styleClass += " bg-light "
-    }
+    // }
     return styleClass;
   }
 

customer/app/src/app/components/month-calendar/month-calendar.component.html

@@ -1,14 +1,17 @@
-<div class="container-fluid">
   <header>
     <h1 class="text-center">Naptár</h1>
-    <div class="row d-none d-sm-flex p-1 bg-primary text-white">
-      <h5 *ngFor="let dayOfWeek of daysOfWeek" class="col-sm p-1 text-center name-of-day-of-week">{{dayOfWeek.name}}</h5>
-    </div>
   </header>
-  <div *ngIf="eventsAvailableResponse" class="row border border-right-0 border-bottom-0 mb-4">
+    <div class="row  text-white gx-2 d-none d-md-flex">
+      <div *ngFor="let dayOfWeek of daysOfWeek" class="col mb-2">
+        <div class="border bg-primary text-center py-1 px-2">
+          <span class="d-none d-lg-inline text-capitalize">{{dayOfWeek.name}}</span>
+          <span class="d-none d-md-inline d-lg-none text-capitalize" >{{dayOfWeek.shortName}}</span>
+        </div>
+      </div> <!--  text-center name-of-day-of-week bg-primary-->
+    </div>
+  <div *ngIf="eventsAvailableResponse" class="row   mb-4 gx-2">
     <ng-container *ngFor="let day of eventsAvailableResponse.dates;  let i = index">
-      <div app-month-calendar-day   [day]="day" (onEvent)="handleEvent($event)"  ></div>
+      <div app-month-calendar-day  class="col-12 col-md mb-2 d-md-block"  [class.d-none]="!day.active"  [day]="day" (onEvent)="handleEvent($event)"  ></div>
       <div *ngIf="i > 0 && ( ((i+1) % 7) == 0)" class="w-100"></div>
     </ng-container>
   </div>
-</div>

customer/app/src/app/components/month-calendar/month-calendar.component.scss

@@ -1,22 +1,11 @@
-@media (max-width:575px) {
+@import "node_modules/bootstrap/scss/functions";
-  .display-4 {
+@import "node_modules/bootstrap/scss/variables";
-    font-size: 1.5rem;
+@import "node_modules/bootstrap/scss/mixins";
-  }
-  .day h5 {
-    background-color: #f8f9fa;
-    padding: 3px 5px 5px;
-    margin: -8px -8px 8px -8px;
-  }
-  .date {
-    padding-left: 4px;
-  }
-}
 
-@media (min-width: 576px) {
+
+
+@include media-breakpoint-up(md) {
   .day {
-    min-height: 14.2857vw;
+    min-height: 20vh;
   }
 }
-.name-of-day-of-week{
-  text-transform: capitalize;
-}

customer/app/src/app/components/month-calendar/month-calendar.component.ts

@@ -37,6 +37,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges {
         const date = moment.unix(this.eventsAvailableResponse.dates[i].date);
         const dayOfWeek = {
           name: date.format("dddd"),
+          shortName: date.format("ddd"),
         };
         this.daysOfWeek.push(dayOfWeek);
       }
@@ -46,6 +47,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges {
         let momWeekDay = startOfWeek.clone().add(i,'d');
         const dayOfWeek = {
           name: momWeekDay.format("dddd"),
+          shortName: momWeekDay.format("ddd"),
         };
         this.daysOfWeek.push(dayOfWeek);
       }
@@ -72,6 +74,7 @@ export interface Day {
 
 export interface DayOfWeek {
   name: string;
+  shortName: string;
 }
 
 export function dateToMoment(date: number) {

customer/app/src/app/layout/guest-layout/guest-layout.component.scss

@@ -1,4 +0,0 @@
-div{
-  background: url("/assets/images/cutlercross-background.jpg");
-  background-repeat: repeat-y;
-}

customer/app/src/styles.scss

@@ -7,15 +7,24 @@ $font-size-md: 1.25rem;
 $font-size-lg: 2.5rem;
 $font-size-xl: 6.25rem;
 
+// font weight
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+
 $primary:       #E3000E ;
 $secondary:     #D2D2D2 ;
 $light:         #FFFFFF ;
 $dark:          #3A3A39 ;
 
+// bootstrap font override
+$font-family-sans-serif:     Roboto, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ;
+
 // regular style toast
 @import '~ngx-toastr/toastr';
 @import "styles/bootstrap-custom";
-
+@import "styles/fonts";
 html{
   height: 100%;
 }
@@ -23,5 +32,7 @@ html{
 body{
   min-height: 100%;
   height: 100%;
+  background: url("/assets/images/cutlercross-background.jpg");
+  background-repeat: repeat-y;
 }
 

customer/app/src/styles/fonts.scss

@@ -0,0 +1,51 @@
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
+  //font-weight: $font-weight-normal;
+  //font-style: normal;
+}
+
+@font-face {
+  font-family: "dcc";
+  src: url("/assets/fonts/dcc_sharp_distress_black_by_dccanim.otf") format("truetype");
+  //font-weight: $font-weight-normal;
+  //font-style: normal;
+}
+
+
+.app-font-size-xs{
+  font-size: $font-size-xs !important;
+}
+
+.app-font-size-sm{
+  font-size: $font-size-sm !important;
+}
+
+.app-font-size-md{
+  font-size: $font-size-md !important;
+}
+
+.app-font-size-lg{
+  font-size: $font-size-lg !important;
+}
+
+.app-font-size-xl{
+  font-size: $font-size-xl !important;
+}
+
+.app-font-weight-normal {
+  font-weight: $font-weight-normal;
+}
+
+.app-font-weight-medium {
+  font-weight: $font-weight-medium;
+}
+
+.app-font-weight-semi-bold {
+  font-weight: $font-weight-semi-bold;
+}
+
+.app-font-weight-bold {
+  font-weight: $font-weight-bold;
+}