Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

Reworked card view to better handle long course titles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
amd/build/report-viewer-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/report-viewer-components.min.js.map
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-editor-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-editor-components.min.js.map
View File

File diff suppressed because one or more lines are too long

123
amd/src/report-viewer-components.js
View File

@ -1567,50 +1567,49 @@ export default {
},
},
template: `
<div :class="'r-item-competency completion-'+value.completion">
<b-card no-body >
<b-row no-gutters>
<b-col md="1">
<span
: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 >
<template v-if='!value.course.enrolled'>
<i v-b-popover.top
class="r-course-result fa fa-exclamation-triangle t-not-enrolled-alert"
:title="text.student_not_tracked"></i>
</template>
<template v-else-if='hasprogressinfo'>
<r-progress-circle v-if='["failed", "progress","incomplete"].includes(value.completion)'
:value='courseprogress'
:max='1'
:min='0'
:class="'r-course-result r-completion-'+value.completion"
:icon='circle_icon(value.completion)'
:title="text['completion_'+value.completion]"
></r-progress-circle>
<i v-else v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(value.completion)+
' r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i>
</template>
<template v-else>
<i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(value.completion)+
' 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 :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"
></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"
:title="text.student_not_tracked"></i>
</template>
<template v-else-if='hasprogressinfo'>
<r-progress-circle v-if='["failed", "progress","incomplete"].includes(value.completion)'
:value='courseprogress'
:max='1'
:min='0'
:class="'r-course-result r-completion-'+value.completion"
:icon='circle_icon(value.completion)'
:title="text['completion_'+value.completion]"
></r-progress-circle>
<i v-else v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(value.completion)+
' r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i>
</template>
<template v-else>
<i v-b-popover.top
:class="'r-course-result fa fa-'+completion_icon(value.completion)+
' r-completion-'+value.completion"
:title="text['completion_'+value.completion]"></i>
</template>
</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
:title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate"
:class="'r-timing-indicator timing-'+value.course.timing"></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"
></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="flex-fill align-items-center">
<b-card-body>
<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>
<r-completion-circle class="r-course-graded" :disabled="!isCompletable"
v-model="progress_circle"></r-completion-circle>
</b-card-body>
<div class="h-100 r-item-course-indicator ">
<r-completion-circle class="r-course-graded" :disabled="!isCompletable"
v-model="progress_circle"></r-completion-circle>
</div>
</div>
<b-modal

40
amd/src/studyplan-editor-components.js
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
:title="text['coursetiming_'+value.course.timing]"
v-b-popover.hover.top="startdate+' - '+enddate"
:class="'t-timing-indicator timing-'+value.course.timing"></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="'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 >
<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 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>
</div>
</div>
<b-modal class=""
@ -3566,7 +3566,7 @@ export default {
</b-button>
</template>
</b-modal>
</b-card></div>
</div>
`,
});

65
css/devstyles.css
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;

2
lang/en/local_treestudyplan.php
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';

2
lang/nl/local_treestudyplan.php
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. ';

38
scss/studyplan.scss
View File

@ -254,7 +254,11 @@
.t-studyline-slot,
.r-studyline-slot{
width: 130px;
width: 150px;
&.filter {
width: 130px;
}
}
.r-studyline-slot {
@ -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;

65
styles.css
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;