Skip to content

Commit a1e6cf1

Browse files
mrholekmrholek
committed
refactor: improve responsive behavior
1 parent a4f1cf2 commit a1e6cf1

File tree

4 files changed

+579
-837
lines changed

4 files changed

+579
-837
lines changed

‎src/views/dashboard/Dashboard.vue

+46-108
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<WidgetsStatsA />
3+
<WidgetsStatsA class="mb-4" />
44
<CRow>
55
<CCol :md="12">
66
<CCard class="mb-4">
@@ -20,76 +20,54 @@
2020
aria-label="Basic outlined example"
2121
>
2222
<CButton color="secondary" variant="outline">Day</CButton>
23-
<CButton color="secondary" variant="outline" active
24-
>Month</CButton
25-
>
23+
<CButton color="secondary" variant="outline" active>Month</CButton>
2624
<CButton color="secondary" variant="outline">Year</CButton>
2725
</CButtonGroup>
2826
</CCol>
2927
</CRow>
3028
<CRow>
31-
<MainChart
32-
style="height: 300px; max-height: 300px; margin-top: 40px"
33-
/>
29+
<MainChart style="height: 300px; max-height: 300px; margin-top: 40px" />
3430
</CRow>
3531
</CCardBody>
3632
<CCardFooter>
37-
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
38-
<CCol class="mb-sm-2 mb-0">
33+
<CRow
34+
:xs="{ cols: 1, gutter: 4 }"
35+
:sm="{ cols: 2 }"
36+
:lg="{ cols: 4 }"
37+
:xl="{ cols: 5 }"
38+
class="mb-2 text-center"
39+
>
40+
<CCol>
3941
<div class="text-body-secondary">Visits</div>
40-
<div class="fw-semibold">29.703 Users (40%)</div>
41-
<CProgress
42-
class="mt-2"
43-
color="success"
44-
thin
45-
:precision="1"
46-
:value="40"
47-
/>
42+
<div class="fw-semibold text-truncate">29.703 Users (40%)</div>
43+
<CProgress class="mt-2" color="success" thin :precision="1" :value="40" />
4844
</CCol>
49-
<CCol class="mb-sm-2 mb-0 d-md-down-none">
45+
<CCol>
5046
<div class="text-body-secondary">Unique</div>
51-
<div class="fw-semibold">24.093 Users (20%)</div>
52-
<CProgress
53-
class="mt-2"
54-
color="info"
55-
thin
56-
:precision="1"
57-
:value="20"
58-
/>
47+
<div class="fw-semibold text-truncate">24.093 Users (20%)</div>
48+
<CProgress class="mt-2" color="info" thin :precision="1" :value="20" />
5949
</CCol>
60-
<CCol class="mb-sm-2 mb-0">
50+
<CCol>
6151
<div class="text-body-secondary">Pageviews</div>
62-
<div class="fw-semibold">78.706 Views (60%)</div>
63-
<CProgress
64-
class="mt-2"
65-
color="warning"
66-
thin
67-
:precision="1"
68-
:value="60"
69-
/>
52+
<div class="fw-semibold text-truncate">78.706 Views (60%)</div>
53+
<CProgress class="mt-2" color="warning" thin :precision="1" :value="60" />
7054
</CCol>
71-
<CCol class="mb-sm-2 mb-0">
55+
<CCol>
7256
<div class="text-body-secondary">New Users</div>
73-
<div class="fw-semibold">22.123 Users (80%)</div>
74-
<CProgress
75-
class="mt-2"
76-
color="danger"
77-
thin
78-
:precision="1"
79-
:value="80"
80-
/>
57+
<div class="fw-semibold text-truncate">22.123 Users (80%)</div>
58+
<CProgress class="mt-2" color="danger" thin :precision="1" :value="80" />
8159
</CCol>
82-
<CCol class="mb-sm-2 mb-0 d-md-down-none">
60+
<CCol class="d-none d-xl-block">
8361
<div class="text-body-secondary">Bounce Rate</div>
84-
<div class="fw-semibold">Average Rate (40.15%)</div>
62+
<div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
8563
<CProgress class="mt-2" :value="40" thin :precision="1" />
8664
</CCol>
8765
</CRow>
8866
</CCardFooter>
8967
</CCard>
9068
</CCol>
9169
</CRow>
92-
<WidgetsStatsD />
70+
<WidgetsStatsD class="mb-4" />
9371
<CRow>
9472
<CCol :md="12">
9573
<CCard class="mb-4">
@@ -98,21 +76,15 @@
9876
<CRow>
9977
<CCol :sm="12" :lg="6">
10078
<CRow>
101-
<CCol :sm="6">
102-
<div
103-
class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
104-
>
79+
<CCol :xs="6">
80+
<div class="border-start border-start-4 border-start-info py-1 px-3 mb-3">
10581
<div class="text-body-secondary small">New Clients</div>
10682
<div class="fs-5 fw-semibold">9,123</div>
10783
</div>
10884
</CCol>
109-
<CCol :sm="6">
110-
<div
111-
class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
112-
>
113-
<div class="text-body-secondary small">
114-
Recurring Clients
115-
</div>
85+
<CCol :xs="6">
86+
<div class="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
87+
<div class="text-body-secondary small">Recurring Clients</div>
11688
<div class="fs-5 fw-semibold">22,643</div>
11789
</div>
11890
</CCol>
@@ -124,9 +96,7 @@
12496
class="progress-group mb-4"
12597
>
12698
<div class="progress-group-prepend">
127-
<span class="text-body-secondary small">{{
128-
item.title
129-
}}</span>
99+
<span class="text-body-secondary small">{{ item.title }}</span>
130100
</div>
131101
<div class="progress-group-bars">
132102
<CProgress thin color="info" :value="item.value1" />
@@ -136,29 +106,21 @@
136106
</CCol>
137107
<CCol :sm="12" :lg="6">
138108
<CRow>
139-
<CCol :sm="6">
140-
<div
141-
class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
142-
>
109+
<CCol :xs="6">
110+
<div class="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
143111
<div class="text-body-secondary small">Pageviews</div>
144112
<div class="fs-5 fw-semibold">78,623</div>
145113
</div>
146114
</CCol>
147-
<CCol :sm="6">
148-
<div
149-
class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
150-
>
115+
<CCol :xs="6">
116+
<div class="border-start border-start-4 border-start-success py-1 px-3 mb-3">
151117
<div class="text-body-secondary small">Organic</div>
152118
<div class="fs-5 fw-semibold">49,123</div>
153119
</div>
154120
</CCol>
155121
</CRow>
156122
<hr class="mt-0" />
157-
<div
158-
v-for="item in progressGroupExample2"
159-
:key="item.title"
160-
class="progress-group"
161-
>
123+
<div v-for="item in progressGroupExample2" :key="item.title" class="progress-group">
162124
<div class="progress-group-header">
163125
<CIcon :icon="item.icon" class="me-2" size="lg" />
164126
<span class="title">{{ item.title }}</span>
@@ -171,19 +133,13 @@
171133

