Skip to content

Commit 29d51b0

Browse files
ikushumikushum
committed
update vuetify tooling
1 parent 05c1466 commit 29d51b0

File tree

9 files changed

+98
-57
lines changed

9 files changed

+98
-57
lines changed

‎packages/docs/src/components/home/Blogs.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-responsive class="py-16">
3-
<HomeBgGradient />
3+
<HomeBgGradient opacity-class="opacity-10" />
44

55
<v-container class="pt-0">
66
<div class="mb-16 text-center">

‎packages/docs/src/components/home/Snips.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<v-responsive>
3-
<HomeBgGradient color="primary" />
2+
<v-responsive class="py-5">
3+
<HomeBgGradient color="primary" opacity-class="opacity-10" />
44

55
<v-container class="text-center text-md-left py-16">
66
<v-row align="center">

‎packages/docs/src/components/home/SpecialSponsor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-responsive v-if="specialSponsor">
3-
<v-divider :opacity="isDark ? 0.2 : 0.1" color="primary" />
3+
<v-divider color="primary" />
44

55
<HomeBgGradient
66
:opacity-class="isDark ? 'opacity-40' : 'opacity-20'"
@@ -17,7 +17,7 @@
1717
/>
1818
</div>
1919

20-
<v-divider :opacity="isDark ? 0.2 : 0.1" color="primary" />
20+
<v-divider color="primary" />
2121
</v-responsive>
2222
</template>
2323

‎packages/docs/src/components/home/Sponsors.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
22
<v-responsive class="pb-16">
3+
<HomeBgGradient />
4+
35
<v-container class="pt-10">
46
<v-icon class="mb-5" color="red-lighten-2" size="60">
57
mdi-heart-outline

‎packages/docs/src/components/home/Store.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-responsive class="pb-16">
3-
<HomeBgGradient />
3+
<HomeBgGradient opacity-class="opacity-10" />
44

55
<v-container class="pt-10">
66
<v-icon class="mb-5" color="primary" size="60">

‎packages/docs/src/components/home/Support.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-responsive class="py-5">
3-
<HomeBgGradient />
3+
<HomeBgGradient color="primary" opacity-class="opacity-10" />
44

55
<v-container class="text-center text-md-left py-16">
66
<v-row align="end">

‎packages/docs/src/components/home/Tooling.vue‎

Lines changed: 80 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<v-responsive class="py-16">
2+
<v-responsive class="py-10">
33
<HomeBgGradient />
44

55
<v-container>
6-
<div class="mb-10">
6+
<div class="mb-16">
77
<p class="text-primary font-weight-bold mb-0">
88
Tools & Resources
99
</p>
@@ -19,71 +19,110 @@
1919
</v-responsive>
2020
</div>
2121

22-
<v-row align="center" class="text-left">
22+
<v-row
23+
v-for="(tooling, i) in toolings"
24+
:key="tooling.name"
25+
align="center"
26+
class="text-left"
27+
justify="space-between"
28+
>
2329
<v-col
24-
class="d-none d-md-block"
30+
:order-md="!isAlternateSection(i) ? '3' : '1'"
2531
cols="12"
2632
md="6"
33+
order="3"
2734
>
28-
<v-img
29-
:height="$vuetify.display.smAndDown ? 250 : 500"
30-
:max-width="$vuetify.display.smAndDown ? '100%' : 500"
31-
rounded="xl"
32-
src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-atom.svg"
33-
width="100%"
34-
/>
35+
<p class="text-primary font-weight-bold mb-3">
36+
{{ tooling.title }}
37+
</p>
38+
39+
<h5 class="font-weight-bold text-h5 mb-1">{{ tooling.name }}</h5>
40+
41+
<h6 class="text-h6 font-weight-regular text-medium-emphasis my-4">
42+
{{ tooling.description }}
43+
</h6>
44+
45+
<v-btn
46+
class="text-none my-2"
47+
color="primary"
48+
rounded="lg"
49+
size="large"
50+
flat
51+
>
52+
Get Started
53+
</v-btn>
3554
</v-col>
3655

3756
<v-col
57+
:class="{
58+
'justify-center': smAndDown,
59+
'justify-start': !smAndDown && !isAlternateSection(i),
60+
'justify-end': !smAndDown && isAlternateSection(i),
61+
}"
62+
class="d-flex"
3863
cols="12"
3964
md="6"
65+
order="2"
4066
>
41-
<div
42-
v-for="tooling in toolings"
43-
:key="tooling.name"
44-
class="pb-4"
45-
>
46-
<div class="font-weight-bold mb-1">{{ tooling.name }}</div>
47-
48-
<p class="text-medium-emphasis mb-0">
49-
{{ tooling.description }}
50-
</p>
51-
52-
<v-btn
53-
class="mb-4 text-none px-0"
54-
color="primary"
55-
height="30"
56-
variant="text"
57-
>
58-
Learn More
59-
</v-btn>
67+
<v-img
68+
:src="tooling.image"
69+
height="250"
70+
max-width="80%"
71+
rounded="xl"
72+
width="100%"
73+
/>
74+
</v-col>
6075

