Skip to content

Commit c0c4aea

Browse files
kiranparajuli589kiranparajuli589
committed
mobile responsive docs
1 parent ff495fa commit c0c4aea

File tree

9 files changed

+129
-28
lines changed

9 files changed

+129
-28
lines changed

‎src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<TheAppbar ref="appBarRef" :toggle-sidebar="toggleSidebar" />
33
<TheSidebar
4-
v-if="showSidebar"
4+
v-if="showSidebar || screenWidth < 640"
55
:class="{
66
show: sidebarState,
77
}"
@@ -31,6 +31,7 @@ import TheAppbar from "@/components/TheAppbar.vue";
3131
import TheFooter from "@/components/TheFooter.vue";
3232
import { useRouter } from "vue-router";
3333
import TheSidebar from "@/components/TheSidebar.vue";
34+
3435
const router = useRouter();
3536
3637
const sidebarState = ref(false);

‎src/components/TheAppbar.vue

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ defineProps<{
1111
<img src="/logo.png" alt="Logo" />
1212
</button>
1313
<h1><router-link to="/" class="!no-underline">Vue Formik</router-link></h1>
14-
<div class="grow" />
15-
<router-link to="/about">About</router-link>
16-
<a href="https://github.com/vue-formik/vue-formik" target="_blank"> ⭐ Star us on GitHub </a>
14+
<div class="grow hidden sm:block" />
15+
<router-link class="hidden sm:block" to="/about">About</router-link>
16+
<a class="hidden sm:block" href="https://github.com/vue-formik/vue-formik" target="_blank">
17+
⭐ Star us on GitHub
18+
</a>
1719
</div>
1820
</nav>
1921
</template>
@@ -34,10 +36,16 @@ defineProps<{
3436
img
3537
width: 2rem
3638
height: 2rem
39+
min-height: 2rem
40+
min-width: 2rem
3741
border-radius: 50%
3842
h1
39-
margin: 0
40-
font-size: 1rem
43+
a
44+
margin: 0
45+
padding: 0
46+
font-size: clamp(1.2rem, 1.5vw, 2rem)
47+
white-space: nowrap
48+
line-height: 1
4149
a
4250
color: white
4351
text-decoration: none

‎src/components/TheFooter.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<template>
22
<footer class="app_footer">
33
<p>
4-
<span>
5-
Made with ❤️ by
6-
<a class="text-yellow-100 underline" href="https://kiranparajuli.com.np"> Kiran Parajuli</a>
7-
</span>
4+
<span> Made with ❤️ at Kathmandu, Nepal </span>
85
<span class="px-2">.</span>
96
<span>© {{ currentYear }} Vue Formik</span>
107
</p>

‎src/components/TheSidebar.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,16 @@
1313
>
1414
<span>Close</span>
1515
</button>
16-
<ul class="flex flex-col gap-2">
16+
17+
<div class="sm:hidden flex items-center gap-2 my-4">
18+
<router-link to="/" class="!no-underline">
19+
<img src="/logo.png" alt="Logo" class="size-8 rounded-full" />
20+
</router-link>
21+
22+
<h1 class="text-lg">Vue Formik</h1>
23+
</div>
24+
25+
<ul class="flex flex-col gap-4">
1726
<template v-for="(item, index) in TheSidebarItems" :key="index">
1827
<li>
1928
<p>

‎src/components/home/ExpoForm.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<button
3737
type="button"
38-
class="secondary-outlined-btn"
38+
class="secondary-outlined-btn size-11"
3939
title="Remove contact"
4040
:disabled="formik.values.contacts.length <= 1"
4141
@click="
@@ -53,7 +53,7 @@
5353
</div>
5454
<button
5555
type="button"
56-
class="w-fit mt-8 secondary-outlined-btn"
56+
class="secondary-outlined-btn mt-8 w-fit"
5757
@click="
5858
() => {
5959
formik.setValues({
@@ -100,7 +100,7 @@
100100

101101
<button
102102
type="button"
103-
class="secondary-outlined-btn"
103+
class="secondary-outlined-btn size-11"
104104
title="Remove address"
105105
:disabled="formik.values.addresses.length <= 1"
106106
@click="

‎src/constants/theSidebarItems.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,12 @@ export default [
2121
{ name: "FormikForm", path: "/docs/components/formik-form" },
2222
],
2323
},
24+
{
25+
name: "Project",
26+
children: [
27+
{ name: "About", path: "/about" },
28+
{ name: "Example Usage", path: "/example-usage" },
29+
{ name: "Playground", path: "/playground" },
30+
],
31+
},
2432
];

‎src/views/AboutView.vue

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,89 @@
11
<template>
2-
<div>About Coming Soon</div>
2+
<div class="flex flex-col gap-4 w-full items-center text-center py-16">
3+
<h1 class="text-lg font-bold">Vue Formik</h1>
4+
5+
<img
6+
alt="Vue Formik Logo"
7+
src="/logo.png"
8+
class="size-24 rounded-full border border-gray-200 shadow-lg my-8"
9+
/>
10+
11+
<ul class="flex flex-col gap-2">
12+
<li>
13+
<strong>Version: </strong>
14+
<code class="border rounded-lg px-2 py-1 border-red-500 text-red-400">{{ version }}</code>
15+
</li>
16+
<li><strong>Author:</strong> {{ author.name }}</li>
17+
<li><strong>Email:</strong> {{ author.email }}</li>
18+
<li>
19+
<strong>LinkedIn:</strong>
20+
<a :href="author.linkedIn" class="text-primary hover:underline" target="_blank">
21+
Kiran Parajuli
22+
</a>
23+
</li>
24+
<li><strong>Birth:</strong> {{ fromNow }}</li>
25+
</ul>
26+
27+
<div class="flex flex-wrap justify-center gap-4 max-w-[300px] mt-12">
28+
<a
29+
v-for="link in links"
30+
:key="link.url"
31+
:href="link.url"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
:class="{
35+
'text-sm hover:underline': true,
36+
'border rounded-2xl px-4 py-2': true,
37+
[link.color]: true,
38+
}"
39+
>
40+
{{ link.title }}
41+
</a>
42+
</div>
43+
</div>
344
</template>
445

5-
<script setup lang="ts"></script>
46+
<script setup lang="ts">
47+
import pkgJson from "../../package.json";
48+
const { dependencies } = pkgJson;
49+
const version = dependencies["vue-formik"]?.replace(/^\^/, "");
50+
const links = [
51+
{
52+
title: "Github",
53+
url: "https://github.com/vue-formik/vue-formik",
54+
color: "text-gray-100",
55+
},
56+
{
57+
title: "Documentation",
58+
url: "https://vue-formik.netlify.app",
59+
color: "text-green-500",
60+
},
61+
{
62+
title: "Playground",
63+
url: "/playground",
64+
color: "text-blue-500",
65+
},
66+
{
67+
title: "NPM",
68+
url: "https://www.npmjs.com/package/vue-formik",
69+
color: "text-red-500",
70+
},
71+
{
72+
title: "Issues",
73+
url: "https://github.com/vue-formik/vue-formik/issues",
74+
color: "text-yellow-500",
75+
},
76+
{
77+
title: "Pull Requests",
78+
url: "https://github.com/vue-formik/vue-formik/pulls",
79+
color: "text-purple-500",
80+
},
81+
];
82+
const author = {
83+
name: "Kiran Parajuli",
84+
email: "[email protected]",
85+
linkedIn: "https://www.linkedin.com/in/kiranparajuli589/",
86+
};
87+
const birth = "2024-12-28T18:22:01.000Z";
88+
const fromNow = new Date(birth).toLocaleString();
89+
</script>

‎src/views/HomeView.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<section class="flex flex-col justify-center grow text-center h-[90vh]">
3-
<header class="mb-12">
2+
<section class="flex flex-col justify-center grow text-center h-full md:h-[90vh] px-4 sm:px-0">
3+
<header class="mt-12 sm:mt-0 mb-12">
44
<h1 class="text-gradient max-w-[650px] mx-auto">Vue Formik: Making Forms a Breeze</h1>
55
<p class="text-lg">Vue Formik is a form library for Vue.js that helps you with your forms.</p>
66
</header>
77

88
<section class="mb-12">
9-
<div class="flex gap-4 justify-center items-center">
9+
<div class="flex gap-4 justify-center items-center flex-wrap">
1010
<router-link class="primary-btn md" to="/getting-started/introduction">
1111
Introduction
1212
</router-link>
@@ -17,7 +17,7 @@
1717
</div>
1818
</section>
1919

20-
<section class="flex items-center justify-center">
20+
<section class="flex items-center justify-center mb-12 sm:mb-0">
2121
<ul class="flex flex-wrap gap-4 items-start text-start">
2222
<li class="p-4 rounded max-w-[200px]">
2323
<h4 class="font-semibold mb-3">Battle Tested</h4>
@@ -42,12 +42,12 @@
4242

4343
<script setup lang="ts"></script>
4444

45-
<style>
45+
<style lang="scss">
4646
.text-gradient {
4747
background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
4848
-webkit-background-clip: text;
4949
-webkit-text-fill-color: transparent;
50-
font-size: 3rem;
50+
font-size: clamp(2rem, 5vw, 3rem);
5151
line-height: 1.2;
5252
font-weight: 800;
5353
margin-bottom: 1rem;

‎src/views/libDocs/components/WhyView.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,6 @@
4949
remains clean and modular. Updates to shared logic, such as validation rules, can be applied
5050
in one place rather than across multiple input fields.
5151
</p>
52-
<p>
53-
Additionally, components make collaboration among team members easier. Designers and
54-
developers can focus on improving individual components without worrying about the larger
55-
application structure. This modularity also facilitates testing, as each component can be
56-
independently verified for its functionality.
57-
</p>
5852

5953
<p>We will explore more about the power of components in the next section.</p>
6054
</section>

0 commit comments

Comments
 (0)