Skip to content

feat - mobile view #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aksharahegde wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat - mobile view #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5af72b0
feat - mobile view
Jul 27, 2023
59ea9b6
Merge branch 'fayazara:main' into main
aksharahegde Jan 24, 2024
0a79cdd
Merge branch 'fayazara:main' into main
aksharahegde Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions components/AppForm/Links.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
<button class="absolute top-2 -left-8">
<icon
name="radix-icons:drag-handle-dots-2"
class="h-6 w-6 text-slate-500 drag-handle"
class="w-6 h-6 text-slate-500 drag-handle"
/>
</button>
<button
@click="removeLink(link)"
class="hidden group-hover:flex items-center justify-center h-6 w-6 rounded-full bg-slate-300 text-slate-600 absolute -right-3 -top-3"
class="hidden absolute -top-3 -right-3 justify-center items-center w-6 h-6 rounded-full group-hover:flex bg-slate-300 text-slate-600"
>
<icon name="fluent:dismiss-24-regular" class="h-4 w-4" />
<icon name="fluent:dismiss-24-regular" class="w-4 h-4" />
</button>
<div class="shadow sm:overflow-hidden sm:rounded-md">
<div class="space-y-6 bg-white px-4 py-5 sm:p-6">
<div class="px-4 py-5 space-y-6 bg-white sm:p-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label
Expand All @@ -42,7 +42,7 @@
name="iconKey"
id="iconKey"
v-model="link.i"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div>
Expand All @@ -56,7 +56,7 @@
name="label"
id="label"
v-model="link.l"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
<div class="col-span-2">
Expand All @@ -70,7 +70,7 @@
name="url"
id="url"
v-model="link.u"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
</div>
</div>
Expand All @@ -88,9 +88,10 @@

<button
@click="appendLink"
class="mt-8 border-2 text-slate-500 border-slate-300 rounded-lg block w-full py-2"
class="block py-2 w-full rounded-lg border-2 text-slate-500 border-slate-300"
:class="{'mt-8': modelValue.length > 0}"
>
<icon name="fluent:add-circle-24-regular" class="h-6 w-6" />
<icon name="fluent:add-circle-24-regular" class="w-6 h-6" />
</button>
</base-form-section>
</template>
Expand Down
13 changes: 10 additions & 3 deletions components/AppForm/Preview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<div class="h-screen grid place-items-center">
<div class="flex fixed inset-0 flex-col justify-center items-center px-4 space-y-6 h-screen bg-white md:flex-row md:relative lg:w-3/12">
<icon name="fluent:dismiss-24-regular" class="w-4 h-4 text-gray-600 opacity-100 md:opacity-0" @click="hidePreview" />
<div
class="h-[729px] w-[340px] overflow-y-auto rounded-[3rem] ring-8 ring-slate-800 overflow-hidden"
class="h-[calc(100vh-120px)] lg:h-[729px] lg:w-3/4 overflow-y-auto rounded-[3rem] ring-8 ring-slate-800 overflow-hidden"
>
<templates-simple :acc="data" />
</div>
Expand All @@ -12,7 +13,13 @@ const props = defineProps({
data: {
type: Object,
required: true,
},
}
});

const emit = defineEmits(['toggle'])

const hidePreview = () => {
emit('toggle', false)
}
</script>
<style scoped></style>
56 changes: 28 additions & 28 deletions components/AppForm/SocialLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
description="Add some social media links"
>
<div class="shadow sm:overflow-hidden sm:rounded-md">
<div class="grid grid-cols-2 gap-8 bg-white px-4 py-5 sm:p-6">
<div class="grid gap-2 px-4 py-5 bg-white md:gap-8 md:grid-cols-2 md:p-6">
<div>
<label for="facebook" class="block text-sm font-medium text-gray-700"
>Facebook</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:facebook-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -21,7 +21,7 @@
id="facebook"
:value="facebook"
@input="$emit('update:facebook', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://fb.com/elonmusk"
/>
</div>
Expand All @@ -30,9 +30,9 @@
<label for="twitter" class="block text-sm font-medium text-gray-700"
>Twitter</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:twitter-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -42,7 +42,7 @@
id="twitter"
:value="twitter"
@input="$emit('update:twitter', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://twitter.com/elonmusk"
/>
</div>
Expand All @@ -51,9 +51,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Instagram</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:instagram-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -63,7 +63,7 @@
id="instagram"
:value="instagram"
@input="$emit('update:instagram', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://instagram.com/elonmusk"
/>
</div>
Expand All @@ -72,9 +72,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Github</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:github-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -84,7 +84,7 @@
id="github"
:value="github"
@input="$emit('update:github', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://github.com/elonmusk"
/>
</div>
Expand All @@ -93,9 +93,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Telegram</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:telegram-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -105,7 +105,7 @@
id="telegram"
:value="telegram"
@input="$emit('update:telegram', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://t.me/elonmusk"
/>
</div>
Expand All @@ -114,9 +114,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Linkedin</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:linkedin-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -126,7 +126,7 @@
id="linkedin"
:value="linkedin"
@input="$emit('update:linkedin', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://linkedin.com/elonmusk"
/>
</div>
Expand All @@ -135,9 +135,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Email</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:envelope-duotone" class="w-5 h-5" />
</span>
Expand All @@ -147,7 +147,7 @@
id="email"
:value="email"
@input="$emit('update:email', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="elonmusk@geemail.com"
/>
</div>
Expand All @@ -156,9 +156,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Youtube</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:youtube-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -168,7 +168,7 @@
id="youtube"
:value="youtube"
@input="$emit('update:youtube', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="https://youtube.com/elonmusk"
/>
</div>
Expand All @@ -177,9 +177,9 @@
<label for="instagram" class="block text-sm font-medium text-gray-700"
>Whatsapp</label
>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="flex mt-1 rounded-md shadow-sm">
<span
class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
>
<icon name="ph:whatsapp-logo-duotone" class="w-5 h-5" />
</span>
Expand All @@ -189,7 +189,7 @@
id="whatsapp"
:value="whatsapp"
@input="$emit('update:whatsapp', $event.target.value)"
class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="+9190000000000"
/>
</div>
Expand Down
43 changes: 43 additions & 0 deletions constants/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const data = {
n: "John Snow",
d: "I'm John Snow, the king in the north. I know Nothing.",
i: "https://i.insider.com/56743fad72f2c12a008b6cc0",
f: "https://www.facebook.com/john_snow",
t: "https://twitter.com/john_snow",
ig: "https://www.instagram.com/john_snow",
e: "mail@john_snow.cc",
gh: "https://github.com/john_snow",
tg: "https://t.me/john_snow",
w: "+918888888888",
y: "https://youtube.com/@john_snow",
l: "https://linkedin.com/john_snow",
ls: [
{
l: "My Website",
i: "ph:globe-duotone",
u: "https://example.com",
},
{
l: "Amazon wishlist",
i: "ant-design:amazon-outlined",
u: "https://amazon.in",
},
{
l: "React JS course",
i: "grommet-icons:reactjs",
u: "https://reactjs.org/",
},
{
l: "Donate for our cause",
i: "iconoir:donate",
u: "https://who.int",
},
{
l: "Download my resume",
i: "ph:file-pdf",
u: "https://google.com",
},
],
};

export { data }
Loading