Skip to content

Commit d2a1264

Browse files
abelsiqueiraabelsiqueira
authored
Merge pull request #632 from citation-file-format/451-refactor-layout
2 parents c19b9f5 + cb4b01c commit d2a1264

11 files changed

Lines changed: 491 additions & 616 deletions

‎src/components/LayoutStepper.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,17 @@
3636
id="middle"
3737
class="row"
3838
>
39-
<router-view />
39+
<Stepper />
40+
<div
41+
id="form"
42+
class="col-12 col-lg-5 col-sm-10"
43+
>
44+
<router-view />
45+
46+
<div id="form-button-bar">
47+
<StepperActions />
48+
</div>
49+
</div>
4050
<div
4151
id="preview-static"
4252
class="col-12 col-lg-5 gt-md"
@@ -51,6 +61,7 @@
5161
</div>
5262
</q-page>
5363
</q-page-container>
64+
5465
<q-footer id="footer-inner">
5566
<Footer />
5667
</q-footer>
@@ -64,6 +75,8 @@ import DownloadButton from 'components/DownloadButton.vue'
6475
import Footer from 'components/Footer.vue'
6576
import Header from 'components/Header.vue'
6677
import Preview from 'components/Preview.vue'
78+
import Stepper from 'components/Stepper.vue'
79+
import StepperActions from 'components/StepperActions.vue'
6780
import { useRoute } from 'vue-router'
6881
6982
export default defineComponent({
@@ -72,7 +85,9 @@ export default defineComponent({
7285
Header,
7386
Preview,
7487
DownloadButton,
75-
Footer
88+
Footer,
89+
Stepper,
90+
StepperActions
7691
},
7792
setup () {
7893
const isPreviewDrawerEnabled = ref(false)

‎src/components/ScreenAbstract.vue‎

Lines changed: 22 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,38 @@
11
<template>
2-
<Stepper />
3-
4-
<div
5-
id="form"
6-
class="col-12 col-lg-5 col-sm-10"
7-
>
8-
<div id="form-title">
9-
<h1 class="page-title">
10-
Abstract
11-
</h1>
12-
</div>
13-
14-
<div id="form-content">
15-
<h2 class="question">
16-
Please provide a description of the work
17-
<SchemaGuideLink anchor="#abstract" />
18-
</h2>
19-
<q-input
20-
autogrow
21-
bg-color="white"
22-
input-style="min-height: 100px; max-height: 444px"
23-
label="abstract"
24-
outlined
25-
standout
26-
type="textarea"
27-
v-bind:model-value="abstract"
28-
v-on:update:modelValue="setAbstract"
29-
/>
30-
</div>
2+
<div id="form-title">
3+
<h1 class="page-title">
4+
Abstract
5+
</h1>
6+
</div>
317

32-
<div id="form-button-bar">
33-
<StepperActions />
34-
</div>
8+
<div id="form-content">
9+
<h2 class="question">
10+
Please provide a description of the work
11+
<SchemaGuideLink anchor="#abstract" />
12+
</h2>
13+
<q-input
14+
autogrow
15+
bg-color="white"
16+
input-style="min-height: 100px; max-height: 444px"
17+
label="abstract"
18+
outlined
19+
standout
20+
type="textarea"
21+
v-bind:model-value="abstract"
22+
v-on:update:modelValue="setAbstract"
23+
/>
3524
</div>
3625
</template>
3726

3827
<script lang="ts">
3928
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
40-
import Stepper from 'components/Stepper.vue'
41-
import StepperActions from 'components/StepperActions.vue'
4229
import { defineComponent } from 'vue'
4330
import { useCff } from 'src/store/cff'
4431
4532
export default defineComponent({
4633
name: 'ScreenAbstract',
4734
components: {
48-
SchemaGuideLink,
49-
Stepper,
50-
StepperActions
35+
SchemaGuideLink
5136
},
5237
setup () {
5338
const { abstract, setAbstract } = useCff()

‎src/components/ScreenAuthors.vue‎

Lines changed: 53 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,64 @@
11
<template>
2-
<Stepper />
3-
<div
4-
id="form"
5-
class="col-12 col-lg-5 col-sm-10"
6-
>
7-
<div id="form-title">
8-
<h1 class="page-title">
9-
Authors
10-
</h1>
11-
</div>
12-
13-
<div id="form-content">
14-
<h2 class="question">
15-
Who are the author(s) of the work?
16-
<SchemaGuideLink anchor="#authors" />
17-
</h2>
18-
<div class="scroll-to-bottom-container">
19-
<span class="bottom" />
20-
<div>
21-
<div
22-
class="q-mb-md q-mr-lg"
23-
v-bind:key="index"
24-
v-for="(author, index) in authors"
25-
>
26-
<AuthorCardViewing
27-
v-if="editingId !== index"
28-
v-bind:index="index"
29-
v-bind:author="author"
30-
v-bind:num-authors="authors.length"
31-
v-on:editPressed="() => (editingId = index)"
32-
v-on:moveDown="moveAuthorDown(index)"
33-
v-on:moveUp="moveAuthorUp(index)"
34-
/>
35-
<AuthorCardEditing
36-
v-else
37-
v-bind:index="index"
38-
v-bind="author"
39-
v-on:update="setAuthorField"
40-
v-on:closePressed="() => (editingId = -1)"
41-
v-on:removePressed="removeAuthor"
42-
/>
43-
</div>
44-
</div>
45-
</div>
46-
47-
<q-btn
48-
class="q-mt-md q-mb-md"
49-
color="primary"
50-
no-caps
51-
v-on:click="addAuthor"
52-
>
53-
Add author
54-
</q-btn>
2+
<div id="form-title">
3+
<h1 class="page-title">
4+
Authors
5+
</h1>
6+
</div>
557

56-
<q-banner
57-
v-if="authorsErrors.length > 0"
58-
v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
59-
>
8+
<div id="form-content">
9+
<h2 class="question">
10+
Who are the author(s) of the work?
11+
<SchemaGuideLink anchor="#authors" />
12+
</h2>
13+
<div class="scroll-to-bottom-container">
14+
<span class="bottom" />
15+
<div>
6016
<div
17+
class="q-mb-md q-mr-lg"
6118
v-bind:key="index"
62-
v-for="(screenMessage, index) in authorsErrors"
19+
v-for="(author, index) in authors"
6320
>
64-
{{ screenMessage }}
21+
<AuthorCardViewing
22+
v-if="editingId !== index"
23+
v-bind:index="index"
24+
v-bind:author="author"
25+
v-bind:num-authors="authors.length"
26+
v-on:editPressed="() => (editingId = index)"
27+
v-on:moveDown="moveAuthorDown(index)"
28+
v-on:moveUp="moveAuthorUp(index)"
29+
/>
30+
<AuthorCardEditing
31+
v-else
32+
v-bind:index="index"
33+
v-bind="author"
34+
v-on:update="setAuthorField"
35+
v-on:closePressed="() => (editingId = -1)"
36+
v-on:removePressed="removeAuthor"
37+
/>
6538
</div>
66-
</q-banner>
39+
</div>
6740
</div>
6841

69-
<div id="form-button-bar">
70-
<StepperActions />
71-
</div>
42+
<q-btn
43+
class="q-mt-md q-mb-md"
44+
color="primary"
45+
no-caps
46+
v-on:click="addAuthor"
47+
>
48+
Add author
49+
</q-btn>
50+
51+
<q-banner
52+
v-if="authorsErrors.length > 0"
53+
v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
54+
>
55+
<div
56+
v-bind:key="index"
57+
v-for="(screenMessage, index) in authorsErrors"
58+
>
59+
{{ screenMessage }}
60+
</div>
61+
</q-banner>
7262
</div>
7363
</template>
7464

@@ -80,8 +70,6 @@ import AuthorCardEditing from 'components/AuthorCardEditing.vue'
8070
import AuthorCardViewing from 'components/AuthorCardViewing.vue'
8171
import { AuthorType } from 'src/types'
8272
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
83-
import Stepper from 'components/Stepper.vue'
84-
import StepperActions from 'components/StepperActions.vue'
8573
import { scrollToBottom } from 'src/scroll-to-bottom'
8674
import { useCff } from 'src/store/cff'
8775
import { useStepperErrors } from 'src/store/stepper-errors'
@@ -91,8 +79,6 @@ export default defineComponent({
9179
name: 'ScreenAuthors',
9280
components: {
9381
SchemaGuideLink,
94-
Stepper,
95-
StepperActions,
9682
AuthorCardEditing,
9783
AuthorCardViewing
9884
},

‎src/components/ScreenFinishAdvanced.vue‎

Lines changed: 38 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,51 @@
11
<template>
2-
<Stepper />
3-
<div
4-
id="form"
5-
class="col-12 col-lg-5 col-sm-10"
6-
>
7-
<div id="form-title">
8-
<h1
9-
class="finish-title"
10-
v-if="isValidCFF"
11-
>
12-
Congratulations
13-
</h1>
14-
<h1
15-
class="finish-title"
16-
v-else
17-
>
18-
Uh-oh!
19-
</h1>
20-
</div>
2+
<div id="form-title">
3+
<h1
4+
class="finish-title"
5+
v-if="isValidCFF"
6+
>
7+
Congratulations
8+
</h1>
9+
<h1
10+
class="finish-title"
11+
v-else
12+
>
13+
Uh-oh!
14+
</h1>
15+
</div>
2116

22-
<div id="form-content">
23-
<div v-if="isValidCFF">
24-
<p class="finish-paragraph">
25-
Use the buttons below to download your CITATION.cff file, or reset the form to start over.
26-
</p>
27-
<p class="finish-paragraph">
28-
Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
29-
</p>
30-
<div class="row">
31-
<q-btn
32-
class="col-4 q-ma-lg"
33-
color="primary"
34-
icon="refresh"
35-
label="Reset form"
36-
no-caps
37-
size="xl"
38-
v-on:click="createAnother"
39-
/>
40-
<DownloadButton class="col-4 q-ma-lg" />
41-
</div>
42-
</div>
43-
<div v-else>
44-
<p class="finish-paragraph">
45-
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
46-
</p>
17+
<div id="form-content">
18+
<div v-if="isValidCFF">
19+
<p class="finish-paragraph">
20+
Use the buttons below to download your CITATION.cff file, or reset the form to start over.
21+
</p>
22+
<p class="finish-paragraph">
23+
Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
24+
</p>
25+
<div class="row">
26+
<q-btn
27+
class="col-4 q-ma-lg"
28+
color="primary"
29+
icon="refresh"
30+
label="Reset form"
31+
no-caps
32+
size="xl"
33+
v-on:click="createAnother"
34+
/>
35+
<DownloadButton class="col-4 q-ma-lg" />
4736
</div>
4837
</div>
49-
50-
<div id="form-button-bar">
51-
<StepperActions />
38+
<div v-else>
39+
<p class="finish-paragraph">
40+
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
41+
</p>
5242
</div>
5343
</div>
5444
</template>
5545

5646
<script lang="ts">
5747
import { computed, defineComponent } from 'vue'
5848
import DownloadButton from 'components/DownloadButton.vue'
59-
import Stepper from 'components/Stepper.vue'
60-
import StepperActions from 'components/StepperActions.vue'
6149
import { useApp } from 'src/store/app'
6250
import { useCff } from 'src/store/cff'
6351
import { useStepperErrors } from 'src/store/stepper-errors'
@@ -66,9 +54,7 @@ import { useValidation } from 'src/store/validation'
6654
export default defineComponent({
6755
name: 'ScreenFinishAdvanced',
6856
components: {
69-
DownloadButton,
70-
Stepper,
71-
StepperActions
57+
DownloadButton
7258
},
7359
setup () {
7460
const { setStepName, setShowAdvanced } = useApp()

0 commit comments

Comments
 (0)