Skip to content

Commit 8efe4f3

Browse files
abelsiqueiraabelsiqueira
authored
Merge pull request #772 from citation-file-format/604-landmark
2 parents c039e39 + 845448d commit 8efe4f3

2 files changed

Lines changed: 114 additions & 111 deletions

File tree

‎src/components/LayoutStepper.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<q-header id="header-inner">
44
<a
55
class="skip-to-main-content-link"
6-
href="#middle"
6+
href="#main"
77
id="skipToMain"
88
v-on:blur="skipToMainFocused = false"
99
v-on:click.prevent="focusMain"
@@ -44,19 +44,21 @@
4444

4545
<q-page-container>
4646
<q-page
47-
id="middle"
4847
class="row"
48+
id="main"
4949
role="main"
5050
tabindex="0"
5151
>
52-
<Stepper />
52+
<aside class="bg-secondary col-12 col-sm-2 gt-xs">
53+
<Stepper />
54+
</aside>
5355
<div
5456
id="form"
5557
class="col-12 col-lg-5 col-sm-10"
5658
>
57-
<div id="form-content">
59+
<form id="form-content">
5860
<router-view />
59-
</div>
61+
</form>
6062

6163
<div id="form-button-bar">
6264
<StepperActions />
@@ -107,7 +109,7 @@ export default defineComponent({
107109
const isPreviewDrawerEnabled = ref(false)
108110
return {
109111
focusMain: () => {
110-
const element = window.document.getElementById('middle')
112+
const element = window.document.getElementById('main')
111113
if (!element) return
112114
element.focus()
113115
},

‎src/components/Stepper.vue‎

Lines changed: 106 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,118 @@
11
<template>
2-
<q-stepper
3-
animated
4-
color="primary"
5-
class="bg-secondary col-12 col-sm-2 gt-xs text-primary"
6-
error-color="negative"
7-
error-icon="warning"
8-
flat
9-
header-nav
10-
inactive-color="primary"
11-
inactive-icon=""
12-
v-bind:model-value="stepName"
13-
vertical
14-
>
15-
<q-step
16-
data-cy="step-start"
17-
name="start"
18-
aria-label="Start"
19-
title="Start"
20-
v-bind:active-icon="errorStateScreenStart ? 'warning' : 'edit'"
21-
v-bind:error="errorStateScreenStart"
22-
v-bind:order="0"
23-
v-on:click="setStepName('start')"
24-
/>
2+
<nav>
3+
<q-stepper
4+
animated
5+
class="transparent"
6+
error-color="negative"
7+
error-icon="warning"
8+
flat
9+
header-nav
10+
inactive-color="primary"
11+
inactive-icon=""
12+
v-bind:model-value="stepName"
13+
vertical
14+
>
15+
<q-step
16+
data-cy="step-start"
17+
name="start"
18+
aria-label="Start"
19+
title="Start"
20+
v-bind:active-icon="errorStateScreenStart ? 'warning' : 'edit'"
21+
v-bind:error="errorStateScreenStart"
22+
v-bind:order="0"
23+
v-on:click="setStepName('start')"
24+
/>
2525

26-
<q-step
27-
data-cy="step-authors"
28-
name="authors"
29-
aria-label="Authors"
30-
title="Authors"
31-
v-bind:active-icon="errorStateScreenAuthors ? 'warning' : 'edit'"
32-
v-bind:error="errorStateScreenAuthors"
33-
v-bind:order="1"
34-
v-on:click="setStepName('authors')"
35-
/>
26+
<q-step
27+
data-cy="step-authors"
28+
name="authors"
29+
aria-label="Authors"
30+
title="Authors"
31+
v-bind:active-icon="errorStateScreenAuthors ? 'warning' : 'edit'"
32+
v-bind:error="errorStateScreenAuthors"
33+
v-bind:order="1"
34+
v-on:click="setStepName('authors')"
35+
/>
3636

37-
<q-step
38-
data-cy="step-identifiers"
39-
name="identifiers"
40-
aria-label="Identifiers"
41-
title="Identifiers"
42-
v-bind:active-icon="errorStateScreenIdentifiers ? 'warning' : 'edit'"
43-
v-bind:error="errorStateScreenIdentifiers"
44-
v-bind:order="2"
45-
v-if="showAdvanced"
46-
v-on:click="setStepName('identifiers')"
47-
/>
37+
<q-step
38+
data-cy="step-identifiers"
39+
name="identifiers"
40+
aria-label="Identifiers"
41+
title="Identifiers"
42+
v-bind:active-icon="errorStateScreenIdentifiers ? 'warning' : 'edit'"
43+
v-bind:error="errorStateScreenIdentifiers"
44+
v-bind:order="2"
45+
v-if="showAdvanced"
46+
v-on:click="setStepName('identifiers')"
47+
/>
4848

49-
<q-step
50-
data-cy="step-related-resources"
51-
name="related-resources"
52-
aria-label="Related resources"
53-
title="Related resources"
54-
v-bind:active-icon="errorStateScreenRelatedResources ? 'warning' : 'edit'"
55-
v-bind:error="errorStateScreenRelatedResources"
56-
v-bind:order="3"
57-
v-if="showAdvanced"
58-
v-on:click="setStepName('related-resources')"
59-
/>
49+
<q-step
50+
data-cy="step-related-resources"
51+
name="related-resources"
52+
aria-label="Related resources"
53+
title="Related resources"
54+
v-bind:active-icon="errorStateScreenRelatedResources ? 'warning' : 'edit'"
55+
v-bind:error="errorStateScreenRelatedResources"
56+
v-bind:order="3"
57+
v-if="showAdvanced"
58+
v-on:click="setStepName('related-resources')"
59+
/>
6060

61-
<q-step
62-
data-cy="step-abstract"
63-
name="abstract"
64-
aria-label="Abstract"
65-
title="Abstract"
66-
v-bind:order="4"
67-
v-if="showAdvanced"
68-
v-on:click="setStepName('abstract')"
69-
/>
61+
<q-step
62+
data-cy="step-abstract"
63+
name="abstract"
64+
aria-label="Abstract"
65+
title="Abstract"
66+
v-bind:order="4"
67+
v-if="showAdvanced"
68+
v-on:click="setStepName('abstract')"
69+
/>
7070

71-
<q-step
72-
data-cy="step-keywords"
73-
name="keywords"
74-
aria-label="Keywords"
75-
title="Keywords"
76-
v-bind:active-icon="errorStateScreenKeywords ? 'warning' : 'edit'"
77-
v-bind:error="errorStateScreenKeywords"
78-
v-bind:order="5"
79-
v-if="showAdvanced"
80-
v-on:click="setStepName('keywords')"
81-
/>
71+
<q-step
72+
data-cy="step-keywords"
73+
name="keywords"
74+
aria-label="Keywords"
75+
title="Keywords"
76+
v-bind:active-icon="errorStateScreenKeywords ? 'warning' : 'edit'"
77+
v-bind:error="errorStateScreenKeywords"
78+
v-bind:order="5"
79+
v-if="showAdvanced"
80+
v-on:click="setStepName('keywords')"
81+
/>
8282

83-
<q-step
84-
data-cy="step-license"
85-
name="license"
86-
aria-label="License"
87-
title="License"
88-
v-bind:order="6"
89-
v-if="showAdvanced"
90-
v-on:click="setStepName('license')"
91-
/>
83+
<q-step
84+
data-cy="step-license"
85+
name="license"
86+
aria-label="License"
87+
title="License"
88+
v-bind:order="6"
89+
v-if="showAdvanced"
90+
v-on:click="setStepName('license')"
91+
/>
9292

93-
<q-step
94-
data-cy="step-version-specific"
95-
name="version-specific"
96-
aria-label="Version specific"
97-
title="Version specific"
98-
v-bind:active-icon="errorStateScreenVersionSpecific ? 'warning' : 'edit'"
99-
v-bind:error="errorStateScreenVersionSpecific"
100-
v-bind:order="7"
101-
v-if="showAdvanced"
102-
v-on:click="setStepName('version-specific')"
103-
/>
93+
<q-step
94+
data-cy="step-version-specific"
95+
name="version-specific"
96+
aria-label="Version specific"
97+
title="Version specific"
98+
v-bind:active-icon="errorStateScreenVersionSpecific ? 'warning' : 'edit'"
99+
v-bind:error="errorStateScreenVersionSpecific"
100+
v-bind:order="7"
101+
v-if="showAdvanced"
102+
v-on:click="setStepName('version-specific')"
103+
/>
104104

105-
<q-step
106-
active-icon="navigate_next"
107-
data-cy="step-finish"
108-
name="finish"
109-
aria-label="Finish"
110-
title="Finish"
111-
v-bind:order="showAdvanced ? 8 : 2"
112-
v-on:click="setStepName('finish')"
113-
/>
114-
</q-stepper>
105+
<q-step
106+
active-icon="navigate_next"
107+
data-cy="step-finish"
108+
name="finish"
109+
aria-label="Finish"
110+
title="Finish"
111+
v-bind:order="showAdvanced ? 8 : 2"
112+
v-on:click="setStepName('finish')"
113+
/>
114+
</q-stepper>
115+
</nav>
115116
</template>
116117

117118
<script lang="ts">

0 commit comments

Comments
 (0)