Reworked card view to better handle long course titles

This commit is contained in:
PMKuipers 2024-05-23 23:32:59 +02:00
parent 5dc94a7525
commit ebc3632788
11 changed files with 243 additions and 100 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

@ -1567,17 +1567,22 @@ export default {
}, },
}, },
template: ` template: `
<div :class="'r-item-competency completion-'+value.completion"> <div :class="'r-item-course card completion-'+value.completion">
<b-card no-body > <div class='r-item-course-cardwrapper mr-0 ml-0 h-100 '>
<b-row no-gutters> <div
<b-col md="1">
<span
:title="text['coursetiming_'+value.course.timing]" :title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate" v-b-popover.hover.top="startdate+' - '+enddate"
:class="'r-timing-indicator timing-'+value.course.timing"></span> :class="'r-timing-indicator timing-'+value.course.timing"
</b-col> ></div>
<b-col md="11" class="align-items-center"> <div class="r-item-course-title card-body h-100">
<b-card-body > <fittext maxsize="12pt" minsize="9pt">
<a v-b-modal="'r-item-course-details-'+value.id"
:href="(!guestmode)?(wwwroot+'/course/view.php?id='+value.course.id):'#'"
@click.prevent.stop=''
>{{ value.course.displayname }}</a>
</fittext>
</div>
<div class="h-100 r-item-course-indicator ">
<template v-if='!value.course.enrolled'> <template v-if='!value.course.enrolled'>
<i v-b-popover.top <i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert" class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
@ -1603,14 +1608,8 @@ export default {
' r-completion-'+value.completion" ' r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i> :title="text['completion_'+value.completion]"></i>
</template> </template>
<a v-b-modal="'r-item-course-details-'+value.id" </div>
:href="(!guestmode)?(wwwroot+'/course/view.php?id='+value.course.id):'#'" </div>
@click.prevent.stop=''
>{{ value.course.displayname }}</i></a>
</b-card-body>
</b-col>
</b-row>
<b-modal <b-modal
:id="'r-item-course-details-'+value.id" :id="'r-item-course-details-'+value.id"
:title="value.course.displayname + ' - ' + value.course.fullname" :title="value.course.displayname + ' - ' + value.course.fullname"
@ -1692,7 +1691,7 @@ export default {
position="below" position="below"
></s-course-extrafields> ></s-course-extrafields>
</b-modal> </b-modal>
</b-card></div> </div>
`, `,
}); });
@ -2341,24 +2340,24 @@ export default {
}, },
}, },
template: ` template: `
<div :class="'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')"> <div :class="'r-item-course card '+ (value.course.amteacher?'r-course-am-teacher':'')">
<b-card no-body> <div class='r-item-course-cardwrapper mr-0 ml-0 h-100 '>
<div class='d-flex flex-wrap mr-0 ml-0'> <div
<div>
<span
:title="text['coursetiming_'+value.course.timing]" :title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate" v-b-popover.hover.top="startdate+' - '+enddate"
:class="'r-timing-indicator timing-'+value.course.timing"></span> :class="'r-timing-indicator timing-'+value.course.timing"
</div> ></div>
<div class="flex-fill align-items-center"> <div class="r-item-course-title card-body h-100">
<b-card-body> <fittext maxsize="12pt" minsize="9pt">
<a v-b-modal="'r-item-course-details-'+value.id" <a v-b-modal="'r-item-course-details-'+value.id"
:href="(!guestmode)?(wwwroot+'/course/view.php?id='+value.course.id):'#'" :href="(!guestmode)?(wwwroot+'/course/view.php?id='+value.course.id):'#'"
@click.prevent.stop='' @click.prevent.stop=''
>{{ value.course.displayname }}</i></a> >{{ value.course.displayname }}</a>
</fittext>
</div>
<div class="h-100 r-item-course-indicator ">
<r-completion-circle class="r-course-graded" :disabled="!isCompletable" <r-completion-circle class="r-course-graded" :disabled="!isCompletable"
v-model="progress_circle"></r-completion-circle> v-model="progress_circle"></r-completion-circle>
</b-card-body>
</div> </div>
</div> </div>
<b-modal <b-modal

View File

