Skip to content

Commit fe5c653

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

File tree

9 files changed

+101
-79
lines changed

9 files changed

+101
-79
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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-responsive>
3-
<HomeBgGradient color="primary" />
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: 83 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,109 @@
11
<template>
2-
<v-responsive class="py-16">
3-
<HomeBgGradient />
2+
<v-responsive>
3+
<v-responsive
4+
v-for="(tooling, i) in toolings"
5+
:key="tooling.name"
6+
>
7+
<v-container>
8+
<HomeBgGradient
9+
:color="isDark ? '' : 'primary'"
10+
opacity-class="opacity-10"
11+
/>
412

5-
<v-container>
6-
<div class="mb-10">
7-
<p class="text-primary font-weight-bold mb-0">
8-
Tools & Resources
9-
</p>
10-
11-
<h4 class="text-h4 font-weight-bold my-3">
12-
Vuetify Tooling
13-
</h4>
14-
15-
<v-responsive class="mx-auto mb-5" max-width="700">
16-
<h6 class="text-h6 font-weight-regular text-medium-emphasis">
17-
Vuetify provides a suite of tools for managing your Vuetify projects.
18-
</h6>
19-
</v-responsive>
20-
</div>
21-
22-
<v-row align="center" class="text-left">
23-
<v-col
24-
class="d-none d-md-block"
25-
cols="12"
26-
md="6"
13+
<v-row
14+
align="center"
15+
class="py-16 text-left"
16+
justify="space-between"
2717
>
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-
</v-col>
36-
37-
<v-col
38-
cols="12"
39-
md="6"
40-
>
41-
<div
42-
v-for="tooling in toolings"
43-
:key="tooling.name"
44-
class="pb-4"
18+
<v-col
19+
:order-md="i % 2 === 0 ? '3' : '1'"
20+
cols="12"
21+
md="6"
22+
order="3"
4523
>
46-
<div class="font-weight-bold mb-1">{{ tooling.name }}</div>
24+
<p class="text-primary font-weight-bold mb-3">
25+
{{ tooling.title }}
26+
</p>
27+
28+
<h5 class="font-weight-bold text-h5 mb-1">{{ tooling.name }}</h5>
4729

48-
<p class="text-medium-emphasis mb-0">
30+
<h6 class="text-h6 font-weight-regular text-medium-emphasis my-4">
4931
{{ tooling.description }}
50-
</p>
32+
</h6>
5133

5234
<v-btn
53-
class="mb-4 text-none px-0"
35+
class="text-none my-2"
5436
color="primary"
55-
height="30"
56-
variant="text"
37+
rounded="lg"
38+
size="large"
39+
flat
5740
>
58-
Learn More
41+
Get Started
5942
</v-btn>
43+
</v-col>
44+
45+
<v-col
46+
:class="{
47+
'justify-center': smAndDown,
48+
'justify-start': !smAndDown && i % 2 === 0,
49+
'justify-end': !smAndDown && i % 2 !== 0,
50+
}"
51+
class="d-flex"
52+
cols="12"
53+
md="6"
54+
order="2"
55+
>
56+
<v-img
57+
:src="tooling.image"
58+
height="250"
59+
max-width="80%"
60+
rounded="xl"
61+
width="100%"
62+
/>
63+
</v-col>
6064

61-
<v-divider v-if="tooling !== toolings[toolings.length - 1]" />
62-
</div>
63-
</v-col>
64-
</v-row>
65-
</v-container>
65+
</v-row>
66+
</v-container>
6667

68+
<v-divider v-if="i !== toolings.length - 1" color="primary" />
69+
</v-responsive>
6770
</v-responsive>
6871
</template>
6972

7073
<script setup lang="ts">
74+
const theme = useTheme()
75+
const { smAndDown } = useDisplay()
76+
77+
const isDark = computed(() => theme.current.value.dark)
78+
7179
const toolings = computed(() => [
7280
{
73-
name: 'Figma UI Kit',
74-
description: `Fully optimized for Figma and based on Material Design - Vuetify UI Kit`,
75-
},
76-
{
77-
name: '@vuetify/create',
78-
description: `Scaffold your next Vuetify application with just a few commands. Perfect for getting started with Vuetify.`,
81+
title: 'Figma UI Kit',
82+
name: 'Build beautiful Vuetify components with Figma UI Kit',
83+
// TODO: Use proper image
84+
image: 'https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg',
85+
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.`,
7986
},
8087
{
81-
name: '@vuetify/eslint-plugin',
82-
description: `Version upgrade automation eslint plugin, to keep your code clean and consistent!`,
88+
title: 'Write Clean code',
89+
name: 'Vuetify ESLint Plugin will keep your code clean and consistent',
90+
// TODO: Use proper image
91+
image: 'https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-atom.svg',
92+
description: `Version upgrade automation eslint plugin, to keep your code clean and consistent! You can use it to keep your code clean and consistent.`,
8393
},
8494
{
85-
name: '@vuetify/eslint-config',
86-
description: `An opinionated eslint config for Vuetify, crafted to keep your code clean and consistent!`,
95+
title: 'Scaffold your application',
96+
name: 'Vuetify Create will scaffold your next application',
97+
// TODO: Use proper image
98+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vcreate-logo-${isDark.value ? 'dark' : 'light'}.png`,
99+
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.`,
87100
},
101+
// {
102+
// title: 'Vuetify ESLint Config',
103+
// name: 'Vuetify ESLint Config to keep your code clean and consistent',
104+
// 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.`,
105+
// TODO: Use proper image
106+
// image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/ESLint_logo.svg/1200px-ESLint_logo.svg.png',
107+
// },
88108
])
89109
</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: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,31 @@ 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

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

4545
<HomeStore />
4646

0 commit comments

Comments
 (0)