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

57
amd/src/report-viewer-components.js
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

28
amd/src/studyplan-editor-components.js
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>
`, `,
}); });

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

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["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';

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["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. ';

36
scss/studyplan.scss
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;

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