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

improve timetable boxes

Browse Source
This commit is contained in:
Roland Schneider 2021-09-30 11:06:34 +02:00
parent 84dda1abe5
commit 660dca2ca6
2 changed files with 108 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,75 @@
<!--
display: flex;
flex-direction: row;
height: auto;
background-color: green;
padding: 5px;
border-radius: 10px;
margin-bottom: 5px;
-->
<div
(click)="selectEvent()"
class="event d-block p-1 px-2 mb-2 border-radius-1 text-truncate small text-white " title="Test Event 2"
class="event d-flex flex-direction-row py-1 px-1 mb-2 border-radius-1 small text-white "
title="Test Event 2"
[class.bg-dark]="maySelect()"
[class.bg-primary]="isRegistered()"
[class.bg-secondary]="isDisabled()"
>
<div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
<div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
<ng-container *ngIf="hasTrainer()">
<div class="app-font-size-sm app-font-weight-normal">{{formatTrainer()}}</div>
</ng-container>
<!-- .event-bar-container {-->
<!-- flex: 0 0 10px;-->
<!-- display: flex;-->
<!-- }-->
<!-- .event-bar{-->
<!-- margin-top: 3px;-->
<!-- margin-bottom: 3px;-->
<!-- background-color: blue;-->
<!-- flex-grow: 1;-->
<!-- flex-shrink: 1;-->
<!-- }-->
<div class=" event-bar-container flex-grow-0 flex-shrink-0 d-flex" style="flex-basis: 10px;">
<div class="event-bar flex-grow-1 flex-shrink-1 my-1 border-radius-1 " style=" background-color: var(--bs-blue)"></div>
</div>
<!-- -->
<!-- .event-info-container {-->
<!-- flex: 1;-->
<!-- overflow: hidden;-->
<!-- }-->
<!-- .event-info {-->
<!-- padding: 3px;-->
<!-- margin-top: 3px;-->
<!-- margin-bottom: 3px;-->
<!-- background-color: grey;-->
<!-- word-break: break-word;-->
<!-- white-space: pre-wrap;-->
<!-- margin-left: 5px;-->
<!-- }-->
<div class="event-info-container flex-grow-1 flex-shrink-1 " style="flex-basis: 0;" >
<div class="event-info ms-1" style="white-space: pre-wrap">
<div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
<div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
<ng-container *ngIf="hasTrainer()">
<div class="app-font-size-sm app-font-weight-normal " style="max-width: 100%; word-break: break-word">{{formatTrainer()}} very long name</div>
</ng-container>
</div>
</div>
</div>
<!--<div class="event2">-->
<!-- <div class="event-bar-container ">-->
<!-- <div class="event-bar "></div>-->
<!-- </div>-->
<!-- <div class="event-info-container">-->
<!-- <div class="event-info ">-->
<!-- <div>info1</div>-->
<!-- <div>info2</div>-->
<!-- <div>info3</div>-->
<!-- <div >very long information displayed here</div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->

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

@ -0,0 +1,40 @@
//.event2{
// display: flex;
// flex-direction: row;
// height: auto;
// background-color: green;
// padding: 5px;
// border-radius: 10px;
// margin-bottom: 5px;
//
// .event-bar-container {
// flex: 0 0 10px;
// display: flex;
// }
//
// .event-bar{
// margin-top: 3px;
// margin-bottom: 3px;
// background-color: blue;
// flex-grow: 1;
// flex-shrink: 1;
// }
//
// .event-info-container {
// flex: 1;
// overflow: hidden;
// }
//
// .event-info {
// padding: 3px;
// margin-top: 3px;
// margin-bottom: 3px;
// background-color: grey;
// word-break: break-word;
// white-space: pre-wrap;
// margin-left: 5px;
//
// }
//
//}