Style changes in circle page
This commit is contained in:
Daniel Egger
parent
45da2ab7d7
commit
c7e443a4e3
|
|
@ -157,91 +157,100 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
|
|||
v-for="learningContent in learningUnit.learningContents"
|
||||
:key="learningContent.id"
|
||||
>
|
||||
<div class="flex items-center gap-4 pb-6">
|
||||
<div v-if="props.readonly">
|
||||
<it-icon-check
|
||||
v-if="learningContent.completion_status === 'SUCCESS'"
|
||||
class="block h-8 w-8"
|
||||
></it-icon-check>
|
||||
<div v-else class="h-8 w-8"></div>
|
||||
</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 class="pb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div v-if="props.readonly">
|
||||
<it-icon-check
|
||||
v-if="learningContent.completion_status === 'SUCCESS'"
|
||||
class="block h-8 w-8"
|
||||
></it-icon-check>
|
||||
<div v-else class="h-8 w-8"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div v-if="props.readonly" class="w-full text-left sm:w-auto">
|
||||
{{ learningContent.title }}
|
||||
<ItCheckbox
|
||||
v-else
|
||||
:checkbox-item="{
|
||||
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>
|
||||
<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
|
||||
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"
|
||||
<div
|
||||
v-if="belongsToCompetenceCertificate(learningContent)"
|
||||
class="ml-16 text-sm text-gray-800"
|
||||
>
|
||||
{{ $t("circlePage.Im KompetenzNavi anschauen") }}
|
||||
</router-link>
|
||||
</div>
|
||||
{{
|
||||
$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>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
learningContent.translation_key === continueTranslationKeyTuple[0] &&
|
||||
!props.readonly
|
||||
"
|
||||
class="mb-6"
|
||||
>
|
||||
<button
|
||||
class="btn-blue order-1 sm:order-none"
|
||||
data-cy="ls-continue-button"
|
||||
@click.stop="circleStore.openLearningContent(learningContent)"
|
||||
<div
|
||||
v-if="
|
||||
learningContent.translation_key === continueTranslationKeyTuple[0] &&
|
||||
!props.readonly
|
||||
"
|
||||
class="my-4"
|
||||
>
|
||||
<span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap">
|
||||
{{ $t("general.start") }}
|
||||
</span>
|
||||
<span v-else class="whitespace-nowrap">
|
||||
{{ $t("general.nextStep") }}
|
||||
</span>
|
||||
</button>
|
||||
<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">
|
||||
{{ $t("general.start") }}
|
||||
</span>
|
||||
<span v-else class="whitespace-nowrap">
|
||||
{{ $t("general.nextStep") }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
|
|
|||
Loading…
Reference in New Issue