Improve a11y, fix responsiveness for unit
This commit is contained in:
Christian Cueni
parent
bb1db2d845
commit
c7414c0714
|
|
@ -93,8 +93,8 @@ const learningSequenceBorderClass = computed(() => {
|
|||
<div>{{ humanizeDuration(learningSequence.minutes) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
|
||||
<div
|
||||
<ol class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
|
||||
<li
|
||||
v-for="learningUnit in learningSequence.learningUnits"
|
||||
:id="learningUnit.slug"
|
||||
:key="learningUnit.id"
|
||||
|
|
@ -106,51 +106,56 @@ const learningSequenceBorderClass = computed(() => {
|
|||
{{ humanizeDuration(learningUnit.minutes) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="learningContent in learningUnit.learningContents"
|
||||
:key="learningContent.id"
|
||||
class="flex gap-4 pb-3 lg:pb-6"
|
||||
>
|
||||
<ItCheckbox
|
||||
:model-value="learningContent.completion_status === 'success'"
|
||||
:on-toggle="() => toggleCompleted(learningContent)"
|
||||
:data-cy="`${learningContent.slug}`"
|
||||
<ol>
|
||||
<li
|
||||
v-for="learningContent in learningUnit.learningContents"
|
||||
:key="learningContent.id"
|
||||
class="flex gap-4 pb-3 lg:pb-6 items-center"
|
||||
>
|
||||
<span class="flex flex-wrap gap-4 items-center">
|
||||
<div
|
||||
class="cursor-pointer w-full sm:w-auto"
|
||||
@click.stop="circleStore.openLearningContent(learningContent)"
|
||||
>
|
||||
{{ learningContent.title }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-4 flex-col justify-between sm:flex-row sm:grow"
|
||||
>
|
||||
<ItCheckbox
|
||||
:model-value="learningContent.completion_status === 'success'"
|
||||
:on-toggle="() => toggleCompleted(learningContent)"
|
||||
:data-cy="`${learningContent.slug}-checkbox`"
|
||||
/>
|
||||
<div class="flex-auto pt-1 sm:pt-0">
|
||||
<span class="flex gap-4 items-center xl:h-10">
|
||||
<button
|
||||
v-if="
|
||||
learningContent.translation_key === continueTranslationKeyTuple[0]
|
||||
"
|
||||
class="btn-blue order-1 sm:order-none"
|
||||
data-cy="ls-continue-button"
|
||||
class="cursor-pointer w-full sm:w-auto text-left"
|
||||
@click.stop="circleStore.openLearningContent(learningContent)"
|
||||
:data-cy="`${learningContent.slug}`"
|
||||
>
|
||||
<span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap"
|
||||
>Los geht's
|
||||
</span>
|
||||
<span v-else class="whitespace-nowrap"> Weiter geht's </span>
|
||||
{{ learningContent.title }}
|
||||
</button>
|
||||
<div class="hidden sm:block"></div>
|
||||
<div class="w-full sm:w-auto">
|
||||
<LearningContentBadge
|
||||
:learning-content-type="learningContent.contents[0].type"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-4 flex-col justify-between md:flex-row sm:grow lg:flex-col xl:flex-row"
|
||||
>
|
||||
<button
|
||||
v-if="
|
||||
learningContent.translation_key === continueTranslationKeyTuple[0]
|
||||
"
|
||||
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"
|
||||
>Los geht's
|
||||
</span>
|
||||
<span v-else class="whitespace-nowrap"> Weiter geht's </span>
|
||||
</button>
|
||||
<div class="hidden sm:block"></div>
|
||||
<div class="w-full sm:w-auto">
|
||||
<LearningContentBadge
|
||||
:learning-content-type="learningContent.contents[0].type"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</ItCheckbox>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div
|
||||
v-if="learningUnit.children.length"
|
||||
|
|
@ -182,8 +187,8 @@ const learningSequenceBorderClass = computed(() => {
|
|||
</div>
|
||||
|
||||
<hr v-if="!learningUnit.last" class="-mx-4 text-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,25 +18,22 @@ defineEmits(["update:modelValue"]);
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-row sm:place-items-center flex-grow"
|
||||
:class="{
|
||||
'opacity-50': disabled,
|
||||
'cursor-not-allowed': disabled,
|
||||
}"
|
||||
@click="$emit('update:modelValue', !modelValue)"
|
||||
class="w-8 h-8 cursor-pointer"
|
||||
>
|
||||
<div
|
||||
<button
|
||||
v-if="modelValue"
|
||||
class="w-8 h-8 cursor-pointer flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
|
||||
class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
|
||||
@click.stop="props.onToggle()"
|
||||
></div>
|
||||
<div
|
||||
></button>
|
||||
<button
|
||||
v-else
|
||||
class="w-8 h-8 cursor-pointer flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
|
||||
class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
|
||||
@click.stop="props.onToggle()"
|
||||
></div>
|
||||
<div class="flex-auto pl-4 pt-1 sm:pt-0">
|
||||
<slot></slot>
|
||||
</div>
|
||||
></button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -143,8 +143,8 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
|
||||
<div
|
||||
<ol class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
|
||||
<li
|
||||
v-for="learningSequence in circleStore.circle?.learningSequences ||
|
||||
[]"
|
||||
:key="learningSequence.translation_key"
|
||||
|
|
@ -152,8 +152,8 @@ onMounted(async () => {
|
|||
<LearningSequence
|
||||
:learning-sequence="learningSequence"
|
||||
></LearningSequence>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,17 +16,17 @@ describe("circle page", () => {
|
|||
cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
|
||||
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox'
|
||||
).click();
|
||||
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox-checked'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
|
||||
// completion data should still be there after reload
|
||||
cy.reload();
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse"] > .cy-checkbox-checked'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-einleitung-circle-analyse-checkbox"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
});
|
||||
|
||||
|
|
@ -62,10 +62,10 @@ describe("circle page", () => {
|
|||
cy.get('[data-cy="complete-and-continue"]').click();
|
||||
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto"] > .cy-checkbox-checked'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto-checkbox"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug"] > .cy-checkbox-checked'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug-checkbox"] > .cy-checkbox-checked'
|
||||
).should("have.class", "cy-checkbox-checked");
|
||||
|
||||
cy.get(
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ describe("learningPath page", () => {
|
|||
// mark a learning content in second circle
|
||||
cy.get('[data-cy="circle-analyse"]').click({ force: true });
|
||||
cy.get(
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug"] > .cy-checkbox'
|
||||
'[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug-checkbox"] > .cy-checkbox'
|
||||
).click();
|
||||
cy.get('[data-cy="back-to-learning-path-button"]').click();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue