fix: minor refactors and fixes

This commit is contained in:
woothu
2020-07-10 12:20:05 +02:00
parent d756323b91
commit 5a23cd1890
11 changed files with 197 additions and 388 deletions
+2 -2
View File
@@ -6,8 +6,8 @@
<div class="c-body">
<main class="c-main">
<CContainer fluid>
<transition name="fade">
<router-view></router-view>
<transition name="fade" mode="out-in">
<router-view :key="$route.path"></router-view>
</transition>
</CContainer>
</main>
+12 -56
View File
@@ -1,50 +1,5 @@
<template>
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/components/list-group"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
@@ -58,6 +13,7 @@
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItemDivider/>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
@@ -160,19 +116,19 @@
<CCardHeader>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>colors active</small>
<small>colors active accent</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
<CListGroup accent>
<CListGroupItem href="#" accent="light">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" color="primary" accent="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" color="secondary" accent="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" color="success" accent="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" color="danger" accent="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" color="warning" accent="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" color="info" accent="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" color="light" accent="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" color="dark" accent="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
+2 -2
View File
@@ -143,8 +143,8 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="m-0">
<CNav vertical pills >
<CCol col="12" class="m-0">
<CNav vertical="lg" pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
+26 -24
View File
@@ -18,9 +18,9 @@
<CCardBody>
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" color="success"/>
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
<CProgressBar :value="counter*(6/10)" color="gradient-success"/>
<CProgressBar :value="counter*(2.5/10)" color="gradient-warning"/>
<CProgressBar :value="counter*(1.5/10)" color="gradient-danger"/>
</CProgress>
<CButton
@click="clicked"
@@ -73,9 +73,11 @@
<h6>Default height</h6>
<CProgress :value="value3" show-percentage class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
<CProgress height="2px" :value="value3"/>
<CProgress size="xs" :value="value3" show-percentage class="mb-2"/>
<CProgress size="sm" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:2rem" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:20px" :value="value3" show-percentage class="mb-2"/>
<CProgress style="height:2px" :value="value3"/>
</CCardBody>
</CCard>
<CCard>
@@ -180,24 +182,24 @@
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress show-percentage :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
<CProgressBar color="gradient-primary" :value="values[0]"/>
<CProgressBar color="gradient-success" :value="values[1]"/>
<CProgressBar color="gradient-info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar color="primary" :value="values[0]" show-percentage/>
<CProgressBar color="gradient-primary" :value="values[0]" show-percentage/>
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
<CProgressBar color="gradient-info" :value="values[2]" striped show-percentage/>
</CProgress>
</CCardBody>
</CCard>
@@ -215,13 +217,13 @@ export default {
value: 33.333333333,
value3: 75,
bars: [
{color: 'success', value: 75},
{color: 'info', value: 75},
{color: 'warning', value: 75},
{color: 'danger', value: 75},
{color: 'primary', value: 75},
{color: 'secondary', value: 75},
{color: 'dark', value: 75}
{color: 'gradient-success', value: 75},
{color: 'gradient-info', value: 75},
{color: 'gradient-warning', value: 75},
{color: 'gradient-danger', value: 75},
{color: 'gradient-primary', value: 75},
{color: 'gradient-secondary', value: 75},
{color: 'gradient-dark', value: 75}
],
timer: null,
striped: true,
+47 -46
View File
@@ -17,7 +17,7 @@
</div>
<div>Lorem ipsum...</div>
<CProgress
color="success"
color="gradient-success"
:value="25"
class="progress-xs my-3 mb-0"
/>
@@ -28,7 +28,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="info"
color="gradient-info"
:value="25"
/>
</CCol>
@@ -37,7 +37,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="warning"
color="gradient-warning"
:value="25"
/>
</CCol>
@@ -46,7 +46,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="danger"
color="gradient-danger"
:value="25"
/>
</CCol>
@@ -57,7 +57,7 @@
header="89.9%"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="success"
color="gradient-success"
inverse :value="25"
/>
</CCol>
@@ -66,7 +66,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="info"
color="gradient-info"
inverse
:value="25"
/>
@@ -76,7 +76,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="warning"
color="gradient-warning"
inverse
:value="25"
/>
@@ -86,7 +86,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="danger"
color="gradient-danger"
inverse
:value="25"
/>
@@ -97,7 +97,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
color="gradient-primary"
>
<CIcon name="cil-settings" width="24"/>
</CWidgetIcon>
@@ -106,7 +106,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
color="gradient-info"
>
<CIcon name="cil-laptop" width="24"/>
</CWidgetIcon>
@@ -115,7 +115,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
color="gradient-warning"
>
<CIcon name="cil-moon" width="24"/>
</CWidgetIcon>
@@ -124,7 +124,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="danger"
color="gradient-danger"
>
<CIcon name="cil-bell" width="24"/>
</CWidgetIcon>
@@ -135,7 +135,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
color="gradient-primary"
:icon-padding="false"
>
<CIcon name="cil-settings" width="24"/>
@@ -145,7 +145,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
color="gradient-info"
:icon-padding="false"
>
<CIcon name="cil-laptop" width="24"/>
@@ -155,7 +155,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
color="gradient-warning"
:icon-padding="false"
>
<CIcon name="cil-moon" width="24"/>
@@ -165,7 +165,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="danger"
color="gradient-danger"
:icon-padding="false"
>
<CIcon name="cil-bell" width="24"/>
@@ -177,7 +177,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
color="gradient-primary"
:icon-padding="false"
>
<CIcon name="cil-settings" class="mx-5 " width="24"/>
@@ -187,7 +187,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
color="gradient-info"
:icon-padding="false"
>
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
@@ -197,18 +197,19 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
color="gradient-warning"
:icon-padding="false"
>
<CIcon name="cil-moon" class="mx-5 " width="24"/>
<template #footer>
<CCardFooter class="card-footer px-3 py-2">
<CCardFooter class="px-3 py-2">
<CLink
class="font-weight-bold font-xs btn-block text-muted"
class="font-weight-bold font-xs text-muted d-flex justify-content-between"
href="https://coreui.io/"
target="_blank"
>
View more
<CIcon name="cil-arrowRight" class="float-right" width="16"/>
<CIcon name="cil-arrow-right" width="16"/>
</CLink>
</CCardFooter>
</template>
@@ -220,7 +221,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
color="gradient-primary"
:icon-padding="false"
link="#"
>
@@ -231,7 +232,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
color="gradient-info"
:icon-padding="false"
link="#"
>
@@ -242,7 +243,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
color="gradient-warning"
:icon-padding="false"
link="#"
>
@@ -256,21 +257,21 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
color="gradient-info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
color="gradient-success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
color="gradient-warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
@@ -283,7 +284,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
color="gradient-danger"
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
@@ -292,7 +293,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
color="gradient-info"
inverse
>
<CIcon name="cil-people" height="36"/>
@@ -300,7 +301,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
color="gradient-success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
@@ -308,7 +309,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
color="gradient-warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
@@ -316,7 +317,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
color="gradient-primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
@@ -324,7 +325,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
color="gradient-danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
@@ -335,7 +336,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
color="gradient-info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
@@ -344,7 +345,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
color="gradient-success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
@@ -353,7 +354,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
color="gradient-warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
@@ -362,7 +363,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
color="gradient-primary"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
@@ -371,7 +372,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
color="gradient-danger"
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
@@ -380,7 +381,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
color="gradient-info"
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
@@ -391,7 +392,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
color="gradient-info"
inverse
>
<CIcon name="cil-people" height="36"/>
@@ -401,7 +402,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
color="gradient-success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
@@ -411,7 +412,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
color="gradient-warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
@@ -421,7 +422,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
color="gradient-primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
@@ -431,7 +432,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
color="gradient-danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
@@ -441,7 +442,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
color="gradient-info"
inverse
>
<CIcon name="cil-speech" height="36"/>