Skip to content

Commit 5a23cd1

Browse files
woothuwoothu
committed
fix: minor refactors and fixes
1 parent d756323 commit 5a23cd1

File tree

11 files changed

+197
-388
lines changed

11 files changed

+197
-388
lines changed

‎src/containers/TheContainer.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<div class="c-body">
77
<main class="c-main">
88
<CContainer fluid>
9-
<transition name="fade">
10-
<router-view></router-view>
9+
<transition name="fade" mode="out-in">
10+
<router-view :key="$route.path"></router-view>
1111
</transition>
1212
</CContainer>
1313
</main>

‎src/views/base/ListGroups.vue

+12-56
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,5 @@
11
<template>
22
<div>
3-
<CRow>
4-
<CCol md="6">
5-
<CCard>
6-
<CCardHeader>
7-
<CIcon name="cil-justify-center"/>
8-
<strong> Bootstrap list group </strong>
9-
<div class="card-header-actions">
10-
<a
11-
href="https://coreui.io/vue/docs/components/list-group"
12-
class="card-header-action"
13-
rel="noreferrer noopener"
14-
target="_blank"
15-
>
16-
<small class="text-muted">docs</small>
17-
</a>
18-
</div>
19-
</CCardHeader>
20-
<CCardBody>
21-
<CListGroup>
22-
<CListGroupItem>Cras justo odio</CListGroupItem>
23-
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
24-
<CListGroupItem>Morbi leo risus</CListGroupItem>
25-
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
26-
<CListGroupItem>Vestibulum at eros</CListGroupItem>
27-
</CListGroup>
28-
</CCardBody>
29-
</CCard>
30-
</CCol>
31-
<CCol md="6">
32-
<CCard>
33-
<CCardHeader>
34-
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
35-
</CCardHeader>
36-
<CCardBody>
37-
<CListGroup>
38-
<CListGroupItem>Cras justo odio</CListGroupItem>
39-
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
40-
<CListGroupItem>Morbi leo risus</CListGroupItem>
41-
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
42-
<CListGroupItem>Vestibulum at eros</CListGroupItem>
43-
</CListGroup>
44-
</CCardBody>
45-
</CCard>
46-
</CCol>
47-
</CRow>
483
<CRow>
494
<CCol md="6">
505
<CCard>
@@ -58,6 +13,7 @@
5813
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
5914
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
6015
<CListGroupItem>Morbi leo risus</CListGroupItem>
16+
<CListGroupItemDivider/>
6117
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
6218
<CListGroupItem>Vestibulum at eros</CListGroupItem>
6319
</CListGroup>
@@ -160,19 +116,19 @@
160116
<CCardHeader>
161117
<CIcon name="cil-justify-center"/>
162118
<strong> List group </strong>
163-
<small>colors active</small>
119+
<small>colors active accent</small>
164120
</CCardHeader>
165121
<CCardBody>
166-
<CListGroup>
167-
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
168-
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
169-
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
170-
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
171-
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
172-
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
173-
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
174-
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
175-
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
122+
<CListGroup accent>
123+
<CListGroupItem href="#" accent="light">This is a default list group item</CListGroupItem>
124+
<CListGroupItem href="#" color="primary" accent="primary">This is a primary list group item</CListGroupItem>
125+
<CListGroupItem href="#" color="secondary" accent="secondary">This is a secondary list group item</CListGroupItem>
126+
<CListGroupItem href="#" color="success" accent="success">This is a success list group item</CListGroupItem>
127+
<CListGroupItem href="#" color="danger" accent="danger">This is a danger list group item</CListGroupItem>
128+
<CListGroupItem href="#" color="warning" accent="warning">This is a warning list group item</CListGroupItem>
129+
<CListGroupItem href="#" color="info" accent="info">This is a info list group item</CListGroupItem>
130+
<CListGroupItem href="#" color="light" accent="light">This is a light list group item</CListGroupItem>
131+
<CListGroupItem href="#" color="dark" accent="dark">This is a dark list group item</CListGroupItem>
176132
</CListGroup>
177133
</CCardBody>
178134
</CCard>

‎src/views/base/Navs.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,8 @@
143143
</CCardHeader>
144144
<CCardBody>
145145
<CRow>
146-
<CCol col="3" class="m-0">
147-
<CNav vertical pills >
146+
<CCol col="12" class="m-0">
147+
<CNav vertical="lg" pills >
148148
<CNavItem active>Active</CNavItem>
149149
<CNavItem>Link</CNavItem>
150150
<CNavItem>Another Link</CNavItem>

