sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: small fixes

Browse Source
This commit is contained in:
woothu
2019-04-01 12:09:38 +02:00
parent e6b7e32e9b
commit 4b8fdbf142
6 changed files with 254 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+5 -5
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<Widgets06/> <WidgetsDropdown/>
<CCard> <CCard>
<CCardBody> <CCardBody>
<CRow> <CRow>
@@ -334,8 +334,8 @@
<script> <script>
import MainChartExample from './dashboard/MainChartExample' import MainChartExample from './dashboard/MainChartExample'
import Widgets06 from './widgets/Widgets06' import WidgetsDropdown from './widgets/WidgetsDropdown'
import Widgets04 from './widgets/Widgets04' import WidgetsSocial from './widgets/WidgetsSocial'
import SocialBoxChartExample from './dashboard/SocialBoxChartExample' import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
import CalloutChartExample from './dashboard/CalloutChartExample' import CalloutChartExample from './dashboard/CalloutChartExample'
@@ -345,8 +345,8 @@ export default {
MainChartExample, MainChartExample,
SocialBoxChartExample, SocialBoxChartExample,
CalloutChartExample, CalloutChartExample,
Widgets06, WidgetsDropdown,
Widgets04 WidgetsSocial
}, },
data: function () { data: function () {
return { return {
src/views/base/Cards.vue
+2 -2
View File
@@ -9,7 +9,7 @@
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard
header="<i class='fa fa-check'></i> Card with icon" headerHtml="<i class='fa fa-check'></i> Card with icon"
:bodyHtml="loremIpsum" :bodyHtml="loremIpsum"
/> />
</CCol> </CCol>
@@ -116,7 +116,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-warning" header="Card with warning accent"> <CCard class="card-accent-warning" header="Card with warning accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
src/views/base/Navbars.vue
+25 -12
View File
@@ -41,12 +41,15 @@
</div> --> </div> -->
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar toggleable="md" type="dark" variant="info"> <CNavbar
toggleable="md"
type="dark"
variant="info"
sticky
>
<CNavbarToggle @click="show=!show"/> <CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand> <CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" <CCollapse :show="show" navbar>
navbar
>
<CNavbarNav> <CNavbarNav>
<CNavItem href="#">Link</CNavItem> <CNavItem href="#">Link</CNavItem>
<CNavItem href="#" disabled>Disabled</CNavItem> <CNavItem href="#" disabled>Disabled</CNavItem>
@@ -63,9 +66,10 @@
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton> <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm> </CForm>
<CDropdown buttonContent="Lang" <CDropdown
nav buttonHtml="Lang"
placement="bottom-end" nav
placement="bottom-end"
> >
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
@@ -73,9 +77,10 @@
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown nav <CDropdown
buttonContent="<em>User</em>" nav
placement="bottom-end" buttonHtml="<em>User</em>"
placement="bottom-end"
> >
<CDropdownItem>Profile</CDropdownItem> <CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem> <CDropdownItem>Signout</CDropdownItem>
@@ -130,13 +135,21 @@
<CNavItem href="#">Home</CNavItem> <CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem> <CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns --> <!-- Navbar dropdowns -->
<CDropdown buttonContent="Lang" right nav> <CDropdown
buttonHtml="Lang"
right
nav
>
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem> <CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown buttonContent="User" right nav> <CDropdown
buttonHtml="User"
right
nav
>
<CDropdownItem>Account</CDropdownItem> <CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Settings</CDropdownItem>
</CDropdown> </CDropdown>
src/views/widgets/Widgets.vue
+198 -87
View File
@@ -2,236 +2,347 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."> <CWidgetProgress
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/> header="89.9%"
</CWidget01> text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
>
<CProgress
variant="success"
:value="25"
class="progress-xs my-3 mb-0"
/>
</CWidgetProgress>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress
variant="info" :value="25"/> header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
:value="25"
/>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" :value="25"/> variant="warning" :value="25"/>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/> variant="danger" :value="25"/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="success" inverse :value="25"/> variant="success" inverse :value="25"/>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" inverse :value="25"/> variant="info" inverse :value="25"/>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" inverse :value="25"/> variant="warning" inverse :value="25"/>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" inverse :value="25"/> variant="danger" inverse :value="25"/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-laptop bg-info"
text="Income"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning"
text="Income"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-bell bg-danger"
text="Income"
/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-cogs bg-primary"
text="Income"
link="#"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-laptop bg-info"
text="Income"
link="#"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning bg-primary"
text="Income" link="#"
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/> <CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-bell bg-danger"
text="Income"
link="#"
/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary"
noPadding
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info"
noPadding
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary"
noPadding
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-bell bg-danger"
noPadding
/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<CRow> <CRow>
<CCol cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary px-5"
noPadding
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info px-5"
noPadding
/>
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/> <CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
noPadding
/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow><!--/.row-->
<Widgets04 noCharts/> <CRow>
<Widgets04/> <CCol cols="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-cogs bg-primary px-5"
noPadding
link="#"
/>
</CCol>
<CCol cols="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-laptop bg-info px-5"
noPadding
link="#"
/>
</CCol>
<CCol cols="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
noPadding
link="#"
/>
</CCol>
</CRow><!--/.row-->
<WidgetsSocial noCharts/>
<WidgetsSocial/>
<CCardGroup class="mb-4"> <CCardGroup class="mb-4">
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/> <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/> <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/> <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/> <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</CCardGroup> </CCardGroup>
<CCardGroup class="mb-4"> <CCardGroup class="mb-4">
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/> <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
<CWidget05 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/>
<CWidget05 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/>
<CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/> <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
<CWidget05 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/>
</CCardGroup> </CCardGroup>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/> <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" > <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/> <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
</CWidget05> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/> <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 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>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/> <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
</CCol> </CCol>
</CRow> </CRow>
<Widgets06/> <WidgetsDropdown/>
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget07 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%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" <CSimpleBarChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]" :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales" label="Sales"
/> />
</CWidget07> </CWidgetSmallText>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget07 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%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07> </CWidgetSmallText>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget07 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%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07> </CWidgetSmallText>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget07 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%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07> </CWidgetSmallText>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:40px" chartId="CWidgetSimple_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/> label='Sales' borderColor='danger'/>
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/> label='Sales' borderColor='primary'/>
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" <CSimpleLineChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]" :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales" label="Sales"
borderColor="success" borderColor="success"
/> />
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/> label='Sales' color='danger'/>
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='primary'/> label='Sales' color='primary'/>
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'> <CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='success'/> label='Sales' color='success'/>
</CWidget08> </CWidgetSimple>
</CCol> </CCol>
</CRow> </CRow>
</div> </div>
</template> </template>
<script> <script>
import Widgets04 from './Widgets04' import WidgetsSocial from './WidgetsSocial'
import Widgets06 from './Widgets06' import WidgetsDropdown from './WidgetsDropdown'
export default { export default {
name: 'Widgets', name: 'Widgets',
components: { components: {
Widgets04, WidgetsSocial,
Widgets06 WidgetsDropdown
} }
} }
</script> </script>
src/views/widgets/Widgets06.vue → src/views/widgets/WidgetsDropdown.vue
+11 -11
View File
@@ -1,7 +1,7 @@
<template> <template>
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 header="9.823" text="Members online"> <CWidgetDropdown header="9.823" text="Members online">
<template #dropdown> <template #dropdown>
<CDropdown <CDropdown
class="float-right" class="float-right"
@@ -23,10 +23,10 @@
label="Members" label="Members"
pointHoverColor="primary" pointHoverColor="primary"
/> />
</CWidget06> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 variant="info" header="9.823" text="Members online"> <CWidgetDropdown variant="info" header="9.823" text="Members online">
<template #dropdown> <template #dropdown>
<CDropdown <CDropdown
class="float-right" class="float-right"
@@ -50,10 +50,10 @@
:options="{ elements: { line: { tension: 0.00001 }}}" :options="{ elements: { line: { tension: 0.00001 }}}"
pointHoverColor="info" pointHoverColor="info"
/> />
</CWidget06> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 <CWidgetDropdown
variant="warning" variant="warning"
header="9.823" header="9.823"
text="Members online" text="Members online"
@@ -74,7 +74,7 @@
</template> </template>
<CSimpleLineChart <CSimpleLineChart
chartId="CWidget06_3" chartId="CWidgetDropdown_3"
:data="[78, 81, 80, 45, 34, 12, 40]" :data="[78, 81, 80, 45, 34, 12, 40]"
:labels="months" :labels="months"
style="height:70px" style="height:70px"
@@ -83,10 +83,10 @@
:options="{elements: {line: {borderWidth: 2.5}}}" :options="{elements: {line: {borderWidth: 2.5}}}"
pointHoverColor="warning" pointHoverColor="warning"
/> />
</CWidget06> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidget06 <CWidgetDropdown
variant="danger" variant="danger"
header="9.823" header="9.823"
text="Members online" text="Members online"
@@ -107,20 +107,20 @@
</template> </template>
<CSimpleBarChart <CSimpleBarChart
chartId="CWidget06_4" chartId="CWidgetDropdown_4"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]" :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Members" label="Members"
color="rgb(250, 152, 152)" color="rgb(250, 152, 152)"
style="height:70px" style="height:70px"
/> />
</CWidget06> </CWidgetDropdown>
</CCol> </CCol>
</CRow> </CRow>
</template> </template>
<script> <script>
export default { export default {
name: 'Widgets06', name: 'WidgetsDropdown',
data () { data () {
return { return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July'] months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
src/views/widgets/Widgets04.vue → src/views/widgets/WidgetsSocial.vue
+13 -13
View File
@@ -2,7 +2,7 @@
<CRow> <CRow>
<template v-if="!props.noCharts"> <template v-if="!props.noCharts">
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="facebook" variant="facebook"
rightHeader="89k" rightHeader="89k"
rightFooter="friends" rightFooter="friends"
@@ -17,10 +17,10 @@
style="height:100px" style="height:100px"
color="rgba(255,255,255,.1)" color="rgba(255,255,255,.1)"
/> />
</CWidget04> </CWidgetSocial>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="twitter" variant="twitter"
rightHeader="973k" rightHeader="973k"
rightFooter="followers" rightFooter="followers"
@@ -35,10 +35,10 @@
style="height:100px" style="height:100px"
color="rgba(255,255,255,.1)" color="rgba(255,255,255,.1)"
/> />
</CWidget04> </CWidgetSocial>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="linkedin" variant="linkedin"
rightHeader="500+" rightHeader="500+"
rightFooter="contracts" rightFooter="contracts"
@@ -53,10 +53,10 @@
style="height:100px" style="height:100px"
color="rgba(255,255,255,.1)" color="rgba(255,255,255,.1)"
/> />
</CWidget04> </CWidgetSocial>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="google-plus" variant="google-plus"
rightHeader="894" rightHeader="894"
rightFooter="followers" rightFooter="followers"
@@ -71,12 +71,12 @@
style="height:100px" style="height:100px"
color="rgba(255,255,255,.1)" color="rgba(255,255,255,.1)"
/> />
</CWidget04> </CWidgetSocial>
</CCol> </CCol>
</template> </template>
<template v-else> <template v-else>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="facebook" variant="facebook"
rightHeader="89k" rightHeader="89k"
rightFooter="friends" rightFooter="friends"
@@ -85,7 +85,7 @@
/> />
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="twitter" variant="twitter"
rightHeader="973k" rightHeader="973k"
rightFooter="followers" rightFooter="followers"
@@ -94,7 +94,7 @@
/> />
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="linkedin" variant="linkedin"
rightHeader="500+" rightHeader="500+"
rightFooter="contracts" rightFooter="contracts"
@@ -103,7 +103,7 @@
/> />
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidget04 <CWidgetSocial
variant="warning" variant="warning"
iconClasses="fa fa-battery-1" iconClasses="fa fa-battery-1"
rightHeader="0:57" rightHeader="0:57"
@@ -118,7 +118,7 @@
<script> <script>
export default { export default {
name: 'Widgets04', name: 'WidgetsSocial',
props: { props: {
noCharts: Boolean noCharts: Boolean
} }