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: `
<div :class="'r-item-competency completion-'+value.completion">
<b-card no-body >
<b-row no-gutters>
<b-col md="1">
<span
<div :class="'r-item-course card completion-'+value.completion">
<div class='r-item-course-cardwrapper mr-0 ml-0 h-100 '>
<div
:title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate"
:class="'r-timing-indicator timing-'+value.course.timing"></span>
</b-col>
<b-col md="11" class="align-items-center">
<b-card-body >
:class="'r-timing-indicator timing-'+value.course.timing"
></div>
<div class="r-item-course-title card-body h-100">
<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'>
<i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
@ -1603,14 +1608,8 @@ export default {
' r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i>
</template>
<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 }}</i></a>
</b-card-body>
</b-col>
</b-row>
</div>
</div>
<b-modal
:id="'r-item-course-details-'+value.id"
:title="value.course.displayname + ' - ' + value.course.fullname"
@ -1692,7 +1691,7 @@ export default {
position="below"
></s-course-extrafields>
</b-modal>
</b-card></div>
</div>
`,
});
@ -2341,24 +2340,24 @@ export default {
},
},
template: `
<div :class="'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')">
<b-card no-body>
<div class='d-flex flex-wrap mr-0 ml-0'>
<div>
<span
<div :class="'r-item-course card '+ (value.course.amteacher?'r-course-am-teacher':'')">
<div class='r-item-course-cardwrapper mr-0 ml-0 h-100 '>
<div
:title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate"
:class="'r-timing-indicator timing-'+value.course.timing"></span>
</div>
<div class="flex-fill align-items-center">
<b-card-body>
:class="'r-timing-indicator timing-'+value.course.timing"
></div>
<div class="r-item-course-title card-body h-100">
<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 }}</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"
v-model="progress_circle"></r-completion-circle>
</b-card-body>
</div>
</div>
<b-modal

View File

@ -3476,26 +3476,26 @@ export default {
},
template: `
<div class="t-item-course">
<b-card no-body >
<div class='d-flex flex-wrap mr-0 ml-0'>
<div>
<span
<div class="t-item-course card">
<div class='t-item-course-cardwrapper mr-0 ml-0 h-100 '>
<div
:title="text['coursetiming_'+value.course.timing]"
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 class="flex-fill align-items-center">
<b-card-body >
<div class="h-100 t-item-course-indicator ">
<a class="t-item-course-config"
v-b-modal="'t-item-course-config-'+value.id"
href="#" @click.prevent=""
><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>
<b-modal class=""
@ -3566,7 +3566,7 @@ export default {
</b-button>
</template>
</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,
.features-treestudyplan .t-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;
}
.path-local-treestudyplan .r-studyline-slot,
@ -731,9 +737,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan a.t-item-course-config {
font-size: 21px;
vertical-align: middle;
float: right;
float: none;
margin-right: 2px;
margin-top: -5px;
margin-top: 0;
}
.path-local-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 {
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 .r-item-invalid .card-body,
.path-local-treestudyplan .t-item-competency .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 .r-item-invalid .card-body,
.features-treestudyplan .t-item-competency .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-left: 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["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["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["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["error:nosuchcompetency"] = 'Waarschuwing: deze competentie is niet langer beschikbaar. ';

View File

@ -254,8 +254,12 @@
.t-studyline-slot,
.r-studyline-slot{
width: 150px;
&.filter {
width: 130px;
}
}
.r-studyline-slot {
min-height: 32px;
@ -615,9 +619,9 @@
a.t-item-course-config {
font-size: 21px /*16pt*/;
vertical-align: middle;
float: right;
float: none;
margin-right: 2px;
margin-top: -5px;
margin-top: 0;
}
.t-item-connector-end {
@ -767,11 +771,37 @@
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,
.r-item-invalid .card-body,
.t-item-competency .card-body,
.t-item-course .card-body,
.r-item-competency .card-body {
.r-item-course .card-body {
padding: 3px;
padding-left: 5px;
padding-right: 5px;

View File

@ -364,6 +364,12 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.path-local-treestudyplan .r-studyline-slot,
.features-treestudyplan .t-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;
}
.path-local-treestudyplan .r-studyline-slot,
@ -731,9 +737,9 @@ body.path-local-treestudyplan .editmode-switch-form > * {
.features-treestudyplan a.t-item-course-config {
font-size: 21px;
vertical-align: middle;
float: right;
float: none;
margin-right: 2px;
margin-top: -5px;
margin-top: 0;
}
.path-local-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 {
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 .r-item-invalid .card-body,
.path-local-treestudyplan .t-item-competency .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 .r-item-invalid .card-body,
.features-treestudyplan .t-item-competency .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-left: 5px;
padding-right: 5px;