sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: update base views

Browse Source
This commit is contained in:
woothu
2019-11-13 10:34:15 +01:00
parent bc822612da
commit 70058e8c29
11 changed files with 466 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheHeaderDropdownAccnt.vue
+1 -1
View File
@@ -78,6 +78,6 @@ export default {
<style scoped>
.c-icon {
margin-right: 0.5rem;
margin-right: 0.3rem;
}
</style>
src/views/Dashboard.vue
+6 -1
View File
@@ -85,7 +85,11 @@
<WidgetsBrand/>
<CRow>
<CCol md="12">
<CCard header-html="Traffic &amp; Sales" body-wrapper>
<CCard>
<CCardHeader>
Traffic &amp; Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12" lg="6">
<CRow>
@@ -442,6 +446,7 @@
<strong>{{item.activity}}</strong>
</td>
</CDataTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Cards.vue
+58 -51
View File
@@ -22,7 +22,10 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
<CCard>
<CCardFooter>Card Footer</CCardFooter>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
@@ -74,80 +77,84 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard
header="Card outline primary"
border-color="primary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
border-color="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
border-color="success"
body-wrapper
>
{{loremIpsum}}
<CCard border-color="primary">
<CCardHeader>Card outline primary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline info" border-color="info" body-wrapper>
{{loremIpsum}}
<CCard border-color="secondary">
<CCardHeader>Card outline secondary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
{{loremIpsum}}
<CCard border-color="success">
<CCardHeader>Card outline success</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
{{loremIpsum}}
<CCard border-color="info">
<CCardHeader>Card outline info</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="warning">
<CCardHeader>Card outline warning</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="danger">
<CCardHeader>Card outline danger</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="primary">
<CCardHeader>Card with primary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="secondary">
<CCardHeader>Card with secondary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="success">
<CCardHeader>Card with success accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="info">
<CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="info">
<CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
{{loremIpsum}}
<CCard accent-color="danger">
<CCardHeader>Card with danger accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="bg-primary text-center" body-wrapper>
<CCard color="primary" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -157,7 +164,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-success text-center" body-wrapper>
<CCard color="success" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -167,7 +174,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-info text-center" body-wrapper>
<CCard color="info" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -177,7 +184,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-warning text-center" body-wrapper>
<CCard color="warning" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -187,7 +194,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-danger text-center" body-wrapper>
<CCard color="danger" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -197,7 +204,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-secondary text-center" body-wrapper>
<CCard color="secondary" class="text-center" body-wrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -209,33 +216,33 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-primary" body-wrapper>
<CCard color="primary" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-success" body-wrapper>
<CCard color="success" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-info" body-wrapper>
<CCard color="info" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-warning" body-wrapper>
<CCard color="warning" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-danger" body-wrapper>
<CCard color="danger" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="bg-secondary" v-if="show">
<CCard v-if="show" color="secondary">
<CCardHeader>
Card with header actions
<div class="card-header-actions">
src/views/base/Collapses.vue
+1 -1
View File
@@ -22,7 +22,7 @@
</CButton>
<CCollapse :show="collapse" class="mt-2">
<CCard body-wrapper>
<p class="card-text">Collapse contents Here</p>
<CCardText>Collapse contents Here</CCardText>
<CButton
@click="innerCollapse = !innerCollapse"
size="sm"
src/views/base/ListGroups.vue
+10 -4
View File
@@ -188,20 +188,26 @@
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>">
<CCard>
<CCardHeader>
<b>Card with list group</b>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
<CCardText class="mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</CCardText>
</CCardBody>
</CCard>
<CCard header="<b>Card with flush list group</b>">
<CCard>
<CCardHeader><b>Card with flush list group</b></CCardHeader>
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
src/views/base/Table.vue
+1
View File
@@ -15,6 +15,7 @@
:items-per-page="small ? 10 : 5"
:dark="dark"
pagination
items-per-page-select
>
<template #status="{item}">
<td>
src/views/base/Tabs.vue
+6 -6
View File
@@ -18,21 +18,21 @@
</CCardHeader>
<CCardBody>
<CTabs>
<CTab title-html="Home" active>
<CTab title="Home" active>
1. 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.
</CTab>
<CTab title-html="Profile">
<CTab title="Profile">
2. 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.
</CTab>
<CTab title-html="Disabled" disabled>
<CTab title="Disabled" disabled>
3. 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
@@ -50,21 +50,21 @@
</CCardHeader>
<CCardBody>
<CTabs variant="pills">
<CTab title-html="Home" active>
<CTab title="Home" active>
1. 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.
</CTab>
<CTab title-html="Profile">
<CTab title="Profile">
2. 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.
</CTab>
<CTab title-html="Disabled" disabled>
<CTab title="Disabled" disabled>
3. 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
src/views/charts/Charts.vue
+25 -15
View File
@@ -19,29 +19,39 @@
<CChartLineExample/>
</CCardBody>
</CCard>
<CCard header-html="Bar Chart" body-wrapper>
<CChartBarExample/>
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard>
<CCard header-html="Doughnut Chart" body-wrapper>
<CChartDoughnutExample/>
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard>
<CCard header-html="Radar Chart" body-wrapper>
<CChartRadarExample/>
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard>
<CCard header-html="Pie Chart" body-wrapper>
<CChartPieExample/>
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard>
<CCard header-html="Polar Area Chart" body-wrapper>
<CChartPolarAreaExample/>
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard>
<CCard header-html="Simple line chart" body-wrapper>
<CCard>
<CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard>
<CCard header-html="Simple pointed chart" body-wrapper>
<CChartLineSimple pointed border-color="warning"/>
<CCard>
<CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
</CCard>
<CCard header-html="Simple bar chart" body-wrapper>
<CChartBarSimple background-color="danger"/>
<CCard>
<CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard>
</CCardGroup>
</div>
src/views/pages/Login.vue
+3 -1
View File
@@ -33,7 +33,9 @@
</CCardBody>
</CCard>
<CCard
class="text-white text-center bg-primary py-5 d-md-down-none"
color="primary"
text-color="white"
class="text-center py-5 d-md-down-none"
style="width:44%"
body-wrapper
>
src/views/users/Users.vue
+6 -1
View File
@@ -2,7 +2,11 @@
<CRow>
<CCol col="12" xl="8">
<transition name="slide">
<CCard header-html="Users" body-wrapper>
<CCard>
<CCardHeader>
Users
</CCardHeader>
<CCardBody>
<CDataTable
hover
striped
@@ -28,6 +32,7 @@
</td>
</template>
</CDataTable>
</CCardBody>
</CCard>
</transition>
</CCol>
src/views/widgets/Widgets.vue
-50
View File
@@ -453,56 +453,6 @@
</CCol>
</CRow>
<WidgetsDropdown/>
<CRow>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="primary"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="success"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">