Skip to content

Commit 1ec3fbf

Browse files
abelsiqueiraabelsiqueira
committed
Revamp the UI of the main objects, including layout, preview, header and footer
1 parent b8b8f74 commit 1ec3fbf

64 files changed

Lines changed: 529 additions & 991 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎quasar.conf.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,19 @@ module.exports = configure(function () {
8989
framework: {
9090
config: {
9191
brand: {
92-
primary: '#65686b',
93-
secondary: '#efefef',
94-
accent: '#9C27B0',
92+
primary: '#346FEF',
93+
secondary: '#555770',
94+
accent: '#fdac42',
9595

9696
formcard: '#efefef',
9797
prose: '#333',
9898

9999
dark: '#333',
100100

101-
positive: '#21BA45',
102-
negative: '#C10015',
103-
info: '#31CCEC',
104-
warning: '#F9E3A4'
105-
101+
positive: '#39d98a',
102+
negative: '#D93D33',
103+
info: '#B3C5DB',
104+
warning: '#fddd48'
106105
}
107106
},
108107

‎src/components/Footer.vue‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
<template>
2-
<div class="row">
3-
<div
4-
id="logo"
5-
class="col"
2+
<q-toolbar>
3+
<q-btn
4+
aria-label="Netherlands eScience Center website (opens in a new tab)"
5+
class="q-py-md"
6+
flat
7+
href="https://esciencecenter.nl"
8+
target="_blank"
9+
type="a"
610
>
7-
<a
8-
href="https://esciencecenter.nl"
9-
target="_blank"
10-
aria-label="Netherlands eScience Center website (opens in a new tab)"
11+
<img
12+
alt=""
13+
height="28"
14+
src="~assets/nlesc-logo.svg"
1115
>
12-
<img
13-
src="~assets/nlesc-logo.svg"
14-
alt="Netherlands eScience Center logo"
15-
>
16-
</a>
17-
</div>
18-
<span class="col text-right text-white text-body1">
16+
</q-btn>
17+
<q-toolbar-title class="text-black text-right text-body1">
1918
Version 2.0.4
20-
</span>
21-
</div>
19+
</q-toolbar-title>
20+
</q-toolbar>
2221
</template>
2322

2423
<script lang="ts">
@@ -28,13 +27,3 @@ export default defineComponent({
2827
name: 'Footer'
2928
})
3029
</script>
31-
32-
<style scoped>
33-
a {
34-
text-decoration: none;
35-
display: flex;
36-
}
37-
img {
38-
height: 22px;
39-
}
40-
</style>

‎src/components/Header.vue‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,24 @@
1616
</q-btn>
1717
<q-space />
1818
<q-btn
19+
class="gt-xs"
1920
flat
2021
href="https://github.com/citation-file-format/cff-initializer-javascript/issues"
21-
icon-right="ion-logo-github"
22+
icon="ion-logo-github"
2223
label="Report an issue"
23-
no-caps
2424
target="_blank"
2525
type="a"
2626
/>
2727
<q-btn
2828
aria-label="Documentation of the CFF schema"
29-
color=""
29+
class="gt-xs"
3030
flat
3131
href="https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md"
32+
icon="ion-document"
3233
label="Documentation"
33-
no-caps
3434
target="_blank"
3535
type="a"
3636
/>
37-
<q-btn
38-
v-if="showOpenPreviewButton"
39-
class="lt-lg gt-xs"
40-
flat
41-
icon="menu"
42-
v-on:click="$emit('togglePreview')"
43-
>
44-
Preview
45-
</q-btn>
4637
</q-toolbar>
4738
</template>
4839

@@ -52,14 +43,6 @@ import { useRouter } from 'vue-router'
5243
5344
export default defineComponent({
5445
name: 'Header',
55-
emits: ['togglePreview'],
56-
props: {
57-
showOpenPreviewButton: {
58-
type: Boolean,
59-
required: false,
60-
default: false
61-
}
62-
},
6346
setup () {
6447
const router = useRouter()
6548
return {
@@ -70,6 +53,3 @@ export default defineComponent({
7053
}
7154
})
7255
</script>
73-
74-
<style scoped>
75-
</style>

‎src/components/LayoutLanding.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</div>
4848
<q-btn
4949
aria-label="Create your CITATION.cff file"
50-
class="start-button"
50+
class="start-button bg-primary"
5151
data-cy="btn-create"
5252
label="Create"
5353
icon="add"
@@ -143,14 +143,6 @@ h1 {
143143
}
144144
}
145145
146-
a.document{
147-
color: var(--primary);
148-
text-decoration: none
149-
150-
}
151-
a.document:hover{
152-
text-decoration: underline
153-
}
154146
.start-button{
155147
margin-top: 15px;
156148
padding: 0px 40px;

‎src/components/LayoutStepper.vue‎

Lines changed: 88 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<q-layout view="hHh lpR fFf">
33
<q-resize-observer v-on:resize="onResize" />
4-
<q-header id="header-inner">
4+
<q-header
5+
id="header"
6+
class="text-black"
7+
>
58
<a
69
class="skip-to-main-content-link"
710
href="#main"
@@ -14,65 +17,92 @@
1417
</a>
1518
<Header
1619
v-bind:show-open-preview-button="isPreviewDrawer"
17-
v-on:togglePreview="togglePreview"
1820
/>
1921
</q-header>
2022

21-
<q-drawer
22-
id="preview-drawer"
23-
side="right"
24-
v-bind:breakpoint="1440"
25-
v-bind:overlay="isPreviewDrawer"
26-
v-model="isPreviewDrawerOpen"
27-
v-bind:width="600"
28-
>
29-
<div
30-
v-if="isPreviewDrawer"
31-
id="preview-button-close"
32-
>
33-
<q-btn
34-
icon="close"
35-
v-on:click="togglePreview"
36-
>
37-
Close preview
38-
</q-btn>
39-
</div>
40-
41-
<div id="preview-content">
42-
<Preview />
43-
</div>
44-
45-
<div id="preview-button-bar">
46-
<DownloadButton v-if="isNotFinish" />
47-
</div>
48-
</q-drawer>
49-
5023
<q-page-container>
5124
<q-page
52-
class="row bg-secondary"
5325
id="main"
5426
role="main"
5527
tabindex="0"
28+
v-bind:class="isMainConnected ? '' : 'q-pa-md'"
5629
>
57-
<aside class="bg-secondary col-12 col-sm-2 gt-xs">
58-
<Stepper />
59-
</aside>
60-
<div
61-
id="form"
62-
class="col-12 col-lg-5 col-sm-10"
63-
>
64-
<form id="form-content">
65-
<router-view />
66-
</form>
30+
<div v-bind:class="['row', 'justify-center', isMainConnected ? '' : 'q-pa-md q-ml-auto']">
31+
<div
32+
id="main-block"
33+
v-bind:class="['row', 'col', 'bg-white', 'q-pa-md', isMainConnected ? '' : 'elevated rounded-borders q-mx-lg']"
34+
>
35+
<aside class="col-auto gt-xs">
36+
<Stepper />
37+
</aside>
38+
<div
39+
id="form"
40+
class="col column"
41+
>
42+
<div id="form-content">
43+
<router-view />
44+
</div>
45+
<q-space />
46+
<div
47+
class="row q-pt-md"
48+
id="form-button-bar"
49+
>
50+
<StepperActions />
51+
</div>
6752

68-
<div id="form-button-bar">
69-
<StepperActions />
53+
<q-btn
54+
v-if="isPreviewDrawer"
55+
class="floating-preview-button bg-primary text-white"
56+
data-cy="btn-open-cff-preview"
57+
fab
58+
icon="ion-arrow-round-back"
59+
label="Open CFF Preview"
60+
no-caps
61+
v-on:click="togglePreview"
62+
/>
63+
</div>
7064
</div>
65+
<component
66+
v-if="!isOnlyForm"
67+
id="preview-block"
68+
v-bind:breakpoint="1439"
69+
v-bind:class="isPreviewDrawer ? 'bg-white q-pa-md' : 'col transparent q-mx-lg'"
70+
v-bind:is="isPreviewDrawer ? 'q-drawer' : 'div'"
71+
v-bind:overlay="isPreviewDrawer"
72+
v-bind:side="isPreviewDrawer ? 'right' : ''"
73+
v-model="isPreviewDrawerOpen"
74+
v-bind:width="isPreviewDrawer ? 600 : ''"
75+
>
76+
<div
77+
v-if="isPreviewDrawer"
78+
id="preview-button-close"
79+
class="text-center"
80+
>
81+
<q-btn
82+
flat
83+
icon="close"
84+
v-on:click="togglePreview"
85+
>
86+
Close preview
87+
</q-btn>
88+
</div>
89+
90+
<div id="preview-content">
91+
<Preview v-bind:inside-drawer="isPreviewDrawer" />
92+
</div>
93+
94+
<div
95+
id="preview-button-bar"
96+
class="text-center"
97+
>
98+
<DownloadButton v-if="isNotFinish" />
99+
</div>
100+
</component>
71101
</div>
72102
</q-page>
73103
</q-page-container>
74104

75-
<q-footer id="footer-inner">
105+
<q-footer id="footer">
76106
<Footer />
77107
</q-footer>
78108
</q-layout>
@@ -101,35 +131,37 @@ export default defineComponent({
101131
},
102132
setup () {
103133
const q = useQuasar()
104-
const screenIsBigEnough = computed(() => q.screen.lg || q.screen.xl)
105-
const isPreviewDrawerOpen = ref(screenIsBigEnough.value)
106-
const onResize = () => { isPreviewDrawerOpen.value = false }
134+
const isPreviewDrawerOpen = ref(false)
135+
const onResize = () => {
136+
isPreviewDrawerOpen.value = false
137+
}
107138
return {
108139
focusMain: () => {
109140
const element = window.document.getElementById('main')
110141
if (!element) return
111142
element.focus()
112143
},
144+
isOnlyForm: computed(() => q.screen.xs),
113145
isNotFinish: computed(() => {
114146
const currentPath = useRoute().path
115147
return currentPath !== '/finish'
116148
}),
117149
isPreviewDrawerOpen,
118-
onResize,
119-
togglePreview: () => { isPreviewDrawerOpen.value = !isPreviewDrawerOpen.value },
120150
isPreviewDrawer: computed(() => q.screen.sm || q.screen.md),
121-
skipToMainFocused: ref(false)
151+
isMainConnected: computed(() => q.screen.xs || q.screen.sm),
152+
skipToMainFocused: ref(false),
153+
onResize,
154+
togglePreview: () => {
155+
isPreviewDrawerOpen.value = !isPreviewDrawerOpen.value
156+
}
122157
}
123158
}
124159
})
125160
</script>
126161
<style scoped>
127-
.spacer {
128-
flex-grow: 1.0;
129-
}
130162
.skip-to-main-content-link {
131-
position: absolute;
132-
left: -9999px;
163+
position: absolute;
164+
left: -9999px;
133165
z-index: 999;
134166
padding: 1em;
135167
background-color: black;

0 commit comments

Comments
 (0)