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,6 +1299,15 @@ export default {
}, },
methods: { methods: {
countLineLayers(line){ countLineLayers(line){
// 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; let maxLayer = -1;
for(let i = 0; i <= this.page.periods; i++){ for(let i = 0; i <= this.page.periods; i++){
const slot = line.slots[i]; const slot = line.slots[i];
@ -1313,7 +1325,12 @@ export default {
} }
} }
} }
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';