Fixed highlight of current period not playing nice with courses spanning multiple periods

This commit is contained in:
PMKuipers 2024-01-27 16:21:04 +01:00
parent 546bff0659
commit fd1ab079a1
12 changed files with 63 additions and 49 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -672,7 +672,7 @@ export default {
+ ((lineindex==page.studylines.length-1)?' last ':' ')" + ((lineindex==page.studylines.length-1)?' last ':' ')"
></r-studyline-slot ></r-studyline-slot
><r-studyline-slot ><r-studyline-slot
v-if="showslot(page,line, index, layeridx, 'gradable')" v-if="showslot(page,line, index, layeridx, 'filter')"
type='filter' type='filter'
v-model="line.slots[index].filters" v-model="line.slots[index].filters"
:teachermode='teachermode' :teachermode='teachermode'
@ -824,17 +824,6 @@ export default {
} }
return null; return null;
}, },
current(){
if( this.period && this.period.startdate && this.period.enddate){
const now = new Date();
const pstart = new Date(this.period.startdate);
const pend = new Date(this.period.enddate);
return (now >= pstart && now < pend);
}
else {
return false;
}
},
spanCss(){ spanCss(){
if(this.item && this.item.span > 1){ if(this.item && this.item.span > 1){
const span = (2 * this.item.span) - 1; const span = (2 * this.item.span) - 1;
@ -852,7 +841,7 @@ export default {
}, },
template: ` template: `
<div :class=" 'r-studyline-slot ' + type + ' ' + (current?'current ':' ') <div :class=" 'r-studyline-slot ' + type + ' '
+ 'r-studyline-slot-' + slotindex + ' ' + 'r-studyline-slot-' + slotindex + ' '
+ ((slotindex==0)?'r-studyline-firstcolumn ':' ')" + ((slotindex==0)?'r-studyline-firstcolumn ':' ')"
:data-studyline="line.id" ref="sizeElement" :data-studyline="line.id" ref="sizeElement"

View File

@ -1693,8 +1693,7 @@ export default {
<template v-for="(line,lineindex) in page.studylines" <template v-for="(line,lineindex) in page.studylines"
><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1" ><template v-for="(layernr,layeridx) in countLineLayers(line,page)+1"
><template v-for="(n,index) in (page.periods+1)" ><template v-for="(n,index) in (page.periods+1)"
> ><t-studyline-slot
<t-studyline-slot
v-if="index > 0 && showslot(page,line, index, layeridx, 'gradable')" v-if="index > 0 && showslot(page,line, index, layeridx, 'gradable')"
type='gradable' type='gradable'
v-model="line.slots[index].courses" v-model="line.slots[index].courses"
@ -2036,17 +2035,6 @@ export default {
courseHoverDummy(){ courseHoverDummy(){
return {course: this.hover.component}; return {course: this.hover.component};
}, },
current(){
if( this.period && this.period.startdate && this.period.enddate){
const now = new Date();
const pstart = new Date(this.period.startdate);
const pend = new Date(this.period.enddate);
return (now >= pstart && now < pend);
}
else {
return false;
}
},
spanCss(){ spanCss(){
if(this.item && this.item.span > 1){ if(this.item && this.item.span > 1){
const span = (2 * this.item.span) - 1; const span = (2 * this.item.span) - 1;
@ -2211,8 +2199,7 @@ export default {
} }
}, },
template: ` template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ') <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
+ (current?'current ':' ')"
:data-studyline="line.id" ref="main" :data-studyline="line.id" ref="main"
:style='spanCss' :style='spanCss'
><drag v-if="item" ><drag v-if="item"

View File

@ -259,7 +259,7 @@ export default {
}; };
}, },
template: ` template: `
<div :class="'s-studyline-header-period ' + (current?'current ':' ')" ref="main" :data-id="identifier" <div :class="'s-studyline-header-period '" ref="main" :data-id="identifier"
><p><abbr :id="'s-period-'+value.id" :title="value.fullname">{{ value.shortname }}</abbr> ><p><abbr :id="'s-period-'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>
<b-tooltip <b-tooltip
:target="'s-period-'+value.id" triggers="hover" :target="'s-period-'+value.id" triggers="hover"
@ -272,6 +272,7 @@ export default {
><p class="s-studyline-header-period-datespan small"> ><p class="s-studyline-header-period-datespan small">
<span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span> <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>
</p> </p>
<div v-if="current" class='s-studyline-period-highlight'></div>
</div> </div>
`, `,
}); });

View File

@ -377,13 +377,24 @@
.features-treestudyplan .t-studyline-slot.lastlyr .t-slot-item { .features-treestudyplan .t-studyline-slot.lastlyr .t-slot-item {
margin-bottom: 0; margin-bottom: 0;
} }
.path-local-treestudyplan .s-studyline-header-period.current, .path-local-treestudyplan .s-studyline-period-highlight,
.features-treestudyplan .s-studyline-header-period.current { .features-treestudyplan .s-studyline-period-highlight {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix)); position: absolute;
box-shadow: 0 0 10px 10px var(--hlcol); width: 100%;
background-color: var(--hlcol); height: 50000px;
opacity: var(--highlight-mix);
box-shadow: 0 0 10px 10px var(--highlight);
background-color: var(--highlight);
border-top-left-radius: 16px; border-top-left-radius: 16px;
border-top-right-radius: 16px; border-top-right-radius: 16px;
border: var(--highlight) 1px solid;
z-index: 0;
top: 0;
}
.path-local-treestudyplan .s-studyline-header-period p,
.features-treestudyplan .s-studyline-header-period p {
position: relative;
z-index: 2;
} }
.path-local-treestudyplan .s-studyline-header-period abbr, .path-local-treestudyplan .s-studyline-header-period abbr,
.features-treestudyplan .s-studyline-header-period abbr { .features-treestudyplan .s-studyline-header-period abbr {
@ -786,6 +797,7 @@
} }
.path-local-treestudyplan .s-studyline-header-period, .path-local-treestudyplan .s-studyline-header-period,
.features-treestudyplan .s-studyline-header-period { .features-treestudyplan .s-studyline-header-period {
position: relative;
text-align: center; text-align: center;
padding-top: 5px; padding-top: 5px;
margin-top: 16px; /* To allow for box shadow on highlighted period */ margin-top: 16px; /* To allow for box shadow on highlighted period */

View File

@ -275,12 +275,24 @@
margin-bottom: 0; margin-bottom: 0;
} }
.s-studyline-header-period.current { .s-studyline-period-highlight {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix)); position:absolute;
box-shadow: 0 0 10px 10px var(--hlcol); width: 100%;
background-color: var(--hlcol); height: 50000px;
opacity: var(--highlight-mix);
box-shadow: 0 0 10px 10px var(--highlight);
background-color: var(--highlight);
border-top-left-radius: 16px; border-top-left-radius: 16px;
border-top-right-radius: 16px; border-top-right-radius: 16px;
border: var(--highlight) 1px solid;
z-index: 0;
top: 0;
}
.s-studyline-header-period p {
position: relative;
z-index: 2;
} }
.s-studyline-header-period abbr { .s-studyline-header-period abbr {
@ -664,6 +676,7 @@
} }
.s-studyline-header-period { .s-studyline-header-period {
position: relative;
text-align: center; text-align: center;
padding-top: 5px; padding-top: 5px;
margin-top: 16px; /* To allow for box shadow on highlighted period */ margin-top: 16px; /* To allow for box shadow on highlighted period */

View File

@ -377,13 +377,24 @@
.features-treestudyplan .t-studyline-slot.lastlyr .t-slot-item { .features-treestudyplan .t-studyline-slot.lastlyr .t-slot-item {
margin-bottom: 0; margin-bottom: 0;
} }
.path-local-treestudyplan .s-studyline-header-period.current, .path-local-treestudyplan .s-studyline-period-highlight,
.features-treestudyplan .s-studyline-header-period.current { .features-treestudyplan .s-studyline-period-highlight {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix)); position: absolute;
box-shadow: 0 0 10px 10px var(--hlcol); width: 100%;
background-color: var(--hlcol); height: 50000px;
opacity: var(--highlight-mix);
box-shadow: 0 0 10px 10px var(--highlight);
background-color: var(--highlight);
border-top-left-radius: 16px; border-top-left-radius: 16px;
border-top-right-radius: 16px; border-top-right-radius: 16px;
border: var(--highlight) 1px solid;
z-index: 0;
top: 0;
}
.path-local-treestudyplan .s-studyline-header-period p,
.features-treestudyplan .s-studyline-header-period p {
position: relative;
z-index: 2;
} }
.path-local-treestudyplan .s-studyline-header-period abbr, .path-local-treestudyplan .s-studyline-header-period abbr,
.features-treestudyplan .s-studyline-header-period abbr { .features-treestudyplan .s-studyline-header-period abbr {
@ -786,6 +797,7 @@
} }
.path-local-treestudyplan .s-studyline-header-period, .path-local-treestudyplan .s-studyline-header-period,
.features-treestudyplan .s-studyline-header-period { .features-treestudyplan .s-studyline-header-period {
position: relative;
text-align: center; text-align: center;
padding-top: 5px; padding-top: 5px;
margin-top: 16px; /* To allow for box shadow on highlighted period */ margin-top: 16px; /* To allow for box shadow on highlighted period */