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, type: Object,
default(){ return null;}, default(){ return null;},
}, },
page: {
type: Object,
default(){ return null;},
},
guestmode: { guestmode: {
type: Boolean, type: Boolean,
default: false, default: false,

View file

@ -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>
`, `,
}); });

View file

@ -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 {

View file

@ -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';

View file

@ -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';