rschneider/fitness-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gui: improve timetable

Browse Source
This commit is contained in:
Roland Schneider 2021-09-17 08:21:55 +02:00
parent 65fa335a7b
commit fe2f0766e3
11 changed files with 112 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,21 @@
<h5 class="row align-items-center">
<span class="date col-1">{{getDateOfDay()}}</span>
<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()">
<ng-container *ngIf="day.active">
<div class="bg-white border h-100 p-2 ">
<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>

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

@ -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;
}
}

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

@ -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";
if ( !this.day.active ){
styleClass += " d-none d-sm-inline-block bg-light text-muted";
} else {
styleClass += " bg-primary text-light"
}
let styleClass = "day text-truncate";
// if ( !this.day.active ){
// styleClass += " d-none d-md-block bg-light text-muted";
// } else {
// styleClass += " bg-light "
// }
return styleClass;
}

17
customer/app/src/app/components/month-calendar/month-calendar.component.html
View File

@ -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>

25
customer/app/src/app/components/month-calendar/month-calendar.component.scss
View File

@ -1,22 +1,11 @@
@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: 4px;
}
}
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@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;
}

3
customer/app/src/app/components/month-calendar/month-calendar.component.ts
View File

@ -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) {

4
customer/app/src/app/layout/guest-layout/guest-layout.component.scss
View File

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

BIN
customer/app/src/assets/fonts/RobotoMono-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
customer/app/src/assets/fonts/dcc_sharp_distress_black_by_dccanim.otf Normal file
View File

Binary file not shown.

13
customer/app/src/styles.scss
View File

@ -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;
}

51
customer/app/src/styles/fonts.scss Normal file
View File

@ -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;
}