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 ':' ')"
></r-studyline-slot
><r-studyline-slot
v-if="showslot(page,line, index, layeridx, 'gradable')"
v-if="showslot(page,line, index, layeridx, 'filter')"
type='filter'
v-model="line.slots[index].filters"
:teachermode='teachermode'
@ -824,17 +824,6 @@ export default {
}
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(){
if(this.item && this.item.span > 1){
const span = (2 * this.item.span) - 1;
@ -852,7 +841,7 @@ export default {
},
template: `
<div :class=" 'r-studyline-slot ' + type + ' ' + (current?'current ':' ')
<div :class=" 'r-studyline-slot ' + type + ' '
+ 'r-studyline-slot-' + slotindex + ' '
+ ((slotindex==0)?'r-studyline-firstcolumn ':' ')"
: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="(layernr,layeridx) in countLineLayers(line,page)+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')"
type='gradable'
v-model="line.slots[index].courses"
@ -2036,17 +2035,6 @@ export default {
courseHoverDummy(){
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(){
if(this.item && this.item.span > 1){
const span = (2 * this.item.span) - 1;
@ -2211,8 +2199,7 @@ export default {
}
},
template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')
+ (current?'current ':' ')"
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
:data-studyline="line.id" ref="main"
:style='spanCss'
><drag v-if="item"

3
amd/src/treestudyplan-components.js
View File

@ -259,7 +259,7 @@ export default {
};
},
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>
<b-tooltip
:target="'s-period-'+value.id" triggers="hover"
@ -272,6 +272,7 @@ export default {
><p class="s-studyline-header-period-datespan small">
<span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>
</p>
<div v-if="current" class='s-studyline-period-highlight'></div>
</div>
`,
});

22
css/devstyles.css
View File

@ -377,13 +377,24 @@
.features-treestudyplan .t-studyline-slot.lastlyr .t-slot-item {
margin-bottom: 0;
}
.path-local-treestudyplan .s-studyline-header-period.current,
.features-treestudyplan .s-studyline-header-period.current {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix));
box-shadow: 0 0 10px 10px var(--hlcol);
background-color: var(--hlcol);
.path-local-treestudyplan .s-studyline-period-highlight,
.features-treestudyplan .s-studyline-period-highlight {
position: absolute;
width: 100%;
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-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,
.features-treestudyplan .s-studyline-header-period abbr {
@ -786,6 +797,7 @@
}
.path-local-treestudyplan .s-studyline-header-period,
.features-treestudyplan .s-studyline-header-period {
position: relative;
text-align: center;
padding-top: 5px;
margin-top: 16px; /* To allow for box shadow on highlighted period */

21
scss/studyplan.scss
View File

@ -275,12 +275,24 @@
margin-bottom: 0;
}
.s-studyline-header-period.current {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix));
box-shadow: 0 0 10px 10px var(--hlcol);
background-color: var(--hlcol);
.s-studyline-period-highlight {
position:absolute;
width: 100%;
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-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 {
@ -664,6 +676,7 @@
}
.s-studyline-header-period {
position: relative;
text-align: center;
padding-top: 5px;
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 {
margin-bottom: 0;
}
.path-local-treestudyplan .s-studyline-header-period.current,
.features-treestudyplan .s-studyline-header-period.current {
--hlcol: color-mix(in srgb, var(--white), var(--highlight) var(--highlight-mix));
box-shadow: 0 0 10px 10px var(--hlcol);
background-color: var(--hlcol);
.path-local-treestudyplan .s-studyline-period-highlight,
.features-treestudyplan .s-studyline-period-highlight {
position: absolute;
width: 100%;
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-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,
.features-treestudyplan .s-studyline-header-period abbr {
@ -786,6 +797,7 @@
}
.path-local-treestudyplan .s-studyline-header-period,
.features-treestudyplan .s-studyline-header-period {
position: relative;
text-align: center;
padding-top: 5px;
margin-top: 16px; /* To allow for box shadow on highlighted period */