172134
<div class="mb-5"></div>
173135

174-
<div
175-
v-for="item in progressGroupExample3"
176-
:key="item.title"
177-
class="progress-group"
178-
>
136+
<div v-for="item in progressGroupExample3" :key="item.title" class="progress-group">
179137
<div class="progress-group-header">
180138
<CIcon :icon="item.icon" class="me-2" size="lg" />
181139
<span class="title">{{ item.title }}</span>
182140
<span class="ms-auto fw-semibold">
183141
{{ item.value }}
184-
<span class="text-body-secondary small"
185-
>({{ item.percent }}%)</span
186-
>
142+
<span class="text-body-secondary small">({{ item.percent }}%)</span>
187143
</span>
188144
</div>
189145
<div class="progress-group-bars">
@@ -194,36 +150,26 @@
194150
</CRow>
195151
<br />
196152
<CTable align="middle" class="mb-0 border" hover responsive>
197-
<CTableHead>
153+
<CTableHead class="text-nowrap">
198154
<CTableRow>
199155
<CTableHeaderCell class="bg-body-secondary text-center">
200156
<CIcon name="cil-people" />
201157
</CTableHeaderCell>
202-
<CTableHeaderCell class="bg-body-secondary">
203-
User
204-
</CTableHeaderCell>
158+
<CTableHeaderCell class="bg-body-secondary"> User </CTableHeaderCell>
205159
<CTableHeaderCell class="bg-body-secondary text-center">
206160
Country
207161
</CTableHeaderCell>
208-
<CTableHeaderCell class="bg-body-secondary">
209-
Usage
210-
</CTableHeaderCell>
162+
<CTableHeaderCell class="bg-body-secondary"> Usage </CTableHeaderCell>
211163
<CTableHeaderCell class="bg-body-secondary text-center">
212164
Payment Method
213165
</CTableHeaderCell>
214-
<CTableHeaderCell class="bg-body-secondary">
215-
Activity
216-
</CTableHeaderCell>
166+
<CTableHeaderCell class="bg-body-secondary"> Activity </CTableHeaderCell>
217167
</CTableRow>
218168
</CTableHead>
219169
<CTableBody>
220170
<CTableRow v-for="item in tableExample" :key="item.name">
221171
<CTableDataCell class="text-center">
222-
<CAvatar
223-
size="md"
224-
:src="item.avatar.src"
225-
:status="item.avatar.status"
226-
/>
172+
<CAvatar size="md" :src="item.avatar.src" :status="item.avatar.status" />
227173
</CTableDataCell>
228174
<CTableDataCell>
229175
<div>{{ item.user.name }}</div>
@@ -233,24 +179,16 @@
233179
</div>
234180
</CTableDataCell>
235181
<CTableDataCell class="text-center">
236-
<CIcon
237-
size="xl"
238-
:name="item.country.flag"
239-
:title="item.country.name"
240-
/>
182+
<CIcon size="xl" :name="item.country.flag" :title="item.country.name" />
241183
</CTableDataCell>
242184
<CTableDataCell>
243185
<div class="d-flex justify-content-between align-items-baseline">
244186
<div class="fw-semibold">{{ item.usage.value }}%</div>
245-
<div class="ms-1 text-nowrap small text-body-secondary">
187+
<div class="text-nowrap text-body-secondary small ms-3">
246188
{{ item.usage.period }}
247189
</div>
248190
</div>
249-
<CProgress
250-
thin
251-
:color="item.usage.color"
252-
:value="item.usage.value"
253-
/>
191+
<CProgress thin :color="item.usage.color" :value="item.usage.value" />
254192
</CTableDataCell>
255193
<CTableDataCell class="text-center">
256194
<CIcon size="xl" :name="item.payment.icon" />

0 commit comments

Comments
 (0)