Skip to content

Commit d9a32dd

Browse files
Ujjwal-GowdaUjjwal-Gowda
committed
fix(ux): improve mobile tab accessibility and transitions on edit pages
1 parent a1252b8 commit d9a32dd

File tree

5 files changed

+155
-159
lines changed

5 files changed

+155
-159
lines changed

‎src/ux/CardSorting/views/EditTestView.vue‎

Lines changed: 48 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,36 @@
1010
<ButtonSave :visible="change" @click="save" />
1111

1212
<div>
13-
<VTabs bg-color="transparent" color="#FCA326" class="pb-0 mb-0">
14-
<VTab @click="index = 0">
13+
<v-tabs
14+
v-model="index"
15+
bg-color="transparent"
16+
color="#FCA326"
17+
class="pb-0 mb-0"
18+
show-arrows
19+
>
20+
<v-tab :value="0">
1521
{{ $t('CardSorting.test') }}
16-
</VTab>
17-
<VTab @click="index = 1">
22+
</v-tab>
23+
<v-tab :value="1">
1824
{{ $t('ModeratedTest.consentForm') }}
19-
</VTab>
20-
<VTab @click="index = 2">
25+
</v-tab>
26+
<v-tab :value="2">
2127
{{ $t('ModeratedTest.preTest') }}
22-
</VTab>
23-
<VTab @click="index = 3">
28+
</v-tab>
29+
<v-tab :value="3">
2430
{{ $t('CardSorting.categories') }}
25-
</VTab>
26-
<VTab @click="index = 4">
31+
</v-tab>
32+
<v-tab :value="4">
2733
{{ $t('CardSorting.cards') }}
28-
</VTab>
29-
<VTab @click="index = 5">
34+
</v-tab>
35+
<v-tab :value="5">
3036
{{ $t('ModeratedTest.postTest') }}
31-
</VTab>
32-
</VTabs>
37+
</v-tab>
38+
</v-tabs>
3339

34-
<VCol cols="12">
40+
<v-window v-model="index" class="mt-4">
3541
<!-- TEST -->
36-
<div v-if="index === 0">
42+
<v-window-item :value="0">
3743
<TestConfigForm
3844
:welcome="welcomeMessage"
3945
:final-message="finalMessage"
@@ -42,54 +48,58 @@
4248
"
4349
@update:final-message="((finalMessage = $event), (change = true))"
4450
/>
45-
</div>
51+
</v-window-item>
4652

4753
<!-- CONSENT FORM -->
48-
<div v-if="index === 1" rounded="xxl">
54+
<v-window-item :value="1">
4955
<TextareaForm
5056
v-model="consent"
5157
:title="$t('ModeratedTest.consentForm')"
5258
:subtitle="$t('ModeratedTest.consentFormSubtitle')"
5359
@update:value="((consent = $event), (change = true))"
5460
/>
55-
</div>
61+
</v-window-item>
5662

5763
<!-- PRE-TEST -->
58-
<v-card v-if="index === 2" rounded="xxl">
59-
<UserVariables
60-
type="pre-test"
61-
@change="change = true"
62-
@update="store.dispatch('setPreTest', $event)"
63-
/>
64-
</v-card>
64+
<v-window-item :value="2">
65+
<v-card rounded="xxl">
66+
<UserVariables
67+
type="pre-test"
68+
@change="change = true"
69+
@update="store.dispatch('setPreTest', $event)"
70+
/>
71+
</v-card>
72+
</v-window-item>
6573

6674
<!-- CATEGORIES -->
67-
<div v-if="index === 3" rounded="xxl">
75+
<v-window-item :value="3">
6876
<CategoriesEditCardSorting
6977
@change="change = true"
7078
@categories="categories = $event"
7179
@options="optionsCategories = $event"
7280
/>
73-
</div>
81+
</v-window-item>
7482

7583
<!-- CARDS -->
76-
<div v-if="index === 4" rounded="xxl">
84+
<v-window-item :value="4">
7785
<CardsEditCardSorting
7886
@change="change = true"
7987
@cards="cards = $event"
8088
@options="optionsCards = $event"
8189
/>
82-
</div>
90+
</v-window-item>
8391

8492
<!-- POS-TEST -->
85-
<v-card v-if="index === 5" rounded="xxl">
86-
<UserVariables
87-
type="post-test"
88-
@change="change = true"
89-
@update="store.dispatch('setPostTest', $event)"
90-
/>
91-
</v-card>
92-
</VCol>
93+
<v-window-item :value="5">
94+
<v-card rounded="xxl">
95+
<UserVariables
96+
type="post-test"
97+
@change="change = true"
98+
@update="store.dispatch('setPostTest', $event)"
99+
/>
100+
</v-card>
101+
</v-window-item>
102+
</v-window>
93103
</div>
94104
</v-container>
95105
</PageWrapper>

