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

Improve a11y, fix responsiveness for unit

This commit is contained in:
Christian Cueni 2022-10-13 13:43:18 +02:00
parent bb1db2d845
commit c7414c0714
5 changed files with 65 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/components/learningPath/LearningSequence.vue
View File

@ -93,8 +93,8 @@ const learningSequenceBorderClass = computed(() => {
<div>{{ humanizeDuration(learningSequence.minutes) }}</div> <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
</div> </div>
<div class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass"> <ol class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
<div <li
v-for="learningUnit in learningSequence.learningUnits" v-for="learningUnit in learningSequence.learningUnits"
:id="learningUnit.slug" :id="learningUnit.slug"
:key="learningUnit.id" :key="learningUnit.id"
@ -106,27 +106,29 @@ const learningSequenceBorderClass = computed(() => {
{{ humanizeDuration(learningUnit.minutes) }} {{ humanizeDuration(learningUnit.minutes) }}
</div> </div>
</div> </div>
<ol>
<div <li
v-for="learningContent in learningUnit.learningContents" v-for="learningContent in learningUnit.learningContents"
:key="learningContent.id" :key="learningContent.id"
class="flex gap-4 pb-3 lg:pb-6" class="flex gap-4 pb-3 lg:pb-6 items-center"
> >
<ItCheckbox <ItCheckbox
:model-value="learningContent.completion_status === 'success'" :model-value="learningContent.completion_status === 'success'"
:on-toggle="() => toggleCompleted(learningContent)" :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
class="cursor-pointer w-full sm:w-auto text-left"
@click.stop="circleStore.openLearningContent(learningContent)"
:data-cy="`${learningContent.slug}`" :data-cy="`${learningContent.slug}`"
>
<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 }} {{ learningContent.title }}
</div> </button>
<div <div
class="flex items-center gap-4 flex-col justify-between sm:flex-row sm:grow" class="flex items-center gap-4 flex-col justify-between md:flex-row sm:grow lg:flex-col xl:flex-row"
> >
<button <button
v-if=" v-if="
@ -136,7 +138,9 @@ const learningSequenceBorderClass = computed(() => {
data-cy="ls-continue-button" data-cy="ls-continue-button"
@click.stop="circleStore.openLearningContent(learningContent)" @click.stop="circleStore.openLearningContent(learningContent)"
> >
<span v-if="continueTranslationKeyTuple[1]" class="whitespace-nowrap" <span
v-if="continueTranslationKeyTuple[1]"
class="whitespace-nowrap"
>Los geht's >Los geht's
</span> </span>
<span v-else class="whitespace-nowrap"> Weiter geht's </span> <span v-else class="whitespace-nowrap"> Weiter geht's </span>
@ -149,8 +153,9 @@ const learningSequenceBorderClass = computed(() => {
</div> </div>
</div> </div>
</span> </span>
</ItCheckbox>
</div> </div>
</li>
</ol>
<div <div
v-if="learningUnit.children.length" v-if="learningUnit.children.length"
@ -182,8 +187,8 @@ const learningSequenceBorderClass = computed(() => {
</div> </div>
<hr v-if="!learningUnit.last" class="-mx-4 text-gray-500" /> <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500" />
</div> </li>
</div> </ol>
</div> </div>
</template> </template>

17
client/src/components/ui/ItCheckbox.vue
View File

@ -18,25 +18,22 @@ defineEmits(["update:modelValue"]);
<template> <template>
<div <div
class="flex flex-row sm:place-items-center flex-grow"
:class="{ :class="{
'opacity-50': disabled, 'opacity-50': disabled,
'cursor-not-allowed': disabled, 'cursor-not-allowed': disabled,
}" }"
@click="$emit('update:modelValue', !modelValue)" @click="$emit('update:modelValue', !modelValue)"
class="w-8 h-8 cursor-pointer"
> >
<div <button
v-if="modelValue" 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()" @click.stop="props.onToggle()"
></div> ></button>
<div <button
v-else 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()" @click.stop="props.onToggle()"
></div> ></button>
<div class="flex-auto pl-4 pt-1 sm:pt-0">
<slot></slot>
</div>
</div> </div>
</template> </template>

8
client/src/pages/learningPath/CirclePage.vue
View File

@ -143,8 +143,8 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24"> <ol class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
<div <li
v-for="learningSequence in circleStore.circle?.learningSequences || v-for="learningSequence in circleStore.circle?.learningSequences ||
[]" []"
:key="learningSequence.translation_key" :key="learningSequence.translation_key"
@ -152,8 +152,8 @@ onMounted(async () => {
<LearningSequence <LearningSequence
:learning-sequence="learningSequence" :learning-sequence="learningSequence"
></LearningSequence> ></LearningSequence>
</div> </li>
</div> </ol>
</div> </div>
</div> </div>
</div> </div>

10
cypress/e2e/circle.cy.js
View File

@ -16,17 +16,17 @@ describe("circle page", () => {
cy.get('[data-cy="circle-title"]').should("contain", "Analyse"); cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
cy.get( 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(); ).click();
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
// completion data should still be there after reload // completion data should still be there after reload
cy.reload(); cy.reload();
cy.get( 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"); ).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="complete-and-continue"]').click();
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
cy.get( 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"); ).should("have.class", "cy-checkbox-checked");
cy.get( cy.get(

2
cypress/e2e/learningPath.cy.js
View File

@ -51,7 +51,7 @@ describe("learningPath page", () => {
// mark a learning content in second circle // mark a learning content in second circle
cy.get('[data-cy="circle-analyse"]').click({ force: true }); cy.get('[data-cy="circle-analyse"]').click({ force: true });
cy.get( 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(); ).click();
cy.get('[data-cy="back-to-learning-path-button"]').click(); cy.get('[data-cy="back-to-learning-path-button"]').click();