‎src/views/base/ProgressBars.vue

+26-24
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
<CCardBody>
1919
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
2020
<CProgress class="mt-1" :max="max" show-value>
21-
<CProgressBar :value="counter*(6/10)" color="success"/>
22-
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
23-
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
21+
<CProgressBar :value="counter*(6/10)" color="gradient-success"/>
22+
<CProgressBar :value="counter*(2.5/10)" color="gradient-warning"/>
23+
<CProgressBar :value="counter*(1.5/10)" color="gradient-danger"/>
2424
</CProgress>
2525
<CButton
2626
@click="clicked"
@@ -73,9 +73,11 @@
7373
<h6>Default height</h6>
7474
<CProgress :value="value3" show-percentage class="mb-3"/>
7575
<h6>Custom heights</h6>
76-
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
77-
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
78-
<CProgress height="2px" :value="value3"/>
76+
<CProgress size="xs" :value="value3" show-percentage class="mb-2"/>
77+
<CProgress size="sm" :value="value3" show-percentage class="mb-2"/>
78+
<CProgress style="height:2rem" :value="value3" show-percentage class="mb-2"/>
79+
<CProgress style="height:20px" :value="value3" show-percentage class="mb-2"/>
80+
<CProgress style="height:2px" :value="value3"/>
7981
</CCardBody>
8082
</CCard>
8183
<CCard>
@@ -180,24 +182,24 @@
180182
</CCardHeader>
181183
<CCardBody>
182184
<CProgress :max="max3" class="mb-3">
183-
<CProgressBar color="primary" :value="values[0]"/>
184-
<CProgressBar color="success" :value="values[1]"/>
185-
<CProgressBar color="info" :value="values[2]"/>
185+
<CProgressBar color="gradient-primary" :value="values[0]"/>
186+
<CProgressBar color="gradient-success" :value="values[1]"/>
187+
<CProgressBar color="gradient-info" :value="values[2]"/>
186188
</CProgress>
187189
<CProgress show-percentage :max="max3" class="mb-3">
188-
<CProgressBar color="primary" :value="values[0]"/>
189-
<CProgressBar color="success" :value="values[1]"/>
190-
<CProgressBar color="info" :value="values[2]"/>
190+
<CProgressBar color="gradient-primary" :value="values[0]"/>
191+
<CProgressBar color="gradient-success" :value="values[1]"/>
192+
<CProgressBar color="gradient-info" :value="values[2]"/>
191193
</CProgress>
192194
<CProgress show-value striped :max="max3" class="mb-3">
193-
<CProgressBar color="primary" :value="values[0]"/>
194-
<CProgressBar color="success" :value="values[1]"/>
195-
<CProgressBar color="info" :value="values[2]"/>
195+
<CProgressBar color="gradient-primary" :value="values[0]"/>
196+
<CProgressBar color="gradient-success" :value="values[1]"/>
197+
<CProgressBar color="gradient-info" :value="values[2]"/>
196198
</CProgress>
197199
<CProgress :max="max3" class="mb-3">
198-
<CProgressBar color="primary" :value="values[0]" show-percentage/>
200+
<CProgressBar color="gradient-primary" :value="values[0]" show-percentage/>
199201
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
200-
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
202+
<CProgressBar color="gradient-info" :value="values[2]" striped show-percentage/>
201203
</CProgress>
202204
</CCardBody>
203205
</CCard>
@@ -215,13 +217,13 @@ export default {
215217
value: 33.333333333,
216218
value3: 75,
217219
bars: [
218-
{color: 'success', value: 75},
219-
{color: 'info', value: 75},
220-
{color: 'warning', value: 75},
221-
{color: 'danger', value: 75},
222-
{color: 'primary', value: 75},
223-
{color: 'secondary', value: 75},
224-
{color: 'dark', value: 75}
220+
{color: 'gradient-success', value: 75},
221+
{color: 'gradient-info', value: 75},
222+
{color: 'gradient-warning', value: 75},
223+
{color: 'gradient-danger', value: 75},
224+
{color: 'gradient-primary', value: 75},
225+
{color: 'gradient-secondary', value: 75},
226+
{color: 'gradient-dark', value: 75}
225227
],
226228
timer: null,
227229
striped: true,

0 commit comments

Comments
 (0)