Skip to content

Commit 2b095e0

Browse files
WaDadidouWaDadidou
authored
feat: Setup layout (#51)
* feat: Start to organize layouting * fix: Add breakpoints, left panel menu style, few styles * feat: Add tailwind config file, put in it custom stuff, export breakpoints
1 parent 677c219 commit 2b095e0

File tree

17 files changed

+208
-59
lines changed

17 files changed

+208
-59
lines changed

‎packages/frontend-main/src/App.vue‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,6 @@
11
<script setup lang="ts">
2-
import ToggleThemeButton from './components/ui/ToggleThemeButton.vue';
3-
4-
import WalletConnect from '@/components/popups/WalletConnect.vue';
5-
62
</script>
73

84
<template>
9-
<div class="flex flex-col w-screen h-screen overflow-x-hidden overflow-y-auto items-center">
10-
<div class="flex flex-row w-full h-full justify-center max-w-[1280px]">
11-
<!-- TODO: Make left menu -->
12-
<!-- This should probably stick -->
13-
<div class="flex flex-col p-6 h-full w-[380px] gap-6">
14-
<div class="text-2xl">Dither</div>
15-
<nav class="flex flex-col">
16-
<RouterLink to="/" activeClass="font-bold">Home</RouterLink>
17-
<RouterLink to="/notifications" activeClass="font-bold">Notifications</RouterLink>
18-
<!-- TODO: Use current user address -->
19-
<RouterLink to="/profile/:address" activeClass="font-bold">My Profile</RouterLink>
20-
<!-- TODO: Remove this after testing -->
21-
<RouterLink to="/post?hash=9c0f718289998024ce7c83b24f350e3fc4fa0c3d5c421c5042422c8721eec3e0" activeClass="font-bold">Post #1</RouterLink>
22-
</nav>
23-
<WalletConnect />
24-
</div>
25-
26-
<div class="flex flex-col border-x border-neutral-200 h-full grow min-w-[600px]">
27-
<main>
28-
<RouterView />
29-
</main>
30-
</div>
31-
32-
<!-- TODO: Make right menu -->
33-
<!-- This should probably stick -->
34-
<div class="flex flex-col w-[380px] p-6 h-full">
35-
<ToggleThemeButton/>
36-
<input placeholder="search" class="bg-neutral-200 p-2 w-full" />
37-
</div>
38-
</div>
39-
</div>
5+
<RouterView />
406
</template>

‎packages/frontend-main/src/components/popups/WalletConnect.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Ref } from 'vue';
33
44
import { computed, ref } from 'vue';
55
import { bech32 } from 'bech32';
6+
import { Wallet } from 'lucide-vue-next';
67
78
import { getWalletHelp, useWallet, Wallets } from '@/composables/useWallet';
89
@@ -134,9 +135,12 @@ const isValidAddress = computed(() => {
134135
<Dialog>
135136
<!-- Normal signed out button -->
136137
<DialogTrigger>
137-
<ButtonCustom class="w-[207px]">
138+
<ButtonCustom class="w-[207px] xl:inline hidden">
138139
{{ $t('components.WalletConnect.button') }}
139140
</ButtonCustom>
141+
<div class="flex items-center justify-center flex-row xl:hidden h-[52px]">
142+
<Wallet class="size-7"/>
143+
</div>
140144
</DialogTrigger>
141145
<DialogContent>
142146
<template v-if="selectState">

‎packages/frontend-main/src/components/ui/Feed.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const { data } = useFeed();
66
77
</script>
88

9-
<template>
10-
<div class="flex flex-col gap-4">
9+
<template >
10+
<div class="flex flex-col w-full gap-4 border-x border-x-neutral-200 ">
1111

12-
<div v-for="(post, index) in data" :key="index" class="flex flex-col border-b py-4">
12+
<div v-for="(post, index) in data" :key="index" class="flex flex-col border-b py-4 px-4">
1313
<span>
1414
{{ post.message }}
1515
</span>

‎packages/frontend-main/src/components/ui/button/button-custom/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
33
export { default as ButtonCustom } from './ButtonCustom.vue';
44

55
export const buttonVariants = cva(
6-
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base leading-[normal] font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
6+
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
77
{
88
variants: {
99
variant: {

‎packages/frontend-main/src/layouts/MainLayout.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { useMediaQuery } from '@vueuse/core';
3+
4+
import LeftPanel from './panels/LeftPanel.vue';
5+
import RightPanel from './panels/RightPanel.vue';
6+
import MainLayoutMobile from './MainLayoutMobile.vue';
7+
8+
import { breakpoints } from '@/lib/breakpoints';
9+
const isMobile = useMediaQuery(`(max-width: ${breakpoints.md - 1}px)`);
10+
11+
</script>
12+
13+
<template>
14+
<MainLayoutMobile v-if="isMobile">
15+
<slot />
16+
</MainLayoutMobile>
17+
18+
<div v-else class="flex flex-row justify-between">
19+
<div class="w-full h-[100vh] flex-1 xl:flex-auto overflow-y-auto sticky top-0">
20+
<div class="w-full max-w-[280px] h-full py-6 pl-6 pr-4 ml-auto">
21+
<LeftPanel />
22+
</div>
23+
</div>
24+
25+
<main class="flex flex-row min-w-[var(--main-min-width-desktop)]">
26+
<slot />
27+
</main>
28+
29+
<div class="w-full h-[100vh] flex-1 lg:flex-4 xl:flex-auto overflow-y-auto sticky top-0">
30+
<div class="w-full max-w-[358px] h-full p-6 hidden lg:block">
31+
<RightPanel />
32+
</div>
33+
</div>
34+
35+
</div>
36+
</template>

‎packages/frontend-main/src/layouts/MainLayoutMobile.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import BottomPanel from './panels/BottomPanel.vue';
3+
import TopPanel from './panels/TopPanel.vue';
4+
5+
</script>
6+
7+
<template>
8+
<!-- TODO: TOPPANEL -->
9+
<TopPanel />
10+
11+
<main>
12+
<slot />
13+
</main>
14+
15+
<!-- TODO: BOTTOMPANEL -->
16+
<BottomPanel />
17+
</template>

‎packages/frontend-main/src/layouts/panels/BottomPanel.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<div/>
7+
</template>

‎packages/frontend-main/src/layouts/panels/LeftPanel.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
3+
import { Bell, FlaskConical, House, User } from 'lucide-vue-next';
4+
5+
import WalletConnect from '@/components/popups/WalletConnect.vue';
6+
7+
</script>
8+
9+
<template>
10+
<!-- TODO: Adjust style, buttons, etc -->
11+
<header class="flex flex-col justify-between h-full w-full">
12+
<div class="flex flex-col justify-between gap-22 w-full xl:items-start items-end">
13+
<nav class="flex flex-col gap-20">
14+
<RouterLink to="/" class="h-[52px]">
15+
<span class="hidden xl:inline text-2xl font-semibold">Dither</span>
16+
</RouterLink>
17+
18+
<div class="flex flex-col gap-3">
19+
<RouterLink to="/" class="flex flex-row items-center gap-3">
20+
<div class="flex items-center justify-center h-[52px]">
21+
<House class="size-7" />
22+
</div>
23+
<span class="hidden xl:inline text-lg font-medium">Home</span>
24+
</RouterLink>
25+
26+
<RouterLink to="/notifications" class="flex flex-row items-center gap-3">
27+
<div class="flex items-center justify-center h-[52px]">
28+
<Bell class="size-7" />
29+
</div>
30+
<span class="hidden xl:inline text-lg font-medium">Notifications</span>
31+
</RouterLink>
32+
33+
<RouterLink to="/profile/:address" class="flex flex-row items-center gap-3">
34+
<div class="flex items-center justify-center h-[52px]">
35+
<User class="size-7" />
36+
</div>
37+
<span class="hidden xl:inline text-lg font-medium">My Profile</span>
38+
</RouterLink>
39+
40+
<RouterLink to="/post?hash=9c0f718289998024ce7c83b24f350e3fc4fa0c3d5c421c5042422c8721eec3e0"
41+
class="flex flex-row items-center gap-3">
42+
<div class="flex items-center justify-center h-[52px]">
43+
<FlaskConical class="size-7" />
44+
</div>
45+
<span class="hidden xl:inline text-lg font-medium">Post #1</span>
46+
</RouterLink>
47+
</div>
48+
</nav>
49+
50+
<WalletConnect />
51+
</div>
52+
53+
<div>Stuff here?</div>
54+
</header>
55+
</template>

‎packages/frontend-main/src/layouts/panels/RightPanel.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
3+
import ToggleThemeButton from '@/components/ui/ToggleThemeButton.vue';
4+
5+
</script>
6+
7+
<template>
8+
<!-- TODO -->
9+
<aside
10+
class="flex flex-col h-full w-full gap-4">
11+
<ToggleThemeButton/>
12+
<input placeholder="search" class="bg-neutral-200 p-2 h-[44px]" />
13+
</aside>
14+
</template>

‎packages/frontend-main/src/layouts/panels/TopPanel.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<div/>
7+
</template>

0 commit comments

Comments
 (0)