Skip to content

Commit 110a078

Browse files
rstoenescurstoenescu
committed
feat(docs): Layout pages (still WIP)
1 parent c573c86 commit 110a078

File tree

11 files changed

+856
-63
lines changed

11 files changed

+856
-63
lines changed

‎docs/src/components/page-parts/layout/ViewPlay.vue‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<div>
3+
4+
<div class="q-mt-lg q-mb-sm generic-border-radius overflow-hidden shadow-2">
5+
<div class="row">
6+
<div class="col-3 q-pa-md flex flex-center" :class="topL === 'h' ? 'bg-primary text-white' : 'bg-orange text-grey-9'">
7+
<q-option-group
8+
inline
9+
color="white"
10+
keep-color
11+
dense
12+
v-model="topL"
13+
:options="[{ label: 'l', value: 'l'}, { label: 'h', value: 'h'}]"
14+
/>
15+
</div>
16+
<div class="col-6 q-pa-md flex flex-center bg-primary text-white">
17+
<q-option-group
18+
inline
19+
color="white"
20+
keep-color
21+
dense
22+
v-model="topC"
23+
:options="[{ label: 'h', value: 'h'}, { label: 'H', value: 'H'}]"
24+
/>
25+
</div>
26+
<div class="col-3 q-pa-md flex flex-center" :class="topR === 'h' ? 'bg-primary text-white' : 'bg-orange text-grey-9'">
27+
<q-option-group
28+
inline
29+
color="white"
30+
keep-color
31+
dense
32+
v-model="topR"
33+
:options="[{ label: 'r', value: 'r'}, { label: 'h', value: 'h'}]"
34+
/>
35+
</div>
36+
</div>
37+
38+
<div class="row">
39+
<div class="col-3 q-px-md q-py-xl flex flex-center bg-orange text-grey-9">
40+
<q-option-group
41+
inline
42+
color="white"
43+
keep-color
44+
dense
45+
v-model="middleL"
46+
:options="[{ label: 'l', value: 'l'}, { label: 'L', value: 'L'}]"
47+
/>
48+
</div>
49+
<div class="col-6 q-px-md q-py-xl flex flex-center">
50+
p
51+
</div>
52+
<div class="col-3 q-px-md q-py-xl flex flex-center bg-orange text-grey-9">
53+
<q-option-group
54+
inline
55+
color="white"
56+
keep-color
57+
dense
58+
v-model="middleR"
59+
:options="[{ label: 'r', value: 'r'}, { label: 'R', value: 'R'}]"
60+
/>
61+
</div>
62+
</div>
63+
64+
<div class="row">
65+
<div class="col-3 q-pa-md flex flex-center" :class="bottomL === 'f' ? 'bg-grey-8 text-white' : 'bg-orange text-grey-9'">
66+
<q-option-group
67+
inline
68+
color="white"
69+
keep-color
70+
dense
71+
v-model="bottomL"
72+
:options="[{ label: 'l', value: 'l'}, { label: 'f', value: 'f'}]"
73+
/>
74+
</div>
75+
<div class="col-6 q-pa-md flex flex-center bg-grey-8 text-white">
76+
<q-option-group
77+
inline
78+
color="white"
79+
keep-color
80+
dense
81+
v-model="bottomC"
82+
:options="[{ label: 'f', value: 'f'}, { label: 'F', value: 'F'}]"
83+
/>
84+
</div>
85+
<div class="col-3 q-pa-md flex flex-center" :class="bottomR === 'f' ? 'bg-grey-8 text-white' : 'bg-orange text-grey-9'">
86+
<q-option-group
87+
inline
88+
color="white"
89+
keep-color
90+
dense
91+
v-model="bottomR"
92+
:options="[{ label: 'r', value: 'r'}, { label: 'f', value: 'f'}]"
93+
/>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<div class="flex flex-center">
99+
<div class="q-pa-sm bg-grey-4 generic-border-radius">
100+
View: <q-badge :label="view" />
101+
</div>
102+
</div>
103+
104+
</div>
105+
</template>
106+
107+
<script>
108+
export default {
109+
data () {
110+
return {
111+
topL: 'h',
112+
topC: 'H',
113+
topR: 'h',
114+
115+
middleL: 'L',
116+
middleR: 'r',
117+
118+
bottomL: 'f',
119+
bottomC: 'F',
120+
bottomR: 'f'
121+
}
122+
},
123+
124+
computed: {
125+
view () {
126+
const
127+
top = `${this.topL}${this.topC}${this.topR}`,
128+
middle = `${this.middleL}p${this.middleR}`,
129+
bottom = `${this.bottomL}${this.bottomC}${this.bottomR}`
130+
131+
return `${top} ${middle} ${bottom}`
132+
}
133+
}
134+
}
135+
</script>

‎docs/src/components/page-parts/layout/ViewProp.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="q-mt-lg">
3+
<div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
4+
<div class="col-3">
5+
<div class="q-pa-sm">Header</div>
6+
</div>
7+
8+
<div class="col-3">
9+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">l/h</div>
10+
</div>
11+
<div class="col-3">
12+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">h/H</div>
13+
</div>
14+
<div class="col-3">
15+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">r/h</div>
16+
</div>
17+
</div>
18+
19+
<div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
20+
<div class="col-3" />
21+
22+
<div class="col-3">
23+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">l/L</div>
24+
</div>
25+
<div class="col-3">
26+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">p</div>
27+
</div>
28+
<div class="col-3">
29+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">r/R</div>
30+
</div>
31+
</div>
32+
33+
<div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
34+
<div class="col-3">
35+
<div class="q-pa-sm">Footer</div>
36+
</div>
37+
38+
<div class="col-3">
39+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">l/f</div>
40+
</div>
41+
<div class="col-3">
42+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">f/F</div>
43+
</div>
44+
<div class="col-3">
45+
<div class="q-pa-sm bg-primary text-white flex flex-center generic-border-radius">r/f</div>
46+
</div>
47+
</div>
48+
49+
<div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
50+
<div class="col-3" />
51+
52+
<div class="col-3">
53+
<div class="q-pa-sm flex flex-center">Left</div>
54+
</div>
55+
<div class="col-3" />
56+
<div class="col-3">
57+
<div class="q-pa-sm flex flex-center">Right</div>
58+
</div>
59+
</div>
60+
</div>
61+
</template>

0 commit comments

Comments
 (0)