blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-03 11:59:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

update(LvPlan color contrast): changes the colors for some of the text in the lvplan component for more contrast

Browse Source
This commit is contained in:
SimonGschnell
2025-07-10 14:32:26 +02:00
parent dba435dafb
commit 2deef8039d
8 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/calendar.css
+24 -4
View File
@@ -170,7 +170,7 @@
content: "";
position: absolute;
top: 0;
left: 0;
left: 3rem;
margin:auto;
width: 100%;
height: 100%;
@@ -208,11 +208,16 @@
}
.fhc-calendar-lg .fhc-calendar-month-page-day,
.fhc-calendar-lg .fhc-calendar-month-page-weekday,
.fhc-calendar-md .fhc-calendar-month-page-day,
.fhc-calendar-md .fhc-calendar-month-page-weekday {
.fhc-calendar-md .fhc-calendar-month-page-day {
border: solid 1px var(--fhc-calendar-border);
}
.fhc-calendar-lg .fhc-calendar-month-page-weekday,
.fhc-calendar-md .fhc-calendar-month-page-weekday{
border: solid 1px var(--fhc-secondary);
}
.fhc-calendar-lg .fhc-calendar-month-page-day,
.fhc-calendar-md .fhc-calendar-month-page-day {
aspect-ratio: 1;
@@ -419,3 +424,18 @@
.weekPageContainer {
container-type: inline-size;
}
#calendarHeaderTitle{
color: var(--fhc-text);
}
.fhc-calendar-day-page .hours,
.fhc-calendar-day-page .curTimeIndicator,
.fhc-calendar-day-page .fhc-calendar-hour-indicator,
.fhc-calendar-week-page .hours,
.fhc-calendar-week-page .curTimeIndicator,
.fhc-calendar-week-page .fhc-calendar-hour-indicator,
.fhc-calendar-day-page .date,
.fhc-calendar-week-page .date {
color: var(--fhc-text-secondary) !important;
}
public/js/components/Calendar/Day/Page.js
+3 -3
View File
@@ -385,8 +385,8 @@ export default {
<div class="d-flex flex-column h-100 border">
<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
<div class="fw-bold">{{dayText.tag}}</div>
<a href="#" class="small text-secondary text-decoration-none" >{{dayText.datum}}</a>
<div class="day fw-bold">{{dayText.tag}}</div>
<a href="#" class="small date text-decoration-none" >{{dayText.datum}}</a>
</div>
</div>
<div @wheel.prevent="dayScrollBehavior" id="scrollContainer" ref="dayScrollContainer" style="height: 100%; overflow-y: scroll;">
@@ -438,7 +438,7 @@ export default {
</Transition>
<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
<div class="hours">
<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-end small" :ref="'hour' + hour">{{hour}}:00</div>
</div>
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
public/js/components/Calendar/Header.js
+2 -2
View File
@@ -74,7 +74,7 @@ export default {
</div>
<div class="justify-content-center text-center col-auto">
<div class="d-flex justify-content-center align-items-center">
<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
<button id="calendarHeaderTitle" class="btn btn-link text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
{{ title }}
<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
</button>
@@ -88,7 +88,7 @@ export default {
<div ref="viewButtons" v-if="!noWeekView && !noMonthView" :class="getHeaderClassSide" class="d-flex justify-content-center justify-content-md-end align-items-center" style="pointer-events: none;">
<div style="pointer-events: all;">
<div role="group" aria-label="Kalender Modus">
<button :aria-label="modeAriaLabelText(mode_bezeichnung)" v-tooltip.top="{value:modeAriaLabelText(mode_bezeichnung), showDelay:1000}" type="button" :class="{'active':mode_kurzbz.toLowerCase() === mode.toLowerCase()}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
<button :aria-label="modeAriaLabelText(mode_bezeichnung)" v-tooltip.top="{value:modeAriaLabelText(mode_bezeichnung), showDelay:1000}" type="button" :class="{'active':mode_kurzbz.toLowerCase() === mode.toLowerCase()}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary card d-inline-block" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
<i aria-hidden="true" v-if="condition" class="fa" :class="icon" ></i>
</button>
</div>
public/js/components/Calendar/Month/Page.js
+1 -1
View File
@@ -143,7 +143,7 @@ export default {
</div>
<template v-for="week in weeks"
:key="week.no">
<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end opacity-25"
<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end "
@click.prevent="changeToWeek(week)">{{week.no}}</a>
<a href="#"
@click.prevent="clickEvent(day,week)"
public/js/components/Calendar/Week/Page.js
+3 -3
View File
@@ -325,8 +325,8 @@ export default {
<div class="d-flex flex-column">
<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
<div class="fw-bold">{{dayText[day]?.tag}}</div>
<a href="#" class="small text-muted text-decoration-none" >{{dayText[day]?.datum}}</a>
<div class="day fw-bold">{{dayText[day]?.tag}}</div>
<a href="#" class="date small text-decoration-none" >{{dayText[day]?.datum}}</a>
</div>
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" >
@@ -360,7 +360,7 @@ export default {
</div>
</Transition>
<div class="hours">
<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-end small" :ref="'hour' + hour">{{hour}}:00</div>
</div>
<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" :class="{'past':day.isPast}" class=" day border-start position-relative" :style="dayGridStyle(day)">
<Transition>
public/js/components/Calendar/Weeks.js
+1 -1
View File
@@ -60,7 +60,7 @@ export default {
<calendar-header v-if="header" :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
<div class="d-flex flex-wrap">
<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
<button @click="setWeek(week)" class="btn btn-outline-secondary" :class="{'border-0': week != focusDate.w}">
<button @click="setWeek(week)" class="btn btn-outline-secondary card" :class="{'border-0': week != focusDate.w}">
{{week}}
</button>
</div>
public/js/components/Calendar/Years/Page.js
+1 -1
View File
@@ -28,7 +28,7 @@ export default {
template: `
<div class="fhc-calendar-years-page d-flex flex-wrap">
<div v-for="year in years" :key="year" class="d-grid col-4">
<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
<button class="btn btn-outline-secondary card justify-content-center" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
{{year}}
</button>
</div>
public/js/components/Cis/LvPlan/LvPlan.js
+1 -1
View File
@@ -314,7 +314,7 @@ const LvPlan = {
>
<template #calendarDownloads>
<div v-for="{title,icon,link} in downloadLinks">
<a :href="link" :aria-label="title" class="py-1 px-2 m-1 btn btn-outline-secondary">
<a :href="link" :aria-label="title" class="py-1 px-2 m-1 btn btn-outline-secondary card">
<div class="d-flex flex-column">
<i aria-hidden="true" :class="icon"></i>
<span class="small">{{title}}</span>