Skip to content

Commit 71b22a1

Browse files
rstoenescurstoenescu
committed
refactor: CSS Grid
1 parent 615cc1e commit 71b22a1

File tree

85 files changed

+1248
-782
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+1248
-782
lines changed

‎dev/components/components/data-table.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,12 +178,12 @@ export default {
178178
allCols: 'Eeeeeeeeevery Cols',
179179
rows: 'Rooows',
180180
selected: {
181-
singular: 'item selected.',
182-
plural: 'items selected.'
181+
singular: 'item selecteeed.',
182+
plural: 'items selecteeed.'
183183
},
184-
clear: 'clear',
185-
search: 'Search',
186-
all: 'All'
184+
clear: 'cleeeear',
185+
search: 'Seaaaarch',
186+
all: 'AAAll'
187187
}
188188
},
189189
columns: [

‎dev/components/components/modal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
</div>
7676

7777
<div slot="header" class="q-toolbar">
78-
<q-search class="bg-blue-6 auto"></q-search>
78+
<q-search class="bg-blue-6 col"></q-search>
7979
</div>
8080

8181
<div slot="footer" class="q-toolbar">

‎dev/components/components/scroll-area.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<div style="margin-bottom: 25px" v-for="n in number">{{n}} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <q-btn>Click</q-btn></div>
1616
</q-scroll-area>
1717

18+
<br>
1819
<q-btn @click="number--">Less</q-btn>
1920
<q-btn @click="number++">More</q-btn>
2021

‎dev/components/components/spinner.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,22 @@ export default {
6161
colorOptions: [
6262
{
6363
label: 'Black',
64+
color: 'black',
6465
value: '#000000'
6566
},
6667
{
6768
label: 'Red',
69+
color: 'red',
6870
value: '#ff0000'
6971
},
7072
{
7173
label: 'Green',
74+
color: 'green',
7275
value: '#00ff00'
7376
},
7477
{
7578
label: 'Blue',
79+
color: 'blue',
7680
value: '#0000ff'
7781
}
7882
]

‎dev/components/components/tabs-playground.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="layout-padding">
2+
<div class="layout-padding tabs-playground">
33
<!--
44
This is for fast tests.
55
Use this page but don't add it into your commits (leave it outside
@@ -206,6 +206,6 @@ export default {
206206
</script>
207207

208208
<style lang="styl">
209-
.q-tabs
209+
.tabs-playground .q-tabs
210210
margin-bottom 25px
211211
</style>

‎dev/components/css/grid-columns.vue‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
<template>
2+
<div class="layout-padding grid-columns">
3+
<h1>Grid: Columns</h1>
4+
Utilize breakpoint-specific row classes for equal-width rows. Add any number of unit-less classes for each breakpoint you need and every row will be the same height.
5+
6+
<h3>Equal-width</h3>
7+
For example, here are two grid layouts that apply to every device and viewport, from xs to xl.
8+
9+
<div class="container">
10+
<div class="column">
11+
<div class="col">
12+
1 of 2
13+
</div>
14+
<div class="col">
15+
1 of 2
16+
</div>
17+
</div>
18+
<div class="column">
19+
<div class="col">
20+
1 of 3
21+
</div>
22+
<div class="col">
23+
1 of 3
24+
</div>
25+
<div class="col">
26+
1 of 3
27+
</div>
28+
</div>
29+
</div>
30+
31+
<h3>Setting one row height</h3>
32+
Auto-layout for flexbox grid rows also means you can set the height of one row and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline heights. Note that the other rows will resize no matter the height of the center row.
33+
34+
<div class="container">
35+
<div class="column">
36+
<div class="col">
37+
1 of 3
38+
</div>
39+
<div class="col-6">
40+
2 of 3 (wider)
41+
</div>
42+
<div class="col">
43+
3 of 3
44+
</div>
45+
</div>
46+
<div class="column">
47+
<div class="col">
48+
1 of 3
49+
</div>
50+
<div class="col-5">
51+
2 of 3 (wider)
52+
</div>
53+
<div class="col">
54+
3 of 3
55+
</div>
56+
</div>
57+
</div>
58+
59+
<h3>Variable height content</h3>
60+
Using the col-{breakpoint}-auto classes, rows can size itself based on the natural height of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven row sizes as viewport height changes.
61+
62+
<div class="container">
63+
<div class="column justify-md-center">
64+
<div class="col col-lg-2">
65+
1 of 3
66+
</div>
67+
<div class="col-12 col-md-auto">
68+
Variable width content
69+
</div>
70+
<div class="col col-lg-2">
71+
3 of 3
72+
</div>
73+
</div>
74+
<div class="column">
75+
<div class="col">
76+
1 of 3
77+
</div>
78+
<div class="col-12 col-md-auto">
79+
Variable width content
80+
</div>
81+
<div class="col col-lg-2">
82+
3 of 3
83+
</div>
84+
</div>
85+
</div>
86+
87+
<h1>Responsive classes</h1>
88+
The grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your rows on extra small, small, medium, large, or extra large devices however you see fit.
89+
90+
<h3>All breakpoints</h3>
91+
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized row; otherwise, feel free to stick to .col.
92+
93+
<div class="container">
94+
<div class="column">
95+
<div class="col">col</div>
96+
<div class="col">col</div>
97+
<div class="col">col</div>
98+
<div class="col">col</div>
99+
</div>
100+
<div class="column">
101+
<div class="col-8">col-8</div>
102+
<div class="col-4">col-4</div>
103+
</div>
104+
</div>
105+
106+
<h3>Mix and match</h3>
107+
Don’t want your rows to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
108+
<div class="container">
109+
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
110+
<div class="column">
111+
<div class="col col-md-8">.col .col-md-8</div>
112+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
113+
</div>
114+
115+
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
116+
<div class="column">
117+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
118+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
119+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
120+
</div>
121+
122+
<!-- Columns are always 50% wide, on mobile and desktop -->
123+
<div class="column">
124+
<div class="col-6">.col-6</div>
125+
<div class="col-6">.col-6</div>
126+
</div>
127+
</div>
128+
129+
<h1>Alignment</h1>
130+
Use flexbox alignment utilities to vertically and horizontally align columns.
131+
132+
<h3>Horizontal alignment</h3>
133+
<div class="container example-minheight">
134+
<div class="column items-start">
135+
<div class="col">
136+
One of three rows
137+
</div>
138+
<div class="col">
139+
One of three rows
140+
</div>
141+
<div class="col">
142+
One of three rows
143+
</div>
144+
</div>
145+
<div class="column items-center">
146+
<div class="col">
147+
One of three rows
148+
</div>
149+
<div class="col">
150+
One of three rows
151+
</div>
152+
<div class="col">
153+
One of three rows
154+
</div>
155+
</div>
156+
<div class="column items-end">
157+
<div class="col">
158+
One of three rows
159+
</div>
160+
<div class="col">
161+
One of three rows
162+
</div>
163+
<div class="col">
164+
One of three rows
165+
</div>
166+
</div>
167+
</div>
168+
169+
<div class="container example-minheight">
170+
<div class="column">
171+
<div class="col self-start">
172+
One of three rows
173+
</div>
174+
<div class="col self-center">
175+
One of three rows
176+
</div>
177+
<div class="col self-end">
178+
One of three rows
179+
</div>
180+
</div>
181+
</div>
182+
183+
<h3>Vertical alignment</h3>
184+
<div class="container">
185+
<div class="column justify-start">
186+
<div class="col-4">
187+
One of two rows
188+
</div>
189+
<div class="col-4">
190+
One of two rows
191+
</div>
192+
</div>
193+
<div class="column justify-center">
194+
<div class="col-4">
195+
One of two rows
196+
</div>
197+
<div class="col-4">
198+
One of two rows
199+
</div>
200+
</div>
201+
<div class="column justify-end">
202+
<div class="col-4">
203+
One of two rows
204+
</div>
205+
<div class="col-4">
206+
One of two columns
207+
</div>
208+
</div>
209+
<div class="column justify-around">
210+
<div class="col-4">
211+
One of two rows
212+
</div>
213+
<div class="col-4">
214+
One of two rows
215+
</div>
216+
</div>
217+
<div class="column justify-between">
218+
<div class="col-4">
219+
One of two rows
220+
</div>
221+
<div class="col-4">
222+
One of two rows
223+
</div>
224+
</div>
225+
</div>
226+
227+
<h3>Row wrapping</h3>
228+
If more than 12 rows are placed within a single row, each group of extra rows will, as one unit, wrap onto a new column.
229+
230+
<div class="container">
231+
<div class="column">
232+
<div class="col-9">.col-9</div>
233+
<div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12,<br>this 4-row-wide div gets wrapped<br>onto a new line as<br>one contiguous unit.</div>
234+
<div class="col-6">.col-6<br>Subsequent rows continue along the new line.</div>
235+
</div>
236+
</div>
237+
238+
239+
<div class="container">
240+
<div class="column">
241+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
242+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
243+
244+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
245+
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
246+
</div>
247+
</div>
248+
249+
<h1>Reordering</h1>
250+
251+
<h3>Reverse</h3>
252+
253+
<div class="container">
254+
<div class="column reverse">
255+
<div class="col">
256+
First, but last
257+
</div>
258+
<div class="col">
259+
Second, unchanged
260+
</div>
261+
<div class="col">
262+
Third, but first
263+
</div>
264+
</div>
265+
</div>
266+
267+
<h3>Flex order</h3>
268+
Use flexbox utilities for controlling the visual order of your content.
269+
270+
<div class="container">
271+
<div class="column">
272+
<div class="col order-none">
273+
First, but unordered
274+
</div>
275+
<div class="col order-last">
276+
Second, but last
277+
</div>
278+
<div class="col order-first">
279+
Third, but first
280+
</div>
281+
</div>
282+
</div>
283+
284+
<h1>Nesting</h1>
285+
To nest your content with the default grid, add a new .column and set of .col-sm-* rows within an existing .col-sm-* row. Nested columns should include a set of rows that add up to 12 or fewer (it is not required that you use all 12 available columns).
286+
287+
<div class="container">
288+
<div class="column">
289+
<div class="col-sm-9">
290+
Level 1: .col-sm-9
291+
<div class="column" style="height: 150px">
292+
<div class="col-8 col-sm-6">
293+
Level 2: .col-8 .col-sm-6
294+
</div>
295+
<div class="col-4 col-sm-6">
296+
Level 2: .col-4 .col-sm-6
297+
</div>
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
</div>
303+
</template>
304+
305+
<style lang="stylus">
306+
.grid-columns
307+
.container
308+
padding 15px
309+
.column
310+
height 300px
311+
.column > div
312+
padding 10px 15px
313+
background rgba(86,61,124,.15)
314+
border 1px solid rgba(86,61,124,.2)
315+
.column + .column
316+
margin-top 1rem
317+
.example-minheight .column
318+
min-width 5rem
319+
background rgba(255,0,0,.1)
320+
</style>

0 commit comments

Comments
 (0)