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"
: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">
<it-icon-check
v-if="learningContent.completion_status === 'SUCCESS'"
@ -171,7 +172,6 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
value: learningContent.completion_status,
checked: learningContent.completion_status === 'SUCCESS',
}"
:disabled="!learningContent.can_user_self_toggle_course_completion"
:data-cy="`${learningContent.slug}-checkbox`"
:icon-checked-tailwind-class="
checkboxIconCheckedTailwindClass(learningContent)
@ -180,8 +180,17 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
checkboxIconUncheckedTailwindClass(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">
<LearningContentBadge :learning-content="learningContent" />
</div>
@ -201,10 +210,9 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
</div>
</div>
</div>
<div
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", {
@ -228,7 +236,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
learningContent.translation_key === continueTranslationKeyTuple[0] &&
!props.readonly
"
class="mb-6"
class="my-4"
>
<button
class="btn-blue order-1 sm:order-none"
@ -243,6 +251,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
</span>
</button>
</div>
</div>
</li>
</ol>