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

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

@ -157,91 +157,100 @@ 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 v-if="props.readonly"> <div class="flex items-center gap-4">
<it-icon-check <div v-if="props.readonly">
v-if="learningContent.completion_status === 'SUCCESS'" <it-icon-check
class="block h-8 w-8" v-if="learningContent.completion_status === 'SUCCESS'"
></it-icon-check> class="block h-8 w-8"
<div v-else class="h-8 w-8"></div> ></it-icon-check>
</div> <div v-else class="h-8 w-8"></div>
<ItCheckbox
v-else
:checkbox-item="{
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)
"
:icon-unchecked-tailwind-class="
checkboxIconUncheckedTailwindClass(learningContent)
"
@toggle="toggleCompleted(learningContent)"
/>
<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> </div>
<ItCheckbox
<div> v-else
<div v-if="props.readonly" class="w-full text-left sm:w-auto"> :checkbox-item="{
{{ learningContent.title }} value: learningContent.completion_status,
checked: learningContent.completion_status === 'SUCCESS',
}"
:data-cy="`${learningContent.slug}-checkbox`"
:icon-checked-tailwind-class="
checkboxIconCheckedTailwindClass(learningContent)
"
:icon-unchecked-tailwind-class="
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="xl:order-last">
<LearningContentBadge :learning-content="learningContent" />
</div>
<div>
<div v-if="props.readonly" class="w-full text-left sm:w-auto">
{{ learningContent.title }}
</div>
<button
v-else
class="w-full cursor-pointer text-left sm:w-auto"
:data-cy="`${learningContent.slug}`"
@click.stop="circleStore.openLearningContent(learningContent)"
>
{{ learningContent.title }}
</button>
</div> </div>
<button
v-else
class="w-full cursor-pointer text-left sm:w-auto"
:data-cy="`${learningContent.slug}`"
@click.stop="circleStore.openLearningContent(learningContent)"
>
{{ learningContent.title }}
</button>
</div> </div>
</div> </div>
</div> <div
v-if="belongsToCompetenceCertificate(learningContent)"
<div class="ml-16 text-sm text-gray-800"
v-if="belongsToCompetenceCertificate(learningContent)"
class="mb-8 ml-16 text-sm text-gray-800"
>
{{
$t("circlePage.Dieser Inhalt gehört zu x", {
x: (learningContent as LearninContentWithCompetenceCertificate)
?.competence_certificate?.title,
})
}}
<br />
<router-link
v-if="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url"
:to="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url ?? ''"
class="link"
data-cy="show-results"
> >
{{ $t("circlePage.Im KompetenzNavi anschauen") }} {{
</router-link> $t("circlePage.Dieser Inhalt gehört zu x", {
</div> x: (learningContent as LearninContentWithCompetenceCertificate)
?.competence_certificate?.title,
})
}}
<br />
<router-link
v-if="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url"
:to="(learningContent as LearninContentWithCompetenceCertificate).competence_certificate?.frontend_url ?? ''"
class="link"
data-cy="show-results"
>
{{ $t("circlePage.Im KompetenzNavi anschauen") }}
</router-link>
</div>
<div <div
v-if=" v-if="
learningContent.translation_key === continueTranslationKeyTuple[0] && learningContent.translation_key === continueTranslationKeyTuple[0] &&
!props.readonly !props.readonly
" "
class="mb-6" class="my-4"
>
<button
class="btn-blue order-1 sm:order-none"
data-cy="ls-continue-button"
@click.stop="circleStore.openLearningContent(learningContent)"
> >
<span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap"> <button
{{ $t("general.start") }} class="btn-blue order-1 sm:order-none"
</span> data-cy="ls-continue-button"
<span v-else class="whitespace-nowrap"> @click.stop="circleStore.openLearningContent(learningContent)"
{{ $t("general.nextStep") }} >
</span> <span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap">
</button> {{ $t("general.start") }}
</span>
<span v-else class="whitespace-nowrap">
{{ $t("general.nextStep") }}
</span>
</button>
</div>
</div> </div>
</li> </li>
</ol> </ol>