@ -3476,26 +3476,26 @@ export default {
}, },
template: ` template: `
<div class="t-item-course"> <div class="t-item-course card">
<b-card no-body > <div class='t-item-course-cardwrapper mr-0 ml-0 h-100 '>
<div class='d-flex flex-wrap mr-0 ml-0'> <div
<div>
<span
:title="text['coursetiming_'+value.course.timing]" :title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate" v-b-popover.hover.top="startdate+' - '+enddate"
:class="'t-timing-indicator timing-'+value.course.timing"></span> :class="'h-100 t-timing-indicator timing-'+value.course.timing"
></div>
<div class="t-item-course-title card-body h-100">
<fittext maxsize="12pt" minsize="9pt"
<a v-b-modal="'t-item-course-config-'+value.id"
:id="'t-item-course-details-'+value.id"
:href="wwwroot+'/course/view.php?id='+value.course.id"
@click.prevent.stop="">>{{ value.course.displayname }}</a>
</fittext>
</div> </div>
<div class="flex-fill align-items-center"> <div class="h-100 t-item-course-indicator ">
<b-card-body >
<a class="t-item-course-config" <a class="t-item-course-config"
v-b-modal="'t-item-course-config-'+value.id" v-b-modal="'t-item-course-config-'+value.id"
href="#" @click.prevent="" href="#" @click.prevent=""
><i :class="'fa fa-'+configurationIcon+' ' + configurationState"></i></a> ><i :class="'fa fa-'+configurationIcon+' ' + configurationState"></i></a>
<a v-b-modal="'t-item-course-config-'+value.id"
:id="'t-item-course-details-'+value.id"
:href="wwwroot+'/course/view.php?id='+value.course.id"
@click.prevent.stop="">{{ value.course.displayname }}</a>
</b-card-body>
</div> </div>
</div> </div>
<b-modal class="" <b-modal class=""
@ -3566,7 +3566,7 @@ export default {
</b-button> </b-button>
</template> </template>
</b-modal> </b-modal>
</b-card></div> </div>
`, `,
}); });

View File