‎src/ux/Heuristic/components/HeuristicsAnalytics.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@
163163
color="grey-darken-2"
164164
class="mt-2"
165165
align-tabs="center"
166+
show-arrows
166167
>
167168
<v-tab
168169
class="tab-text"

‎src/ux/Heuristic/views/EditTest.vue‎

Lines changed: 30 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -10,62 +10,46 @@
1010
<ButtonSave :visible="!isTemplate && change" @click="save" />
1111

1212
<div>
13-
<!-- Desktop Tabs -->
1413
<v-tabs
15-
v-if="!isMobile"
1614
v-model="index"
1715
bg-color="transparent"
1816
color="#FCA326"
1917
class="pb-0 mb-0"
18+
show-arrows
2019
>
21-
<v-tab>{{ $t('HeuristicsEditTest.titles.heuristics') }}</v-tab>
22-
<v-tab>{{ $t('HeuristicsEditTest.titles.options') }}</v-tab>
23-
<v-tab>{{ $t('HeuristicsEditTest.titles.weights') }}</v-tab>
24-
<v-tab v-if="showSettingsTab">{{
20+
<v-tab :value="0">{{ $t('HeuristicsEditTest.titles.heuristics') }}</v-tab>
21+
<v-tab :value="1">{{ $t('HeuristicsEditTest.titles.options') }}</v-tab>
22+
<v-tab :value="2">{{ $t('HeuristicsEditTest.titles.weights') }}</v-tab>
23+
<v-tab v-if="showSettingsTab" :value="3">{{
2524
$t('HeuristicsEditTest.titles.settings')
2625
}}</v-tab>
2726
</v-tabs>
2827

29-
<!-- Mobile Select Dropdown -->
30-
<v-select
31-
v-else
32-
v-model="index"
33-
:items="tabItems"
34-
variant="outlined"
35-
density="compact"
36-
class="mobile-tab-select"
37-
prepend-inner-icon="mdi-menu"
38-
hide-details
39-
>
40-
<template #selection="{ item }">
41-
<div class="d-flex align-center justify-space-between w-100">
42-
<span class="font-weight-medium">{{ item.title }}</span>
43-
<!-- <v-icon size="small">mdi-chevron-down</v-icon> -->
44-
</div>
45-
</template>
46-
</v-select>
47-
48-
<div class="mt-4">
49-
<HeuristicsTable
50-
v-if="index == 0"
51-
:is-template="isTemplate"
52-
@change="change = true"
53-
/>
54-
<OptionsTable
55-
v-if="index == 1"
56-
:is-template="isTemplate"
57-
@change="change = true"
58-
/>
59-
<WeightTable
60-
v-if="index == 2"
61-
:is-template="isTemplate"
62-
@change="change = true"
63-
/>
64-
<HeuristicsSettings
65-
v-if="showSettingsTab && index == 3"
66-
:is-template="isTemplate"
67-
/>
68-
</div>
28+
<v-window v-model="index" class="mt-4">
29+
<v-window-item :value="0">
30+
<HeuristicsTable
31+
:is-template="isTemplate"
32+
@change="change = true"
33+
/>
34+
</v-window-item>
35+
<v-window-item :value="1">
36+
<OptionsTable
37+
:is-template="isTemplate"
38+
@change="change = true"
39+
/>
40+
</v-window-item>
41+
<v-window-item :value="2">
42+
<WeightTable
43+
:is-template="isTemplate"
44+
@change="change = true"
45+
/>
46+
</v-window-item>
47+
<v-window-item v-if="showSettingsTab" :value="3">
48+
<HeuristicsSettings
49+
:is-template="isTemplate"
50+
/>
51+
</v-window-item>
52+
</v-window>
6953
</div>
7054
</v-container>
7155
</PageWrapper>
@@ -101,7 +85,6 @@ const { t } = useI18n()
10185
10286
const index = ref(0)
10387
const change = ref(false)
104-
const windowWidth = ref(window.innerWidth)
10588
const showSettingsTab = computed(() => !props.isTemplate)
10689
const pageTitle = computed(() =>
10790
props.isTemplate
@@ -114,38 +97,10 @@ const pageSubtitle = computed(() =>
11497
: t('HeuristicsEditTest.pageSubtitle'),
11598
)
11699
117-
// Tab items for mobile dropdown
118-
const tabItems = computed(() => {
119-
const items = [
120-
{ title: 'HEURISTICS', value: 0 },
121-
{ title: 'OPTIONS', value: 1 },
122-
{ title: 'WEIGHTS', value: 2 },
123-
]
124-
125-
if (showSettingsTab.value) {
126-
items.push({ title: 'SETTINGS', value: 3 })
127-
}
128-
129-
return items
130-
})
131-
132-
// Check if mobile
133-
const isMobile = computed(() => windowWidth.value < 960)
134-
135-
// Handle window resize
136-
const handleResize = () => {
137-
windowWidth.value = window.innerWidth
138-
}
139-
140100
onMounted(() => {
141101
if (props.isTemplate && props.templateTest) {
142102
store.commit('SET_TEST', structuredClone(props.templateTest))
143103
}
144-
window.addEventListener('resize', handleResize)
145-
})
146-
147-
onBeforeUnmount(() => {
148-
window.removeEventListener('resize', handleResize)
149104
})
150105
151106
const save = async () => {

‎src/ux/UserTest/components/editTest/EditUserTest.vue‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,63 @@
11
<template>
2-
<v-tabs bg-color="transparent" color="#FCA326" class="pb-0 mb-0">
3-
<v-tab @click="index = 0">Test</v-tab>
4-
<v-tab @click="index = 1">{{ $t('ModeratedTest.consentForm') }}</v-tab>
5-
<v-tab @click="index = 2">{{ $t('ModeratedTest.preTest') }}</v-tab>
6-
<v-tab @click="index = 3">{{ $t('ModeratedTest.tasks') }}</v-tab>
7-
<v-tab @click="index = 4">{{ $t('ModeratedTest.postTest') }}</v-tab>
2+
<v-tabs
3+
v-model="index"
4+
bg-color="transparent"
5+
color="#FCA326"
6+
class="pb-0 mb-0"
7+
show-arrows
8+
>
9+
<v-tab :value="0">Test</v-tab>
10+
<v-tab :value="1">{{ $t('ModeratedTest.consentForm') }}</v-tab>
11+
<v-tab :value="2">{{ $t('ModeratedTest.preTest') }}</v-tab>
12+
<v-tab :value="3">{{ $t('ModeratedTest.tasks') }}</v-tab>
13+
<v-tab :value="4">{{ $t('ModeratedTest.postTest') }}</v-tab>
814
</v-tabs>
915

10-
<v-col cols="12">
16+
<v-window v-model="index" class="mt-4">
1117
<!-- TEST -->
12-
<div v-if="index === 0">
18+
<v-window-item :value="0">
1319
<TestConfigForm
14-
:welcome="welcomeMessage" :final-message="finalMessage"
20+
:welcome="welcomeMessage"
21+
:final-message="finalMessage"
1522
@update:welcome-message="saveState('welcomeMessage', $event)"
16-
@update:final-message="saveState('finalMessage', $event)" />
17-
</div>
23+
@update:final-message="saveState('finalMessage', $event)"
24+
/>
25+
</v-window-item>
1826

1927
<!-- COSENT FORM -->
20-
<v-card v-if="index === 1" rounded="xxl">
21-
<TextareaForm
22-
v-model="consent" :title="$t('ModeratedTest.consentForm')"
23-
:subtitle="$t('ModeratedTest.consentFormSubtitle')" @update:value="saveState('consent', $event)" />
24-
</v-card>
28+
<v-window-item :value="1">
29+
<v-card rounded="xxl">
30+
<TextareaForm
31+
v-model="consent"
32+
:title="$t('ModeratedTest.consentForm')"
33+
:subtitle="$t('ModeratedTest.consentFormSubtitle')"
34+
@update:value="saveState('consent', $event)"
35+
/>
36+
</v-card>
37+
</v-window-item>
2538

2639
<!-- PRE-TEST -->
27-
<v-card v-if="index === 2" rounded="xxl">
28-
<UserVariables type="pre-test" @update="saveState('preTest', $event)" />
29-
</v-card>
40+
<v-window-item :value="2">
41+
<v-card rounded="xxl">
42+
<UserVariables type="pre-test" @update="saveState('preTest', $event)" />
43+
</v-card>
44+
</v-window-item>
3045

3146
<!-- TASKS -->
32-
<ListTasks v-if="index === 3" />
47+
<v-window-item :value="3">
48+
<ListTasks />
49+
</v-window-item>
3350

3451
<!-- POST-TEST -->
35-
<v-card v-if="index === 4" rounded="xxl">
36-
<UserVariables type="post-test" @update="saveState('postTest', $event)" />
37-
</v-card>
38-
</v-col>
52+
<v-window-item :value="4">
53+
<v-card rounded="xxl">
54+
<UserVariables
55+
type="post-test"
56+
@update="saveState('postTest', $event)"
57+
/>
58+
</v-card>
59+
</v-window-item>
60+
</v-window>
3961
</template>
4062

4163
<script setup>

0 commit comments

Comments
 (0)