Skip to content

Commit 8a7baa6

Browse files
mrholekmrholek
committed
refactor: improve responsive behavior
1 parent 3e3b949 commit 8a7baa6

File tree

4 files changed

+54
-53
lines changed

4 files changed

+54
-53
lines changed

‎src/views/dashboard/Dashboard.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178
>
179179
<div class="progress-group-header">
180180
<CIcon :icon="item.icon" class="me-2" size="lg" />
181-
<span class="title">Organic Search</span>
181+
<span class="title">{{ item.title }}</span>
182182
<span class="ms-auto fw-semibold">
183183
{{ item.value }}
184184
<span class="text-medium-emphasis small"
@@ -221,7 +221,7 @@
221221
</CTableDataCell>
222222
<CTableDataCell>
223223
<div>{{ item.user.name }}</div>
224-
<div class="small text-medium-emphasis">
224+
<div class="small text-medium-emphasis text-nowrap">
225225
<span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
226226
{{ item.user.registered }}
227227
</div>
@@ -234,11 +234,11 @@
234234
/>
235235
</CTableDataCell>
236236
<CTableDataCell>
237-
<div class="clearfix">
238-
<div class="float-start">
237+
<div class="d-flex justify-content-between text-nowrap">
238+
<div>
239239
<strong>{{ item.usage.value }}%</strong>
240240
</div>
241-
<div class="float-end">
241+
<div class="ms-1">
242242
<small class="text-medium-emphasis">
243243
{{ item.usage.period }}
244244
</small>
@@ -255,10 +255,11 @@
255255
</CTableDataCell>
256256
<CTableDataCell>
257257
<div class="small text-medium-emphasis">Last login</div>
258-
<strong>{{ item.activity }}</strong>
258+
<div class="fw-semibold text-nowrap">
259+
{{ item.activity }}
260+
</div>
259261
</CTableDataCell>
260262
</CTableRow>
261-
<CTableRow> </CTableRow>
262263
</CTableBody>
263264
</CTable>
264265
</CCardBody>

‎src/views/widgets/Widgets.vue

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</DocsExample>
1212
<DocsExample href="">
1313
<CRow>
14-
<CCol :xs="3">
14+
<CCol :xs="12" :sm="6" :lg="3">
1515
<CWidgetStatsB
1616
class="mb-3"
1717
:progress="{ color: 'success', value: 75 }"
@@ -21,7 +21,7 @@
2121
<template #value>89.9%</template>
2222
</CWidgetStatsB>
2323
</CCol>
24-
<CCol :xs="3">
24+
<CCol :xs="12" :sm="6" :lg="3">
2525
<CWidgetStatsB
2626
class="mb-3"
2727
:progress="{ color: 'info', value: 75 }"
@@ -30,7 +30,7 @@
3030
value="12.124"
3131
/>
3232
</CCol>
33-
<CCol :xs="3">
33+
<CCol :xs="12" :sm="6" :lg="3">
3434
<CWidgetStatsB
3535
class="mb-3"
3636
:progress="{ color: 'warning', value: 75 }"
@@ -39,7 +39,7 @@
3939
value="$98.111,00"
4040
/>
4141
</CCol>
42-
<CCol :xs="3">
42+
<CCol :xs="12" :sm="6" :lg="3">
4343
<CWidgetStatsB
4444
class="mb-3"
4545
:progress="{ color: 'primary', value: 75 }"
@@ -52,7 +52,7 @@
5252
</DocsExample>
5353
<DocsExample href="">
5454
<CRow>
55-
<CCol :xs="3">
55+
<CCol :xs="12" :sm="6" :lg="3">
5656
<CWidgetStatsB
5757
class="mb-3"
5858
color="success"
@@ -64,7 +64,7 @@
6464
<template #value>89.9%</template>
6565
</CWidgetStatsB>
6666
</CCol>
67-
<CCol :xs="3">
67+
<CCol :xs="12" :sm="6" :lg="3">
6868
<CWidgetStatsB
6969
class="mb-3"
7070
color="info"
@@ -75,7 +75,7 @@
7575
value="12.124"
7676
/>
7777
</CCol>
78-
<CCol :xs="3">
78+
<CCol :xs="12" :sm="6" :lg="3">
7979
<CWidgetStatsB
8080
class="mb-3"
8181
color="warning"
@@ -86,7 +86,7 @@
8686
value="$98.111,00"
8787
/>
8888
</CCol>
89-
<CCol :xs="3">
89+
<CCol :xs="12" :sm="6" :lg="3">
9090
<CWidgetStatsB
9191
class="mb-3"
9292
color="primary"
@@ -102,7 +102,7 @@
102102