@ -364,6 +364,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .r-studyline-slot, .path-local-treestudyplan .r-studyline-slot,
.features-treestudyplan .t-studyline-slot, .features-treestudyplan .t-studyline-slot,
.features-treestudyplan .r-studyline-slot { .features-treestudyplan .r-studyline-slot {
width: 150px;
}
.path-local-treestudyplan .t-studyline-slot.filter,
.path-local-treestudyplan .r-studyline-slot.filter,
.features-treestudyplan .t-studyline-slot.filter,
.features-treestudyplan .r-studyline-slot.filter {
width: 130px; width: 130px;
} }
.path-local-treestudyplan .r-studyline-slot, .path-local-treestudyplan .r-studyline-slot,
@ -731,9 +737,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan a.t-item-course-config { .features-treestudyplan a.t-item-course-config {
font-size: 21px; font-size: 21px;
vertical-align: middle; vertical-align: middle;
float: right; float: none;
margin-right: 2px; margin-right: 2px;
margin-top: -5px; margin-top: 0;
} }
.path-local-treestudyplan .t-item-connector-end, .path-local-treestudyplan .t-item-connector-end,
.features-treestudyplan .t-item-connector-end { .features-treestudyplan .t-item-connector-end {
@ -899,16 +905,67 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan .gradable .r-item-base { .features-treestudyplan .gradable .r-item-base {
width: 100%; width: 100%;
} }
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper {
display: grid;
grid-template-columns: 7px 1fr 26px;
width: 100%;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-timing-indicator,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-timing-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-timing-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-timing-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-timing-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-timing-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-timing-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-timing-indicator {
padding-top: 0;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-title,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-title,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-title,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-title,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-title,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-title,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-title,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-title {
padding-top: 5px;
overflow: hidden;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator {
padding-top: 6px;
padding-right: 5px;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator .t-item-course-config {
position: relative;
top: -4px;
}
.path-local-treestudyplan .t-item-invalid .card-body, .path-local-treestudyplan .t-item-invalid .card-body,
.path-local-treestudyplan .r-item-invalid .card-body, .path-local-treestudyplan .r-item-invalid .card-body,
.path-local-treestudyplan .t-item-competency .card-body, .path-local-treestudyplan .t-item-competency .card-body,
.path-local-treestudyplan .t-item-course .card-body, .path-local-treestudyplan .t-item-course .card-body,
.path-local-treestudyplan .r-item-competency .card-body, .path-local-treestudyplan .r-item-course .card-body,
.features-treestudyplan .t-item-invalid .card-body, .features-treestudyplan .t-item-invalid .card-body,
.features-treestudyplan .r-item-invalid .card-body, .features-treestudyplan .r-item-invalid .card-body,
.features-treestudyplan .t-item-competency .card-body, .features-treestudyplan .t-item-competency .card-body,
.features-treestudyplan .t-item-course .card-body, .features-treestudyplan .t-item-course .card-body,
.features-treestudyplan .r-item-competency .card-body { .features-treestudyplan .r-item-course .card-body {
padding: 3px; padding: 3px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;

View File

@ -458,7 +458,7 @@ $string["student_from_plan_enrolled"] = 'student in this study plan is enrolled
$string["students_from_plan_enrolled"] = 'students in this study plan are enrolled in the course'; $string["students_from_plan_enrolled"] = 'students in this study plan are enrolled in the course';
$string["not_enrolled"] = "Not enrolled"; $string["not_enrolled"] = "Not enrolled";
$string["warning_incomplete_pass"] = 'Completion data was reset for this activity, causing your passing grade not to be registered. Ask your teacher to re-grade this grade to remedy this.'; $string["warning_incomplete_pass"] = 'The passing grade is not sufficient for completing the assignment, check the completion criteria.';
$string["warning_incomplete_nograderq"] = 'Because the grade is not marked as a requirement, your passing grade is not registering completion.'; $string["warning_incomplete_nograderq"] = 'Because the grade is not marked as a requirement, your passing grade is not registering completion.';
$string["error:nosuchcompetency"] = 'Warning: This competency no longer exists'; $string["error:nosuchcompetency"] = 'Warning: This competency no longer exists';

View File

@ -460,7 +460,7 @@ $string["student_from_plan_enrolled"] = 'student in dit studieplan is in deze cu
$string["students_from_plan_enrolled"] = 'studenten in dit studieplan zijn in deze cursus ingeschreven'; $string["students_from_plan_enrolled"] = 'studenten in dit studieplan zijn in deze cursus ingeschreven';
$string["not_enrolled"] = "Niet ingeschreven"; $string["not_enrolled"] = "Niet ingeschreven";
$string["warning_incomplete_pass"] = 'Door een storing wordt je voldoende resultaat niet als voltooid meegenomen. Vraag je docent om opnieuw je beoordeling vast te stellen. '; $string["warning_incomplete_pass"] = 'Er is een voldoende resultaat gegeven, maar de opdracht is nog niet voltooid. Bekijk de voltooiingsvoorwaarden en check bij de docent.';
$string["warning_incomplete_nograderq"] = 'Omdat het behalen van een cijfer niet als voorwaarde is aangegeven, telt het behalen van een voldoende resultaat niet mee voor voitooiing'; $string["warning_incomplete_nograderq"] = 'Omdat het behalen van een cijfer niet als voorwaarde is aangegeven, telt het behalen van een voldoende resultaat niet mee voor voitooiing';
$string["error:nosuchcompetency"] = 'Waarschuwing: deze competentie is niet langer beschikbaar. '; $string["error:nosuchcompetency"] = 'Waarschuwing: deze competentie is niet langer beschikbaar. ';

View File

@ -254,8 +254,12 @@
.t-studyline-slot, .t-studyline-slot,
.r-studyline-slot{ .r-studyline-slot{
width: 150px;
&.filter {
width: 130px; width: 130px;
} }
}
.r-studyline-slot { .r-studyline-slot {
min-height: 32px; min-height: 32px;
@ -615,9 +619,9 @@
a.t-item-course-config { a.t-item-course-config {
font-size: 21px /*16pt*/; font-size: 21px /*16pt*/;
vertical-align: middle; vertical-align: middle;
float: right; float: none;
margin-right: 2px; margin-right: 2px;
margin-top: -5px; margin-top: 0;
} }
.t-item-connector-end { .t-item-connector-end {
@ -767,11 +771,37 @@
width: 100%; width: 100%;
} }
.t-item-course .t-item-course-cardwrapper,
.r-item-course .r-item-course-cardwrapper {
display: grid;
grid-template-columns: 7px 1fr 26px;
width: 100%;
.t-timing-indicator, .r-timing-indicator {
padding-top: 0;
}
.t-item-course-title, .r-item-course-title {
padding-top: 5px;
overflow: hidden;
}
.t-item-course-indicator, .r-item-course-indicator {
padding-top: 6px;
padding-right: 5px;
.t-item-course-config {
position: relative;
top: -4px;
}
}
}
.t-item-invalid .card-body, .t-item-invalid .card-body,
.r-item-invalid .card-body, .r-item-invalid .card-body,
.t-item-competency .card-body, .t-item-competency .card-body,
.t-item-course .card-body, .t-item-course .card-body,
.r-item-competency .card-body { .r-item-course .card-body {
padding: 3px; padding: 3px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;

View File

@ -364,6 +364,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .r-studyline-slot, .path-local-treestudyplan .r-studyline-slot,
.features-treestudyplan .t-studyline-slot, .features-treestudyplan .t-studyline-slot,
.features-treestudyplan .r-studyline-slot { .features-treestudyplan .r-studyline-slot {
width: 150px;
}
.path-local-treestudyplan .t-studyline-slot.filter,
.path-local-treestudyplan .r-studyline-slot.filter,
.features-treestudyplan .t-studyline-slot.filter,
.features-treestudyplan .r-studyline-slot.filter {
width: 130px; width: 130px;
} }
.path-local-treestudyplan .r-studyline-slot, .path-local-treestudyplan .r-studyline-slot,
@ -731,9 +737,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan a.t-item-course-config { .features-treestudyplan a.t-item-course-config {
font-size: 21px; font-size: 21px;
vertical-align: middle; vertical-align: middle;
float: right; float: none;
margin-right: 2px; margin-right: 2px;
margin-top: -5px; margin-top: 0;
} }
.path-local-treestudyplan .t-item-connector-end, .path-local-treestudyplan .t-item-connector-end,
.features-treestudyplan .t-item-connector-end { .features-treestudyplan .t-item-connector-end {
@ -899,16 +905,67 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan .gradable .r-item-base { .features-treestudyplan .gradable .r-item-base {
width: 100%; width: 100%;
} }
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper {
display: grid;
grid-template-columns: 7px 1fr 26px;
width: 100%;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-timing-indicator,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-timing-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-timing-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-timing-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-timing-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-timing-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-timing-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-timing-indicator {
padding-top: 0;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-title,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-title,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-title,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-title,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-title,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-title,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-title,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-title {
padding-top: 5px;
overflow: hidden;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator {
padding-top: 6px;
padding-right: 5px;
}
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.path-local-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.features-treestudyplan .t-item-course .t-item-course-cardwrapper .r-item-course-indicator .t-item-course-config,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .t-item-course-indicator .t-item-course-config,
.features-treestudyplan .r-item-course .r-item-course-cardwrapper .r-item-course-indicator .t-item-course-config {
position: relative;
top: -4px;
}
.path-local-treestudyplan .t-item-invalid .card-body, .path-local-treestudyplan .t-item-invalid .card-body,
.path-local-treestudyplan .r-item-invalid .card-body, .path-local-treestudyplan .r-item-invalid .card-body,
.path-local-treestudyplan .t-item-competency .card-body, .path-local-treestudyplan .t-item-competency .card-body,
.path-local-treestudyplan .t-item-course .card-body, .path-local-treestudyplan .t-item-course .card-body,
.path-local-treestudyplan .r-item-competency .card-body, .path-local-treestudyplan .r-item-course .card-body,
.features-treestudyplan .t-item-invalid .card-body, .features-treestudyplan .t-item-invalid .card-body,
.features-treestudyplan .r-item-invalid .card-body, .features-treestudyplan .r-item-invalid .card-body,
.features-treestudyplan .t-item-competency .card-body, .features-treestudyplan .t-item-competency .card-body,
.features-treestudyplan .t-item-course .card-body, .features-treestudyplan .t-item-course .card-body,
.features-treestudyplan .r-item-competency .card-body { .features-treestudyplan .r-item-course .card-body {
padding: 3px; padding: 3px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;