|
|
@ -39,7 +39,7 @@ import { Entry } from "../core/models"; |
|
|
<mat-progress-bar mode="indeterminate" /> |
|
|
<mat-progress-bar mode="indeterminate" /> |
|
|
} |
|
|
} |
|
|
<mat-card class="calendar" |
|
|
<mat-card class="calendar" |
|
|
><div class="weekdays"> |
|
|
|
|
|
|
|
|
><div class="weekdays" aria-hidden="true"> |
|
|
@for (d of weekdays; track d) { |
|
|
@for (d of weekdays; track d) { |
|
|
<strong>{{ d }}</strong> |
|
|
<strong>{{ d }}</strong> |
|
|
} |
|
|
} |
|
|
@ -61,7 +61,7 @@ import { Entry } from "../core/models"; |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
@for (e of forDay(day.key); track e.id) { |
|
|
@for (e of forDay(day.key); track e.id) { |
|
|
<a class="event" [class]="'event ' + typeClass(e.praktikums_typ)" [routerLink]="['/entries', e.id, 'edit']" |
|
|
|
|
|
|
|
|
<a class="event" [class]="'event ' + typeClass(e.praktikums_typ)" [routerLink]="['/entries', e.id, 'edit']" [attr.aria-label]="e.entry_art + ', ' + e.hours + ' Stunden ' + e.minutes + ' Minuten'" |
|
|
><strong>{{ e.entry_art }}</strong |
|
|
><strong>{{ e.entry_art }}</strong |
|
|
><span>{{ e.hours }}h {{ e.minutes }}min</span></a |
|
|
><span>{{ e.hours }}h {{ e.minutes }}min</span></a |
|
|
> |
|
|
> |
|
|
@ -75,6 +75,7 @@ import { Entry } from "../core/models"; |
|
|
`
|
|
|
`
|
|
|
.calendar { |
|
|
.calendar { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
min-width: 0; |
|
|
} |
|
|
} |
|
|
.calendar-filters { margin-bottom:18px; } |
|
|
.calendar-filters { margin-bottom:18px; } |
|
|
.calendar-filters mat-card-content { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:0; } |
|
|
.calendar-filters mat-card-content { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:0; } |
|
|
@ -83,7 +84,8 @@ import { Entry } from "../core/models"; |
|
|
.weekdays, |
|
|
.weekdays, |
|
|
.days { |
|
|
.days { |
|
|
display: grid; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(7, 1fr); |
|
|
|
|
|
|
|
|
grid-template-columns: repeat(7, minmax(0, 1fr)); |
|
|
|
|
|
min-width: 0; |
|
|
} |
|
|
} |
|
|
.weekdays { |
|
|
.weekdays { |
|
|
padding: 14px; |
|
|
padding: 14px; |
|
|
@ -93,9 +95,11 @@ import { Entry } from "../core/models"; |
|
|
} |
|
|
} |
|
|
.day { |
|
|
.day { |
|
|
min-height: 145px; |
|
|
min-height: 145px; |
|
|
|
|
|
min-width: 0; |
|
|
padding: 8px; |
|
|
padding: 8px; |
|
|
border-top: 1px solid #e1e6ef; |
|
|
border-top: 1px solid #e1e6ef; |
|
|
border-right: 1px solid #e1e6ef; |
|
|
border-right: 1px solid #e1e6ef; |
|
|
|
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
.day-head { |
|
|
.day-head { |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -123,6 +127,10 @@ import { Entry } from "../core/models"; |
|
|
.event { |
|
|
.event { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
min-width: 0; |
|
|
|
|
|
max-width: 100%; |
|
|
|
|
|
overflow: hidden; |
|
|
text-decoration: none; |
|
|
text-decoration: none; |
|
|
color: inherit; |
|
|
color: inherit; |
|
|
background: #dce9ff; |
|
|
background: #dce9ff; |
|
|
@ -136,10 +144,29 @@ import { Entry } from "../core/models"; |
|
|
opacity: 0.75; |
|
|
opacity: 0.75; |
|
|
margin-top: 2px; |
|
|
margin-top: 2px; |
|
|
} |
|
|
} |
|
|
|
|
|
.event strong, |
|
|
|
|
|
.event span { |
|
|
|
|
|
display: block; |
|
|
|
|
|
min-width: 0; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
} |
|
|
.event.type-propaedeutikum { background:rgba(13,110,253,.14);border-left-color:#0d6efd; } |
|
|
.event.type-propaedeutikum { background:rgba(13,110,253,.14);border-left-color:#0d6efd; } |
|
|
.event.type-fachspezifikum { background:rgba(25,135,84,.14);border-left-color:#198754; } |
|
|
.event.type-fachspezifikum { background:rgba(25,135,84,.14);border-left-color:#198754; } |
|
|
.event.type-mediation { background:rgba(253,126,20,.16);border-left-color:#fd7e14; } |
|
|
.event.type-mediation { background:rgba(253,126,20,.16);border-left-color:#fd7e14; } |
|
|
@media (max-width: 700px) { |
|
|
@media (max-width: 700px) { |
|
|
|
|
|
.calendar-filters mat-card-content { |
|
|
|
|
|
gap: 8px; |
|
|
|
|
|
padding: 12px 12px 0; |
|
|
|
|
|
} |
|
|
|
|
|
.calendar-filters mat-form-field { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
min-width: 0; |
|
|
|
|
|
} |
|
|
|
|
|
.weekdays { |
|
|
|
|
|
padding: 9px 0; |
|
|
|
|
|
} |
|
|
.weekdays strong { |
|
|
.weekdays strong { |
|
|
font-size: 0; |
|
|
font-size: 0; |
|
|
} |
|
|
} |
|
|
@ -147,17 +174,63 @@ import { Entry } from "../core/models"; |
|
|
font-size: 13px; |
|
|
font-size: 13px; |
|
|
} |
|
|
} |
|
|
.day { |
|
|
.day { |
|
|
min-height: 90px; |
|
|
|
|
|
padding: 4px; |
|
|
|
|
|
|
|
|
min-height: 92px; |
|
|
|
|
|
padding: 4px 3px; |
|
|
} |
|
|
} |
|
|
.event strong { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
|
|
|
.day-head a { |
|
|
|
|
|
width: 30px; |
|
|
|
|
|
height: 30px; |
|
|
|
|
|
padding: 3px; |
|
|
|
|
|
transform: none; |
|
|
|
|
|
} |
|
|
|
|
|
.day-head mat-icon { |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
line-height: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
.event { |
|
|
|
|
|
padding: 4px; |
|
|
|
|
|
border-left-width: 2px; |
|
|
|
|
|
font-size: 11px; |
|
|
} |
|
|
} |
|
|
.event span { |
|
|
.event span { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
|
|
|
.weekdays strong:first-letter { |
|
|
|
|
|
font-size: 11px; |
|
|
|
|
|
} |
|
|
|
|
|
.day { |
|
|
|
|
|
min-height: 78px; |
|
|
|
|
|
padding: 3px 2px; |
|
|
|
|
|
} |
|
|
|
|
|
.day-head { |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
.day-head a { |
|
|
|
|
|
width: 24px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
padding: 2px; |
|
|
|
|
|
} |
|
|
|
|
|
.day-head mat-icon { |
|
|
|
|
|
width: 18px; |
|
|
|
|
|
height: 18px; |
|
|
|
|
|
font-size: 18px; |
|
|
|
|
|
line-height: 18px; |
|
|
|
|
|
} |
|
|
|
|
|
.today .day-head > span { |
|
|
|
|
|
width: 24px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
} |
|
|
|
|
|
.event { |
|
|
|
|
|
margin: 3px 0; |
|
|
|
|
|
padding: 3px 2px; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
font-size: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
`,
|
|
|
`,
|
|
|
], |
|
|
], |
|
|
}) |
|
|
}) |
|
|
|