Style tweaks

This commit is contained in:
PMKuipers 2023-08-07 16:11:14 +02:00
parent b2e1cd065f
commit 2f622e63d6
9 changed files with 76 additions and 45 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

View File

@ -495,6 +495,10 @@ export default {
type: Object,
default(){ return null;},
},
page: {
type: Object,
default(){ return null;},
},
guestmode: {
type: Boolean,
default: false,

View File

@ -1166,7 +1166,7 @@ export default {
v-model="show"
size="lg"
ok-variant="primary"
:title="text.period_edit"
:title="text.edit"
@ok="editFinish()"
:ok-disabled="Math.min(editdata.fullname.length,editdata.shortname.length) == 0"
>
@ -1261,6 +1261,9 @@ export default {
}
},
text: strings.studyplan_text,
cache: {
linelayers: {},
}
};
},
created() {
@ -1296,24 +1299,38 @@ export default {
},
methods: {
countLineLayers(line){
let maxLayer = -1;
for(let i = 0; i <= this.page.periods; i++){
const slot = line.slots[i];
// Determine the amount of used layers in a studyline slit
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;
}
}
// For some optimization, we cache the value of this calculation for about a second
// Would be a lot nicer if we could use a computed property for this.....
if( this.cache.linelayers[line.id]
&& ((new Date()) - this.cache.linelayers[line.id].timestamp < 1000 )
){
return this.cache.linelayers[line.id].value;
}
else
{
let maxLayer = -1;
for(let i = 0; i <= this.page.periods; i++){
const slot = line.slots[i];
// Determine the amount of used layers in a studyline slit
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) {
if(Array.isArray(slots)){
@ -1585,7 +1602,9 @@ export default {
:layer="layeridx"
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+ ((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
type='filter'
@ -1600,7 +1619,9 @@ export default {
:class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+ ((lineindex==0 && layernr==1)?' first ':'')
+ ((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
></template
@ -2327,22 +2348,22 @@ export default {
<b-row>
<b-col cols="6">
<h3> {{ text.course }} </h3>
<p><b>{{ value.course.fullname }}</b></p>
<p><b>{{ value.course.shortname }}</b></p>
<p>{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
<p><b>{{ text.duration }}</b><br>
<p class="mb-0"><b>{{ value.course.fullname }}</b></p>
<p class="mb-1"><b>{{ value.course.shortname }}</b></p>
<p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
<p class="mb-0"><b>{{ text.duration }}</b><br>
{{ format_duration(datechanger.coursespan)}}</p>
</b-col>
<b-col cols="6">
<h3> {{ text.period }} </h3>
<p><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>{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
<p><b>{{ text.duration }}</b><br>
<p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
<p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
<p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
<p class="mb-0"><b>{{ text.duration }}</b><br>
{{ format_duration(datechanger.periodspan)}}</p>
</b-col>
</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-col></b-row>
</b-container>
@ -2361,27 +2382,27 @@ export default {
<b-row>
<b-col cols="6">
<h3> {{ text.course }} </h3>
<p><b>{{ value.course.fullname }}</b></p>
<p><b>{{ value.course.shortname }}</b></p>
<p>{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
<p><b>{{ text.duration }}</b><br>
<p class="mb-0"><b>{{ value.course.fullname }}</b></p>
<p class="mb-1"><b>{{ value.course.shortname }}</b></p>
<p class="mb-1">{{ datechanger.coursespan.formatted.first}} - {{ datechanger.coursespan.formatted.last}}</p>
<p class="mb-0"><b>{{ text.duration }}</b><br>
{{ format_duration(datechanger.coursespan)}}</p>
</b-col>
<b-col cols=>"6">
<h3> {{ text.period }} </h3>
<p><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>{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
<p><b>{{ text.duration }}</b><br>
<p class="mb-0"><b>{{ period.fullname }}</b><b v-if="value.span > 1"> - {{ endperiod.fullname }}</b></p>
<p class="mb-1"><b>{{ period.shortname }}</b><b v-if="value.span > 1"> - {{ endperiod.shortname }}</b></p>
<p class="mb-1">{{ datechanger.periodspan.formatted.first}} - {{ datechanger.periodspan.formatted.last}}</p>
<p class="mb-0"><b>{{ text.duration }}</b><br>
{{ format_duration(datechanger.periodspan)}}</p>
</b-col>
</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-col></b-row>
</b-container>
</b-modal>
</span>
</div>
`,
});

View File

@ -306,6 +306,10 @@ ul.t-competency-list li {
width: 20px;
}
.t-studyline-slot.lastlyr .t-slot-item {
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);
@ -372,11 +376,11 @@ ul.t-competency-list li {
}
.t-slot-drop.secondary {
min-height: 3px;
min-height: 5px;
}
.t-slot-drop.secondary.drop-allowed {
min-height: 3px;
min-height: 5px;
}
.t-item-deletebox {

View File

@ -289,6 +289,7 @@ $string["dateexpire"] = "Expires on";
$string["badgeinfo"] = "Badge details";
$string["badgeissuedstats"] = "Issuing progress";
$string["period_edit"] = 'Change period details';
$string["period_default_fullname"] = 'Period {$a}';
$string["period_default_shortname"] = 'P{$a}';
$string["course_timing_title"] = 'Course timing does not match period timing';

View File

@ -292,6 +292,7 @@ $string["dateexpire"] = "Veloopt op";
$string["badgeinfo"] = "Meer details";
$string["badgeissuedstats"] = "Voortgang van uitgifte";
$string["period_edit"] = 'Periode aanpassen';
$string["period_default_fullname"] = 'Periode {$a}';
$string["period_default_shortname"] = 'P{$a}';
$string["course_timing_title"] = 'Cursustiming en periodetiming komen niet overeen';