61-
<v-divider v-if="tooling !== toolings[toolings.length - 1]" />
62-
</div>
76+
<v-col cols="12" order="4">
77+
<v-divider
78+
v-if="i !== toolings.length - 1"
79+
class="my-10"
80+
color="primary"
81+
/>
6382
</v-col>
6483
</v-row>
6584
</v-container>
66-
6785
</v-responsive>
6886
</template>
6987

7088
<script setup lang="ts">
89+
const theme = useTheme()
90+
const { smAndDown } = useDisplay()
91+
92+
const isDark = computed(() => theme.current.value.dark)
93+
7194
const toolings = computed(() => [
7295
{
73-
name: 'Figma UI Kit',
74-
description: `Fully optimized for Figma and based on Material Design - Vuetify UI Kit`,
96+
title: 'Figma UI Kit',
97+
name: 'Build beautiful Vuetify components with Figma UI Kit',
98+
// TODO: Use proper image
99+
image: 'https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg',
100+
description: `Fully optimized for Figma and based on Material Design - Vuetify UI Kit. You can use it to create your own Vuetify components and use them in your projects.`,
75101
},
76102
{
77-
name: '@vuetify/create',
78-
description: `Scaffold your next Vuetify application with just a few commands. Perfect for getting started with Vuetify.`,
103+
title: 'Write Clean code',
104+
name: 'Vuetify ESLint Plugin will keep your code clean and consistent',
105+
// TODO: Use proper image
106+
image: 'https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-atom.svg',
107+
description: `Version upgrade automation eslint plugin, to keep your code clean and consistent! You can use it to keep your code clean and consistent.`,
79108
},
80109
{
81-
name: '@vuetify/eslint-plugin',
82-
description: `Version upgrade automation eslint plugin, to keep your code clean and consistent!`,
110+
title: 'Scaffold your application',
111+
name: 'Vuetify Create will scaffold your next application',
112+
// TODO: Use proper image
113+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vcreate-logo-${isDark.value ? 'dark' : 'light'}.png`,
114+
description: `Scaffold your next Vuetify application with just a few commands. Perfect for getting started with Vuetify. You can use it to create your own Vuetify components and use them in your projects.`,
83115
},
84116
{
85-
name: '@vuetify/eslint-config',
86-
description: `An opinionated eslint config for Vuetify, crafted to keep your code clean and consistent!`,
117+
title: 'Vuetify ESLint Config',
118+
name: 'Vuetify ESLint Config to keep your code clean and consistent',
119+
description: `An opinionated eslint config for Vuetify, crafted to keep your code clean and consistent! You can use it to keep your code clean and consistent.`,
120+
// TODO: Use proper image
121+
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/ESLint_logo.svg/1200px-ESLint_logo.svg.png',
87122
},
88123
])
124+
125+
function isAlternateSection (index: number) {
126+
return index % 2 !== 0
127+
}
89128
</script>

‎packages/docs/src/components/home/VuetifyOne.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<v-responsive class="py-16">
3-
<v-container>
4-
<HomeBgGradient />
3+
<HomeBgGradient opacity-class="opacity-10" />
54

5+
<v-container>
66
<div class="mb-16">
77
<v-img
88
:src="`https://cdn.vuetifyjs.com/docs/images/logos/vone-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`"

‎packages/docs/src/pages/en/index.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,30 @@ meta:
1616

1717
<HomeComponentGallery />
1818

19-
<v-divider thickness="2" color="primary" />
20-
21-
<HomeSnips />
22-
23-
<v-divider :color="theme.current.value.dark ? '' : 'primary'" />
19+
<v-divider />
2420

2521
<HomeSponsors />
2622

27-
<v-divider />
23+
<v-divider color="primary" />
2824

2925
<HomeTooling />
3026

3127
<v-divider />
3228

3329
<HomeVuetifyOne />
3430

35-
<v-divider />
31+
<v-divider color="primary" />
3632

3733
<HomeSupport />
3834

3935
<v-divider />
4036

4137
<HomeBlogs />
4238

39+
<v-divider color="primary" />
40+
41+
<HomeSnips />
42+
4343
<v-divider />
4444

4545
<HomeStore />

0 commit comments

Comments
 (0)