Style tweaks
This commit is contained in:
parent
b2e1cd065f
commit
2f622e63d6
9 changed files with 76 additions and 45 deletions
2
amd/build/report-viewer-components.min.js
vendored
2
amd/build/report-viewer-components.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
amd/build/studyplan-editor-components.min.js
vendored
2
amd/build/studyplan-editor-components.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -495,6 +495,10 @@ export default {
|
||||||
type: Object,
|
type: Object,
|
||||||
default(){ return null;},
|
default(){ return null;},
|
||||||
},
|
},
|
||||||
|
page: {
|
||||||
|
type: Object,
|
||||||
|
default(){ return null;},
|
||||||
|
},
|
||||||
guestmode: {
|
guestmode: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
|
|
@ -1166,7 +1166,7 @@ export default {
|
||||||
v-model="show"
|
v-model="show"
|
||||||
size="lg"
|
size="lg"
|
||||||
ok-variant="primary"
|
ok-variant="primary"
|
||||||
:title="text.period_edit"
|
:title="text.edit"
|
||||||
@ok="editFinish()"
|
@ok="editFinish()"
|
||||||
:ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"
|
:ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"
|
||||||
>
|
>
|
||||||
|
@ -1261,6 +1261,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
text: strings.studyplan_text,
|
text: strings.studyplan_text,
|
||||||
|
cache: {
|
||||||
|
linelayers: {},
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -1296,24 +1299,38 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
countLineLayers(line){
|
countLineLayers(line){
|
||||||
let maxLayer = -1;
|
// For some optimization, we cache the value of this calculation for about a second
|
||||||
for(let i = 0; i <= this.page.periods; i++){
|
// Would be a lot nicer if we could use a computed property for this.....
|
||||||
const slot = line.slots[i];
|
if( this.cache.linelayers[line.id]
|
||||||
// Determine the amount of used layers in a studyline slit
|
&& ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )
|
||||||
for(const ix in line.slots[i].competencies){
|
){
|
||||||
const item = line.slots[i].competencies[ix];
|
return this.cache.linelayers[line.id].value;
|
||||||
if(item.layer > maxLayer){
|
}
|
||||||
maxLayer = item.layer;
|
else
|
||||||
}
|
{
|
||||||
}
|
let maxLayer = -1;
|
||||||
for(const ix in line.slots[i].filters){
|
for(let i = 0; i <= this.page.periods; i++){
|
||||||
const item = line.slots[i].filters[ix];
|
const slot = line.slots[i];
|
||||||
if(item.layer > maxLayer){
|
// Determine the amount of used layers in a studyline slit
|
||||||
maxLayer = item.layer;
|
for(const ix in line.slots[i].competencies){
|
||||||
}
|
const item = line.slots[i].competencies[ix];
|
||||||
}
|
if(item.layer > maxLayer){
|
||||||
|
maxLayer = item.layer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(const ix in line.slots[i].filters){
|
||||||
|
const item = line.slots[i].filters[ix];
|
||||||
|
if(item.layer > maxLayer){
|
||||||
|
maxLayer = item.layer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.cache.linelayers[line.id] = {
|
||||||
|
value: (maxLayer + 1),
|
||||||
|
timestamp: (new Date()),
|
||||||
|
};
|
||||||
|
return maxLayer+1;
|
||||||
}
|
}
|
||||||
return maxLayer+1;
|
|
||||||
},
|
},
|
||||||
slotsempty(slots) {
|
slotsempty(slots) {
|
||||||
if(Array.isArray(slots)){
|
if(Array.isArray(slots)){
|
||||||
|
@ -1585,7 +1602,9 @@ export default {
|
||||||
:layer="layeridx"
|
:layer="layeridx"
|
||||||
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
|
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
|
||||||
+ ((lineindex==0 && layernr==1)?' first ':' ')
|
+ ((lineindex==0 && layernr==1)?' first ':' ')
|
||||||
+ ((lineindex==page.studylines.length-1)?' last ':' ')"
|
+ ((lineindex==page.studylines.length-1)?' last ':' ')
|
||||||
|
+ ((layernr == countLineLayers(line))?' lastlyr ':' ')
|
||||||
|
+ ((layernr == countLineLayers(line)+1)?' newlyr ':' ')"
|
||||||
></t-studyline-slot
|
></t-studyline-slot
|
||||||
><t-studyline-slot
|
><t-studyline-slot
|
||||||
type='filter'
|
type='filter'
|
||||||
|
@ -1600,7 +1619,9 @@ export default {
|
||||||
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
|
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
|
||||||
+ ((lineindex==0 && layernr==1)?' first ':'')
|
+ ((lineindex==0 && layernr==1)?' first ':'')
|
||||||
+ ((lineindex==page.studylines.length-1)?' last ':' ')
|
+ ((lineindex==page.studylines.length-1)?' last ':' ')
|
||||||
+ ((index==page.periods)?' rightmost':'')"
|
+ ((index==page.periods)?' rightmost':'')
|
||||||
|
+ ((layernr == countLineLayers(line))?' lastlyr ':' ')
|
||||||
|
+ ((layernr == countLineLayers(line)+1)?' newlyr ':' ')"
|
||||||
>
|
>
|
||||||
</t-studyline-slot
|
</t-studyline-slot
|
||||||
></template
|
></template
|
||||||
|
@ -2327,22 +2348,22 @@ export default {
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<h3> {{ text.course }} </h3>
|
<h3> {{ text.course }} </h3>
|
||||||
<p><b>{{ value.course.fullname }}</b></p>
|
<p class="mb-0"><b>{{ value.course.fullname }}</b></p>
|
||||||
<p><b>{{ value.course.shortname }}</b></p>
|
<p class="mb-1"><b>{{ value.course.shortname }}</b></p>
|
||||||
<p>{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
|
<p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
|
||||||
<p><b>{{ text.duration }}</b><br>
|
<p class="mb-0"><b>{{ text.duration }}</b><br>
|
||||||
{{ format_duration(datechanger.coursespan)}}</p>
|
{{ format_duration(datechanger.coursespan)}}</p>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<h3> {{ text.period }} </h3>
|
<h3> {{ text.period }} </h3>
|
||||||
<p><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
|
<p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
|
||||||
<p><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
|
<p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
|
||||||
<p>{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
|
<p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
|
||||||
<p><b>{{ text.duration }}</b><br>
|
<p class="mb-0"><b>{{ text.duration }}</b><br>
|
||||||
{{ format_duration(datechanger.periodspan)}}</p>
|
{{ format_duration(datechanger.periodspan)}}</p>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row v-if='hidden'><b-col cols="12">
|
<b-row v-if='hidden' class="pt-2"><b-col cols="12">
|
||||||
<b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>
|
<b-form-checkbox type="checkbox" v-model="datechanger.globals.default">{{ text.rememberchoice }}</b-form-checkbox>
|
||||||
</b-col></b-row>
|
</b-col></b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
|
@ -2361,27 +2382,27 @@ export default {
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<h3> {{ text.course }} </h3>
|
<h3> {{ text.course }} </h3>
|
||||||
<p><b>{{ value.course.fullname }}</b></p>
|
<p class="mb-0"><b>{{ value.course.fullname }}</b></p>
|
||||||
<p><b>{{ value.course.shortname }}</b></p>
|
<p class="mb-1"><b>{{ value.course.shortname }}</b></p>
|
||||||
<p>{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
|
<p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
|
||||||
<p><b>{{ text.duration }}</b><br>
|
<p class="mb-0"><b>{{ text.duration }}</b><br>
|
||||||
{{ format_duration(datechanger.coursespan)}}</p>
|
{{ format_duration(datechanger.coursespan)}}</p>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols=>"6">
|
<b-col cols=>"6">
|
||||||
<h3> {{ text.period }} </h3>
|
<h3> {{ text.period }} </h3>
|
||||||
<p><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
|
<p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
|
||||||
<p><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
|
<p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
|
||||||
<p>{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
|
<p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
|
||||||
<p><b>{{ text.duration }}</b><br>
|
<p class="mb-0"><b>{{ text.duration }}</b><br>
|
||||||
{{ format_duration(datechanger.periodspan)}}</p>
|
{{ format_duration(datechanger.periodspan)}}</p>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row v-if='hidden'><b-col cols="12">
|
<b-row v-if='hidden' class="pt-2"><b-col cols="12">
|
||||||
<b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>
|
<b-form-checkbox type="checkbox" v-model="datechanger.globals.hidewarn">{{ text.hidewarning }}</b-form-checkbox>
|
||||||
</b-col></b-row>
|
</b-col></b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
</b-modal>
|
</b-modal>
|
||||||
</span>
|
</div>
|
||||||
`,
|
`,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -306,6 +306,10 @@ ul.t-competency-list li {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.t-studyline-slot.lastlyr .t-slot-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.s-studyline-header-period.current {
|
.s-studyline-header-period.current {
|
||||||
--hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
|
--hlcol: color-mix(in srgb, var(--white) , var(--highlight) var(--highlight-mix));
|
||||||
box-shadow: 0 0 10px 10px var(--hlcol);
|
box-shadow: 0 0 10px 10px var(--hlcol);
|
||||||
|
@ -372,11 +376,11 @@ ul.t-competency-list li {
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-slot-drop.secondary {
|
.t-slot-drop.secondary {
|
||||||
min-height: 3px;
|
min-height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-slot-drop.secondary.drop-allowed {
|
.t-slot-drop.secondary.drop-allowed {
|
||||||
min-height: 3px;
|
min-height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-item-deletebox {
|
.t-item-deletebox {
|
||||||
|
|
|
@ -289,6 +289,7 @@ $string["dateexpire"] = "Expires on";
|
||||||
$string["badgeinfo"] = "Badge details";
|
$string["badgeinfo"] = "Badge details";
|
||||||
$string["badgeissuedstats"] = "Issuing progress";
|
$string["badgeissuedstats"] = "Issuing progress";
|
||||||
|
|
||||||
|
$string["period_edit"] = 'Change period details';
|
||||||
$string["period_default_fullname"] = 'Period {$a}';
|
$string["period_default_fullname"] = 'Period {$a}';
|
||||||
$string["period_default_shortname"] = 'P{$a}';
|
$string["period_default_shortname"] = 'P{$a}';
|
||||||
$string["course_timing_title"] = 'Course timing does not match period timing';
|
$string["course_timing_title"] = 'Course timing does not match period timing';
|
||||||
|
|
|
@ -292,6 +292,7 @@ $string["dateexpire"] = "Veloopt op";
|
||||||
$string["badgeinfo"] = "Meer details";
|
$string["badgeinfo"] = "Meer details";
|
||||||
$string["badgeissuedstats"] = "Voortgang van uitgifte";
|
$string["badgeissuedstats"] = "Voortgang van uitgifte";
|
||||||
|
|
||||||
|
$string["period_edit"] = 'Periode aanpassen';
|
||||||
$string["period_default_fullname"] = 'Periode {$a}';
|
$string["period_default_fullname"] = 'Periode {$a}';
|
||||||
$string["period_default_shortname"] = 'P{$a}';
|
$string["period_default_shortname"] = 'P{$a}';
|
||||||
$string["course_timing_title"] = 'Cursustiming en periodetiming komen niet overeen';
|
$string["course_timing_title"] = 'Cursustiming en periodetiming komen niet overeen';
|
||||||
|
|
Loading…
Reference in a new issue