Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
amd/build/report-viewer-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/report-viewer-components.min.js.map
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-editor-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-editor-components.min.js.map
View File

File diff suppressed because one or more lines are too long

2
amd/build/treestudyplan-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/treestudyplan-components.min.js.map
View File

File diff suppressed because one or more lines are too long

15
amd/src/report-viewer-components.js
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"

17
amd/src/studyplan-editor-components.js
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"

3
amd/src/treestudyplan-components.js
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>
`, `,
}); });

22
css/devstyles.css
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 */

21
scss/studyplan.scss
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 */

22
styles.css
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 */