Skip to content

Commit d657711

Browse files
DobruniaDobrunia
authored
Merge pull request codex-team#288 from codex-team/feature/layout-page-block-component
Feature/layout page block component
2 parents cc3f109 + 899bfa6 commit d657711

9 files changed

Lines changed: 193 additions & 20 deletions

File tree

‎codex-ui/dev/Playground.vue‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,14 @@
1818
/>
1919
</template>
2020
</Navbar>
21-
<div :class="$style.body">
22-
<div
23-
:class="$style.aside"
24-
>
21+
<PageBlock :stretched="true">
22+
<template #left>
2523
<VerticalMenu
2624
:items="pages"
2725
/>
28-
</div>
29-
<div :class="$style.content">
30-
<router-view />
31-
</div>
32-
</div>
26+
</template>
27+
<router-view />
28+
</PageBlock>
3329
<Popover />
3430
<Popup />
3531
</div>
@@ -45,6 +41,7 @@ import {
4541
} from '../src/vue';
4642
import { useTheme } from '../src/vue/composables/useTheme';
4743
import { Navbar } from '../src/vue/layout/navbar';
44+
import { PageBlock } from '../src/vue/layout/page-block';
4845
4946
import { useRouter, useRoute } from 'vue-router';
5047
@@ -106,6 +103,11 @@ const pages = computed(() => [
106103
onActivate: () => router.push('/layout/navbar'),
107104
isActive: route.path === '/layout/navbar',
108105
},
106+
{
107+
title: 'PageBlock',
108+
onActivate: () => router.push('/layout/page-block'),
109+
isActive: route.path === '/layout/page-block',
110+
},
109111
],
110112
},
111113
{
@@ -230,7 +232,6 @@ const pages = computed(() => [
230232
.playground {
231233
background-color: var(--base--bg-primary);
232234
color: var(--base--text);
233-
min-height: 100%;
234235
}
235236
236237
.logo {
@@ -242,12 +243,4 @@ const pages = computed(() => [
242243
text-decoration: none;
243244
color: var(--base--text);
244245
}
245-
246-
.body {
247-
padding: var(--spacing-l);
248-
display: grid;
249-
grid-template-columns: auto minmax(0, 1fr);
250-
gap: var(--spacing-xxl);
251-
max-width: 1200px;
252-
}
253246
</style>

‎codex-ui/dev/pages/layout/Navbar.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Navbar } from '../../../src/vue';
1515

1616
<style scoped>
1717
.navbar-wrapper {
18+
width: 600px;
1819
min-height: 400px;
1920
position: relative;
2021
background-color: var(--base--bg-secondary);

‎codex-ui/dev/pages/layout/PageBlock.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<PageHeader>
3+
PageBlock
4+
<template #description>
5+
PageBlock is a page unit with three slots: left, right, and center content. By default, the content has a fixed width of 700px. When stretched is true, the content adapts to the screen size.
6+
</template>
7+
</PageHeader>
8+
<div class="page-block-wrapper">
9+
<Heading :level="2">
10+
Examples
11+
</Heading>
12+
<Heading :level="3">
13+
Default
14+
</Heading>
15+
<svg
16+
width="700px"
17+
viewBox="0 0 1830 457"
18+
fill="none"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<rect
22+
width="1830"
23+
height="457"
24+
fill="var(--base--bg-secondary)"
25+
/>
26+
<rect
27+
x="233"
28+
y="50"
29+
width="300"
30+
height="357"
31+
fill="var(--base--bg-primary)"
32+
/>
33+
<rect
34+
x="1297"
35+
y="50"
36+
width="300"
37+
height="357"
38+
fill="var(--base--bg-primary)"
39+
/>
40+
<rect
41+
x="565"
42+
y="50"
43+
width="700"
44+
height="357"
45+
fill="var(--base--bg-primary)"
46+
/>
47+
</svg>
48+
<br>
49+
<br>
50+
<br>
51+
<br>
52+
<Heading :level="3">
53+
Stretched
54+
</Heading>
55+
<svg
56+
width="700px"
57+
viewBox="0 0 1830 457"
58+
fill="none"
59+
xmlns="http://www.w3.org/2000/svg"
60+
>
61+
<rect
62+
width="1830"
63+
height="457"
64+
fill="var(--base--bg-secondary)"
65+
/>
66+
<rect
67+
x="16"
68+
y="50"
69+
width="316.82"
70+
height="357"
71+
fill="var(--base--bg-primary)"
72+
/>
73+
<rect
74+
x="364.82"
75+
y="50"
76+
width="1100.36"
77+
height="357"
78+
fill="var(--base--bg-primary)"
79+
/>
80+
<rect
81+
x="1497.18"
82+
y="50"
83+
width="316.82"
84+
height="357"
85+
fill="var(--base--bg-primary)"
86+
/>
87+
</svg>
88+
</div>
89+
</template>
90+
91+
<script setup lang="ts">
92+
import PageHeader from '../../components/PageHeader.vue';
93+
import { Heading } from '../../../src/vue/';
94+
</script>

‎codex-ui/dev/routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import ThemePreview from './pages/components/ThemePreview.vue';
3131
import Popup from './pages/components/Popup.vue';
3232
import Confirm from './pages/components/Confirm.vue';
3333
import Navbar from './pages/layout/Navbar.vue';
34+
import PageBlock from './pages/layout/PageBlock.vue';
3435

3536
/**
3637
* Vue router routes list
@@ -160,6 +161,10 @@ const routes: RouteRecordRaw[] = [
160161
path: '/layout/navbar',
161162
component: Navbar as Component,
162163
},
164+
{
165+
path: '/layout/page-block',
166+
component: PageBlock as Component,
167+
},
163168
];
164169

165170
export default routes;

‎codex-ui/src/styles/dimensions.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
* Layout
2424
*/
2525
--layout-content-width: 700px;
26-
--layout-block-width: 300px;
26+
--layout-sidebar-width: 300px;
2727
--layout-navbar-height: 51px;
2828

2929
/**

‎codex-ui/src/vue/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ export * from './components/checkbox';
2323
export * from './components/select';
2424

2525
export * from './layout/navbar';
26+
export * from './layout/page-block';

‎codex-ui/src/vue/layout/page-block/PageBlock.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div
3+
:class="[
4+
$style['page-block'],
5+
{ [$style['page-block--stretched']]: stretched }
6+
]"
7+
>
8+
<!-- Left Sidebar -->
9+
<div
10+
v-if="$slots.left"
11+
:class="$style['page-block__sidebar']"
12+
>
13+
<slot name="left" />
14+
</div>
15+
16+
<!-- Center Content -->
17+
<div
18+
:class="[
19+
$style['page-block__content'],
20+
{ [$style['page-block__content--stretched']]: stretched }
21+
]"
22+
>
23+
<slot />
24+
</div>
25+
26+
<!-- Right Sidebar -->
27+
<div
28+
v-if="$slots.right"
29+
:class="$style['page-block__sidebar']"
30+
>
31+
<slot name="right" />
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script lang="ts" setup>
37+
import { defineProps } from 'vue';
38+
39+
defineProps({
40+
stretched: {
41+
type: Boolean,
42+
default: false,
43+
},
44+
});
45+
</script>
46+
47+
<style module lang="postcss">
48+
.page-block {
49+
width: 100%;
50+
display: flex;
51+
justify-content: center;
52+
box-sizing: border-box;
53+
54+
&--stretched {
55+
justify-content: stretch;
56+
}
57+
58+
&__content {
59+
max-width: var(--layout-content-width);
60+
padding: var(--spacing-xxl) var(--spacing-ml);
61+
box-sizing: border-box;
62+
63+
&--stretched {
64+
max-width: 100%;
65+
flex: 2;
66+
}
67+
}
68+
69+
&__sidebar {
70+
width: var(--layout-sidebar-width);
71+
flex-shrink: 0;
72+
box-sizing: border-box;
73+
padding: var(--spacing-xxl) var(--spacing-ml);
74+
}
75+
}
76+
</style>

‎codex-ui/src/vue/layout/page-block/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import PageBlock from './PageBlock.vue';
2+
3+
export { PageBlock };

‎src/presentation/layouts/ThreeColsLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737
3838
.block-left, .block-right{
39-
width: var(--layout-block-width);
39+
width: var(--layout-sidebar-width);
4040
padding: 0 var(--spacing-ml);
4141
}
4242
</style>

0 commit comments

Comments
 (0)