Skip to content

Commit 0fd9089

Browse files
J-Sekjsek
J-Sek
and
jsek
authored
fix(HelloWorld): modernize & cleanup HelloWorld (#67)
* fix(HelloWorld): modernize & cleanup HelloWorld * switch to `tonal`, drop tint * adapt for feedback + fix logo URL * restore logo URL for Nuxt --------- Co-authored-by: jsek <[email protected]>
1 parent dd922a5 commit 0fd9089

File tree

5 files changed

+195
-536
lines changed

5 files changed

+195
-536
lines changed

‎template/javascript/base/src/components/HelloWorld.vue

Lines changed: 39 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
<template>
2-
<v-container class="fill-height">
3-
<v-responsive
4-
class="align-centerfill-height mx-auto"
5-
max-width="900"
6-
>
2+
<v-container class="fill-height" max-width="900">
3+
<div>
74
<v-img
85
class="mb-4"
96
height="150"
107
src="@/assets/logo.png"
118
/>
129

13-
<div class="text-center">
10+
<div class="mb-8 text-center">
1411
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
15-
1612
<h1 class="text-h2 font-weight-bold">Vuetify</h1>
1713
</div>
1814

19-
<div class="py-4" />
20-
2115
<v-row>
2216
<v-col cols="12">
2317
<v-card
@@ -26,7 +20,7 @@
2620
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
2721
prepend-icon="mdi-rocket-launch-outline"
2822
rounded="lg"
29-
variant="outlined"
23+
variant="tonal"
3024
>
3125
<template #image>
3226
<v-img position="top right" />
@@ -38,120 +32,57 @@
3832

3933
<template #subtitle>
4034
<div class="text-subtitle-1">
41-
Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
35+
Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
4236
</div>
4337
</template>
44-
45-
<v-overlay
46-
opacity=".12"
47-
scrim="primary"
48-
contained
49-
model-value
50-
persistent
51-
/>
52-
</v-card>
53-
</v-col>
54-
55-
<v-col cols="6">
56-
<v-card
57-
append-icon="mdi-open-in-new"
58-
class="py-4"
59-
color="surface-variant"
60-
href="https://vuetifyjs.com/"
61-
prepend-icon="mdi-text-box-outline"
62-
rel="noopener noreferrer"
63-
rounded="lg"
64-
subtitle="Learn about all things Vuetify in our documentation."
65-
target="_blank"
66-
title="Documentation"
67-
variant="text"
68-
>
69-
<v-overlay
70-
opacity=".06"
71-
scrim="primary"
72-
contained
73-
model-value
74-
persistent
75-
/>
76-
</v-card>
77-
</v-col>
78-
79-
<v-col cols="6">
80-
<v-card
81-
append-icon="mdi-open-in-new"
82-
class="py-4"
83-
color="surface-variant"
84-
href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
85-
prepend-icon="mdi-star-circle-outline"
86-
rel="noopener noreferrer"
87-
rounded="lg"
88-
subtitle="Explore available framework Features."
89-
target="_blank"
90-
title="Features"
91-
variant="text"
92-
>
93-
<v-overlay
94-
opacity=".06"
95-
scrim="primary"
96-
contained
97-
model-value
98-
persistent
99-
/>
10038
</v-card>
10139
</v-col>
10240

103-
<v-col cols="6">
41+
<v-col v-for="link in links" :key="link.href" cols="6">
10442
<v-card
43+
:href="link.href"
44+
:prepend-icon="link.icon"
45+
:subtitle="link.subtitle"
46+
:title="link.title"
10547
append-icon="mdi-open-in-new"
10648
class="py-4"
10749
color="surface-variant"
108-
href="https://vuetifyjs.com/components/all"
109-
prepend-icon="mdi-widgets-outline"
11050
rel="noopener noreferrer"
11151
rounded="lg"
112-
subtitle="Discover components in the API Explorer."
11352
target="_blank"
114-
title="Components"
115-
variant="text"
116-
>
117-
<v-overlay
118-
opacity=".06"
119-
scrim="primary"
120-
contained
121-
model-value
122-
persistent
123-
/>
124-
</v-card>
125-
</v-col>
126-
127-
<v-col cols="6">
128-
<v-card
129-
append-icon="mdi-open-in-new"
130-
class="py-4"
131-
color="surface-variant"
132-
href="https://discord.vuetifyjs.com"
133-
prepend-icon="mdi-account-group-outline"
134-
rel="noopener noreferrer"
135-
rounded="lg"
136-
subtitle="Connect with Vuetify developers."
137-
target="_blank"
138-
title="Community"
139-
variant="text"
140-
>
141-
<v-overlay
142-
opacity=".06"
143-
scrim="primary"
144-
contained
145-
model-value
146-
persistent
147-
/>
148-
</v-card>
53+
variant="tonal"
54+
/>
14955
</v-col>
15056
</v-row>
151-
</v-responsive>
57+
</div>
15258
</v-container>
15359
</template>
15460

15561
<script setup>
156-
//
62+
const links = [
63+
{
64+
href: 'https://vuetifyjs.com/',
65+
icon: 'mdi-text-box-outline',
66+
subtitle: 'Learn about all things Vuetify in our documentation.',
67+
title: 'Documentation',
68+
},
69+
{
70+
href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
71+
icon: 'mdi-star-circle-outline',
72+
subtitle: 'Explore available framework Features.',
73+
title: 'Features',
74+
},
75+
{
76+
href: 'https://vuetifyjs.com/components/all',
77+
icon: 'mdi-widgets-outline',
78+
subtitle: 'Discover components in the API Explorer.',
79+
title: 'Components',
80+
},
81+
{
82+
href: 'https://discord.vuetifyjs.com',
83+
icon: 'mdi-account-group-outline',
84+
subtitle: 'Connect with Vuetify developers.',
85+
title: 'Community',
86+
},
87+
]
15788
</script>

‎template/javascript/default/src/components/HelloWorld.vue

Lines changed: 38 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
<template>
2-
<v-container class="fill-height">
3-
<v-responsive
4-
class="align-centerfill-height mx-auto"
5-
max-width="900"
6-
>
2+
<v-container class="fill-height" max-width="900">
3+
<div>
74
<v-img
85
class="mb-4"
96
height="150"
107
src="@/assets/logo.png"
118
/>
129

13-
<div class="text-center">
10+
<div class="mb-8 text-center">
1411
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
15-
1612
<h1 class="text-h2 font-weight-bold">Vuetify</h1>
1713
</div>
1814

19-
<div class="py-4" />
20-
2115
<v-row>
2216
<v-col cols="12">
2317
<v-card
@@ -26,7 +20,7 @@
2620
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
2721
prepend-icon="mdi-rocket-launch-outline"
2822
rounded="lg"
29-
variant="outlined"
23+
variant="tonal"
3024
>
3125
<template #image>
3226
<v-img position="top right" />
@@ -41,117 +35,54 @@
4135
Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
4236
</div>
4337
</template>
44-
45-
<v-overlay
46-
opacity=".12"
47-
scrim="primary"
48-
contained
49-
model-value
50-
persistent
51-
/>
52-
</v-card>
53-
</v-col>
54-
55-
<v-col cols="6">
56-
<v-card
57-
append-icon="mdi-open-in-new"
58-
class="py-4"
59-
color="surface-variant"
60-
href="https://vuetifyjs.com/"
61-
prepend-icon="mdi-text-box-outline"
62-
rel="noopener noreferrer"
63-
rounded="lg"
64-
subtitle="Learn about all things Vuetify in our documentation."
65-
target="_blank"
66-
title="Documentation"
67-
variant="text"
68-
>
69-
<v-overlay
70-
opacity=".06"
71-
scrim="primary"
72-
contained
73-
model-value
74-
persistent
75-
/>
76-
</v-card>
77-
</v-col>
78-
79-
<v-col cols="6">
80-
<v-card
81-
append-icon="mdi-open-in-new"
82-
class="py-4"
83-
color="surface-variant"
84-
href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
85-
prepend-icon="mdi-star-circle-outline"
86-
rel="noopener noreferrer"
87-
rounded="lg"
88-
subtitle="Explore available framework Features."
89-
target="_blank"
90-
title="Features"
91-
variant="text"
92-
>
93-
<v-overlay
94-
opacity=".06"
95-
scrim="primary"
96-
contained
97-
model-value
98-
persistent
99-
/>
10038
</v-card>
10139
</v-col>
10240

103-
<v-col cols="6">
41+
<v-col v-for="link in links" :key="link.href" cols="6">
10442
<v-card
43+
:href="link.href"
44+
:prepend-icon="link.icon"
45+
:subtitle="link.subtitle"
46+
:title="link.title"
10547
append-icon="mdi-open-in-new"
10648
class="py-4"
10749
color="surface-variant"
108-
href="https://vuetifyjs.com/components/all"
109-
prepend-icon="mdi-widgets-outline"
11050
rel="noopener noreferrer"
11151
rounded="lg"
112-
subtitle="Discover components in the API Explorer."
11352
target="_blank"
114-
title="Components"
115-
variant="text"
116-
>
117-
<v-overlay
118-
opacity=".06"
119-
scrim="primary"
120-
contained
121-
model-value
122-
persistent
123-
/>
124-
</v-card>
125-
</v-col>
126-
127-
<v-col cols="6">
128-
<v-card
129-
append-icon="mdi-open-in-new"
130-
class="py-4"
131-
color="surface-variant"
132-
href="https://discord.vuetifyjs.com"
133-
prepend-icon="mdi-account-group-outline"
134-
rel="noopener noreferrer"
135-
rounded="lg"
136-
subtitle="Connect with Vuetify developers."
137-
target="_blank"
138-
title="Community"
139-
variant="text"
140-
>
141-
<v-overlay
142-
opacity=".06"
143-
scrim="primary"
144-
contained
145-
model-value
146-
persistent
147-
/>
148-
</v-card>
53+
variant="tonal"
54+
/>
14955
</v-col>
15056
</v-row>
151-
</v-responsive>
57+
</div>
15258
</v-container>
15359
</template>
15460

15561
<script setup>
156-
//
62+
const links = [
63+
{
64+
href: 'https://vuetifyjs.com/',
65+
icon: 'mdi-text-box-outline',
66+
subtitle: 'Learn about all things Vuetify in our documentation.',
67+
title: 'Documentation',
68+
},
69+
{
70+
href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
71+
icon: 'mdi-star-circle-outline',
72+
subtitle: 'Explore available framework Features.',
73+
title: 'Features',
74+
},
75+
{
76+
href: 'https://vuetifyjs.com/components/all',
77+
icon: 'mdi-widgets-outline',
78+
subtitle: 'Discover components in the API Explorer.',
79+
title: 'Components',
80+
},
81+
{
82+
href: 'https://discord.vuetifyjs.com',
83+
icon: 'mdi-account-group-outline',
84+
subtitle: 'Connect with Vuetify developers.',
85+
title: 'Community',
86+
},
87+
]
15788
</script>

0 commit comments

Comments
 (0)