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

feat: change styles of dashboard, widgets and charts to version 3

Browse Source
This commit is contained in:
woothu
2019-05-16 19:31:28 +02:00
parent 33297d394d
commit 659473b931
4 changed files with 534 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/widgets/Widgets.vue
+243 -67
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="6" lg="3">
<CWidgetProgress
@@ -10,7 +10,7 @@
<CProgress
variant="success"
:value="25"
class="progress-xs my-3 mb-0"
class="c-progress-xs c-my-3 c-mb-0"
/>
</CWidgetProgress>
</CCol>
@@ -24,30 +24,63 @@
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" :value="25"/>
<CWidgetProgress
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
:value="25"
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/>
<CWidgetProgress
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
:value="25"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="6" lg="3">
<CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="success" inverse :value="25"/>
<CWidgetProgress
header="89.9%"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="success"
inverse :value="25"
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" inverse :value="25"/>
<CWidgetProgress
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
inverse
:value="25"
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" inverse :value="25"/>
<CWidgetProgress
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
inverse
:value="25"
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" inverse :value="25"/>
<CWidgetProgress
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
inverse
:value="25"
/>
</CCol>
</CRow>
<CRow>
@@ -55,27 +88,27 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary"
addIconClasses="fa fa-cogs c-bg-primary"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-laptop bg-info"
addIconClasses="fa fa-laptop c-bg-info"
text="Income"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning"
addIconClasses="fa fa-moon-o c-bg-warning"
text="Income"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-bell bg-danger"
addIconClasses="fa fa-bell c-bg-danger"
text="Income"
/>
</CCol>
@@ -84,7 +117,7 @@
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-cogs bg-primary"
addIconClasses="fa fa-cogs c-bg-primary"
text="Income"
link="#"
/>
@@ -92,7 +125,7 @@
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-laptop bg-info"
addIconClasses="fa fa-laptop c-bg-info"
text="Income"
link="#"
/>
@@ -100,14 +133,14 @@
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning bg-primary"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
text="Income" link="#"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-bell bg-danger"
addIconClasses="fa fa-bell c-bg-danger"
text="Income"
link="#"
/>
@@ -118,7 +151,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary"
addIconClasses="fa fa-cogs c-bg-primary"
noPadding
/>
</CCol>
@@ -126,7 +159,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info"
addIconClasses="fa fa-laptop c-bg-info"
noPadding
/>
</CCol>
@@ -134,7 +167,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
noPadding
/>
</CCol>
@@ -142,7 +175,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-bell bg-danger"
addIconClasses="fa fa-bell c-bg-danger"
noPadding
/>
</CCol>
@@ -152,7 +185,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary px-5"
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
noPadding
/>
</CCol>
@@ -160,7 +193,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info px-5"
addIconClasses="fa fa-laptop c-bg-info c-px-5"
noPadding
/>
</CCol>
@@ -168,7 +201,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
noPadding
/>
</CCol>
@@ -178,7 +211,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary px-5"
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
noPadding
link="#"
/>
@@ -187,7 +220,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info px-5"
addIconClasses="fa fa-laptop c-bg-info c-px-5"
noPadding
link="#"
/>
@@ -196,7 +229,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
noPadding
link="#"
/>
@@ -204,84 +237,227 @@
</CRow>
<WidgetsSocial noCharts/>
<WidgetsSocial/>
<CCardGroup class="mb-4">
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
<CCardGroup class="c-mb-4">
<CWidgetProgressIcon
iconClasses="icon-people"
header="87.500"
text="Visitors"
variant="info"
/>
<CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385"
text="New Clients"
variant="success"
/>
<CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238"
text="Products sold"
variant="warning"
/>
<CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%"
text="Returning Visitors"
/>
<CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11"
text="Avg. Time"
variant="danger"
/>
</CCardGroup>
<CCardGroup class="mb-4">
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
<CCardGroup class="c-mb-4">
<CWidgetProgressIcon
iconClasses="icon-people"
header="87.500"
text="Visitors"
variant="info"
inverse
/>
<CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385"
text="New Clients"
variant="success"
inverse
/>
<CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238"
text="Products sold"
variant="warning"
inverse
/>
<CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%"
variant="primary"
text="Returning Visitors"
inverse
/>
<CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11"
text="Avg. Time"
variant="danger"
inverse
/>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
<CWidgetProgressIcon
iconClasses="icon-people"
header="87.500"
text="visitors"
variant="info"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385"
text="New Clients"
variant="success"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238"
text="Products sold"
variant="warning"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%"
text="Returning Visitors"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
<CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11"
text="Avg. Time"
>
<CProgress
variant="danger"
:value="25"
class="c-progress-xs c-my-3 c-mb-0"
/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
<CWidgetProgressIcon
iconClasses="icon-speech"
header="972"
text="Comments"
variant="info"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
<CWidgetProgressIcon
iconClasses="icon-people"
header="87.500"
text="visitors"
variant="info"
inverse
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
<CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385"
text="New Clients"
variant="success"
inverse
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
<CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238" text="Products sold"
variant="warning"
inverse
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
<CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%"
text="Returning Visitors"
variant="primary"
inverse
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
<CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11" text="Avg. Time"
variant="danger"
inverse
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
<CWidgetProgressIcon
iconClasses="icon-speech"
header="972"
text="Comments"
variant="info"
inverse
/>
</CCol>
</CRow>
<WidgetsDropdown/>
<CRow>
<CCol sm="6" lg="3">
<CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CWidgetSmallText
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CWidgetSmallText
variant="success"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CWidgetSmallText
variant="danger"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CWidgetSmallText
variant="warning"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
@@ -289,32 +465,32 @@
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="success"/>
</CWidgetSimple>
</CCol>