ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style changes in circle page

This commit is contained in:
Daniel Egger 2023-09-14 15:18:57 +02:00
parent 45da2ab7d7
commit c7e443a4e3
1 changed files with 87 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/pages/learningPath/circlePage/LearningSequence.vue
View File

@ -157,7 +157,8 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
v-for="learningContent in learningUnit.learningContents" v-for="learningContent in learningUnit.learningContents"
:key="learningContent.id" :key="learningContent.id"
> >
<div class="flex items-center gap-4 pb-6"> <div class="pb-6">
<div class="flex items-center gap-4">
<div v-if="props.readonly"> <div v-if="props.readonly">
<it-icon-check <it-icon-check
v-if="learningContent.completion_status === 'SUCCESS'" v-if="learningContent.completion_status === 'SUCCESS'"
@ -171,7 +172,6 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
value: learningContent.completion_status, value: learningContent.completion_status,
checked: learningContent.completion_status === 'SUCCESS', checked: learningContent.completion_status === 'SUCCESS',
}" }"
:disabled="!learningContent.can_user_self_toggle_course_completion"
:data-cy="`${learningContent.slug}-checkbox`" :data-cy="`${learningContent.slug}-checkbox`"
:icon-checked-tailwind-class=" :icon-checked-tailwind-class="
checkboxIconCheckedTailwindClass(learningContent) checkboxIconCheckedTailwindClass(learningContent)
@ -180,8 +180,17 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
checkboxIconUncheckedTailwindClass(learningContent) checkboxIconUncheckedTailwindClass(learningContent)
" "
@toggle="toggleCompleted(learningContent)" @toggle="toggleCompleted(learningContent)"
@click.stop="
() => {
// when disabled open the learning content directly
if (!learningContent.can_user_self_toggle_course_completion)
circleStore.openLearningContent(learningContent);
}
"
/> />
<div class="flex flex-auto flex-col gap-4 xl:flex-row xl:justify-between"> <div
class="flex flex-auto flex-col gap-4 xl:flex-row xl:justify-between"
>
<div class="xl:order-last"> <div class="xl:order-last">
<LearningContentBadge :learning-content="learningContent" /> <LearningContentBadge :learning-content="learningContent" />
</div> </div>
@ -201,10 +210,9 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if="belongsToCompetenceCertificate(learningContent)" v-if="belongsToCompetenceCertificate(learningContent)"
class="mb-8 ml-16 text-sm text-gray-800" class="ml-16 text-sm text-gray-800"
> >
{{ {{
$t("circlePage.Dieser Inhalt gehört zu x", { $t("circlePage.Dieser Inhalt gehört zu x", {
@ -228,7 +236,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
learningContent.translation_key === continueTranslationKeyTuple[0] && learningContent.translation_key === continueTranslationKeyTuple[0] &&
!props.readonly !props.readonly
" "
class="mb-6" class="my-4"
> >
<button <button
class="btn-blue order-1 sm:order-none" class="btn-blue order-1 sm:order-none"
@ -243,6 +251,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
</span> </span>
</button> </button>
</div> </div>
</div>
</li> </li>
</ol> </ol>