103103
<DocsExample href="">
104104
<CRow>
105-
<CCol :xs="2">
105+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
106106
<CWidgetStatsE title="title" value="1,123">
107107
<CChart
108108
class="mx-auto"
@@ -126,7 +126,7 @@
126126
/>
127127
</CWidgetStatsE>
128128
</CCol>
129-
<CCol :xs="2">
129+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
130130
<CWidgetStatsE title="title" value="1,123">
131131
<CChart
132132
class="mx-auto"
@@ -150,7 +150,7 @@
150150
/>
151151
</CWidgetStatsE>
152152
</CCol>
153-
<CCol :xs="2">
153+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
154154
<CWidgetStatsE title="title" value="1,123">
155155
<CChart
156156
class="mx-auto"
@@ -174,7 +174,7 @@
174174
/>
175175
</CWidgetStatsE>
176176
</CCol>
177-
<CCol :xs="2">
177+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
178178
<CWidgetStatsE title="title" value="1,123">
179179
<CChart
180180
class="mx-auto"
@@ -198,7 +198,7 @@
198198
/>
199199
</CWidgetStatsE>
200200
</CCol>
201-
<CCol :xs="2">
201+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
202202
<CWidgetStatsE title="title" value="1,123">
203203
<CChart
204204
class="mx-auto"
@@ -222,7 +222,7 @@
222222
/>
223223
</CWidgetStatsE>
224224
</CCol>
225-
<CCol :xs="2">
225+
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
226226
<CWidgetStatsE title="title" value="1,123">
227227
<CChart
228228
class="mx-auto"
@@ -250,28 +250,28 @@
250250
</DocsExample>
251251
<DocsExample href="">
252252
<CRow>
253-
<CCol :xs="3">
253+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
254254
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
255255
<template #icon>
256256
<CIcon icon="cil-settings" size="xl" />
257257
</template>
258258
</CWidgetStatsF>
259259
</CCol>
260-
<CCol :xs="3">
260+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
261261
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
262262
<template #icon>
263263
<CIcon icon="cil-user" size="xl" />
264264
</template>
265265
</CWidgetStatsF>
266266
</CCol>
267-
<CCol :xs="3">
267+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
268268
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
269269
<template #icon>
270270
<CIcon icon="cil-moon" size="xl" />
271271
</template>
272272
</CWidgetStatsF>
273273
</CCol>
274-
<CCol :xs="3">
274+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
275275
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
276276
<template #icon>
277277
<CIcon icon="cil-bell" size="xl" />
@@ -282,7 +282,7 @@
282282
</DocsExample>
283283
<DocsExample href="">
284284
<CRow>
285-
<CCol :xs="3">
285+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
286286
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
287287
<template #icon>
288288
<CIcon icon="cil-settings" size="xl" />
@@ -304,7 +304,7 @@
304304
</template>
305305
</CWidgetStatsF>
306306
</CCol>
307-
<CCol :xs="3">
307+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
308308
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
309309
<template #icon>
310310
<CIcon icon="cil-user" size="xl" />
@@ -326,7 +326,7 @@
326326
</template>
327327
</CWidgetStatsF>
328328
</CCol>
329-
<CCol :xs="3">
329+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
330330
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
331331
<template #icon>
332332
<CIcon icon="cil-moon" size="xl" />
@@ -348,7 +348,7 @@
348348
</template>
349349
</CWidgetStatsF>
350350
</CCol>
351-
<CCol :xs="3">
351+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
352352
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
353353
<template #icon>
354354
<CIcon icon="cil-bell" size="xl" />
@@ -374,7 +374,7 @@
374374
</DocsExample>
375375
<DocsExample href="">
376376
<CRow>
377-
<CCol :xs="3">
377+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
378378
<CWidgetStatsF
379379
color="primary"
380380
:padding="false"
@@ -386,7 +386,7 @@
386386
</template>
387387
</CWidgetStatsF>
388388
</CCol>
389-
<CCol :xs="3">
389+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
390390
<CWidgetStatsF
391391
color="info"
392392
:padding="false"
@@ -398,7 +398,7 @@
398398
</template>
399399
</CWidgetStatsF>
400400
</CCol>
401-
<CCol :xs="3">
401+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
402402
<CWidgetStatsF
403403
color="warning"
404404
:padding="false"
@@ -410,7 +410,7 @@
410410
</template>
411411
</CWidgetStatsF>
412412
</CCol>
413-
<CCol :xs="3">
413+
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
414414
<CWidgetStatsF
415415
color="danger"
416416
:padding="false"
@@ -483,7 +483,7 @@
483483
</DocsExample>
484484
<DocsExample href="">
485485
<CRow>
486-
<CCol :xs="2">
486+
<CCol :sm="4" :md="3" :lg="2">
487487
<CWidgetStatsC
488488
class="mb-3"
489489
:progress="{ color: 'info', value: 75 }"
@@ -495,7 +495,7 @@
495495
/></template>
496496
</CWidgetStatsC>
497497
</CCol>
498-
<CCol :xs="2">
498+
<CCol :sm="4" :md="3" :lg="2">
499499
<CWidgetStatsC
500500
class="mb-3"
501501
:progress="{ color: 'success', value: 75 }"
@@ -507,7 +507,7 @@
507507
/></template>
508508
</CWidgetStatsC>
509509
</CCol>
510-
<CCol :xs="2">
510+
<CCol :sm="4" :md="3" :lg="2">
511511
<CWidgetStatsC
512512
class="mb-3"
513513
:progress="{ color: 'warning', value: 75 }"
@@ -519,7 +519,7 @@
519519
/></template>
520520
</CWidgetStatsC>
521521
</CCol>
522-
<CCol :xs="2">
522+
<CCol :sm="4" :md="3" :lg="2">
523523
<CWidgetStatsC
524524
class="mb-3"
525525
:progress="{ color: 'primary', value: 75 }"
@@ -531,7 +531,7 @@
531531
/></template>
532532
</CWidgetStatsC>
533533
</CCol>
534-
<CCol :xs="2">
534+
<CCol :sm="4" :md="3" :lg="2">
535535
<CWidgetStatsC
536536
class="mb-3"
537537
:progress="{ color: 'danger', value: 75 }"
@@ -543,7 +543,7 @@
543543
/></template>
544544
</CWidgetStatsC>
545545
</CCol>
546-
<CCol :xs="2">
546+
<CCol :sm="4" :md="3" :lg="2">
547547
<CWidgetStatsC
548548
class="mb-3"
549549
:progress="{ color: 'info', value: 75 }"
@@ -559,7 +559,7 @@
559559
</DocsExample>
560560
<DocsExample href="">
561561
<CRow>
562-
<CCol :xs="2">
562+
<CCol :sm="4" :md="3" :lg="2">
563563
<CWidgetStatsC
564564
class="mb-3"
565565
color="info"
@@ -573,7 +573,7 @@
573573
/></template>
574574
</CWidgetStatsC>
575575
</CCol>
576-
<CCol :xs="2">
576+
<CCol :sm="4" :md="3" :lg="2">
577577
<CWidgetStatsC
578578
class="mb-3"
579579
color="success"
@@ -587,7 +587,7 @@
587587
/></template>
588588
</CWidgetStatsC>
589589
</CCol>
590-
<CCol :xs="2">
590+
<CCol :sm="4" :md="3" :lg="2">
591591
<CWidgetStatsC
592592
class="mb-3"
593593
color="warning"
@@ -601,7 +601,7 @@
601601
/></template>
602602
</CWidgetStatsC>
603603
</CCol>
604-
<CCol :xs="2">
604+
<CCol :sm="4" :md="3" :lg="2">
605605
<CWidgetStatsC
606606
class="mb-3"
607607
color="primary"
@@ -615,7 +615,7 @@
615615
/></template>
616616
</CWidgetStatsC>
617617
</CCol>
618-
<CCol :xs="2">
618+
<CCol :sm="4" :md="3" :lg="2">
619619
<CWidgetStatsC
620620
class="mb-3"
621621
color="danger"
@@ -629,7 +629,7 @@
629629
/></template>
630630
</CWidgetStatsC>
631631
</CCol>
632-
<CCol :xs="2">
632+
<CCol :sm="4" :md="3" :lg="2">
633633
<CWidgetStatsC
634634
class="mb-3"
635635
color="info"

0 commit comments

Comments
 (0)