sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 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/views/Dashboard.vue
+315 -310
View File
@@ -85,363 +85,368 @@
<WidgetsBrand/>
<CRow>
<CCol md="12">
<CCard header-html="Traffic &amp; Sales" body-wrapper>
<CRow>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Monday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
color="info"
:value="34"
/>
<CProgress
class="progress-xs"
color="danger"
:value="78"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Tuesday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="56"
color="info"
/>
<CProgress
class="progress-xs"
:value="94"
color="danger"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Wednesday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="12"
color="info"
/>
<CProgress
class="progress-xs"
:value="67"
color="danger"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Thursday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="43"
color="info"
/>
<CProgress
class="progress-xs"
:value="91"
color="danger"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Friday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="22"
color="info"
/>
<CProgress
class="progress-xs"
:value="73"
color="danger"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Saturday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="53"
color="info"
/>
<CProgress
class="progress-xs"
:value="82"
color="danger"
/>
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Sunday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="9"
color="info"
/>
<CProgress
class="progress-xs"
:value="69"
color="danger"
/>
</div>
</div>
<div class="legend text-center">
<small>
<sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="user" class="progress-group-icon"/>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
<CCard>
<CCardHeader>
Traffic &amp; Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Monday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="43"
color="warning"
color="info"
:value="34"
/>
</div>
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<CIcon name="user-female" class="progress-group-icon"/>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="37"
color="warning"
color="danger"
:value="78"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="globe-alt" class="progress-group-icon"/>
<span class="title">Organic Search</span>
<span class="ml-auto font-weight-bold">
191,235<span class="text-muted small">(56%)</span>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Tuesday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="56"
color="success"
color="info"
/>
<CProgress
class="progress-xs"
:value="94"
color="danger"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="facebook"
height="17"
class="progress-group-icon"
/>
<span class="title">Facebook</span>
<span class="ml-auto font-weight-bold">
51,223 <span class="text-muted small">(15%)</span>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Wednesday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="15"
color="success"
:value="12"
color="info"
/>
<CProgress
class="progress-xs"
:value="67"
color="danger"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="twitter"
height="17"
class="progress-group-icon"
/>
<span class="title">Twitter</span>
<span class="ml-auto font-weight-bold">
37,564 <span class="text-muted small">(11%)</span>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Thursday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="11"
color="success"
:value="43"
color="info"
/>
<CProgress
class="progress-xs"
:value="91"
color="danger"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="linkedin"
height="17"
class="progress-group-icon"
/>
<span class="title">LinkedIn</span>
<span class="ml-auto font-weight-bold">
27,319 <span class="text-muted small">&nbsp;(8%)</span>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Friday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="8"
color="success"
:value="22"
color="info"
/>
<CProgress
class="progress-xs"
:value="73"
color="danger"
/>
</div>
</div>
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<CIcon name="options"/>
</CButton>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Saturday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="53"
color="info"
/>
<CProgress
class="progress-xs"
:value="82"
color="danger"
/>
</div>
</div>
</ul>
</CCol>
</CRow>
<br/>
<CDataTable
class="mb-0 table-outline"
hover
:items="tableItems"
:fields="tableFields"
head-color="light"
no-sorting
>
<td slot="avatar" class="text-center" slot-scope="{item}">
<div class="c-avatar">
<img :src="item.avatar.url" class="c-avatar-img" alt="">
<span
class="c-avatar-status"
:class="`bg-${item.avatar.status || 'secondary'}`"
></span>
</div>
</td>
<td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="small text-muted">
<span>
<template v-if="item.user.new">New</template>
<template v-else>Recurring</template>
</span> | Registered: {{item.user.registered}}
</div>
</td>
<td
slot="country"
slot-scope="{item}"
class="text-center"
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Sunday
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="9"
color="info"
/>
<CProgress
class="progress-xs"
:value="69"
color="danger"
/>
</div>
</div>
<div class="legend text-center">
<small>
<sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout color="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="user" class="progress-group-icon"/>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="43"
color="warning"
/>
</div>
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<CIcon name="user-female" class="progress-group-icon"/>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="37"
color="warning"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="globe-alt" class="progress-group-icon"/>
<span class="title">Organic Search</span>
<span class="ml-auto font-weight-bold">
191,235<span class="text-muted small">(56%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="56"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="facebook"
height="17"
class="progress-group-icon"
/>
<span class="title">Facebook</span>
<span class="ml-auto font-weight-bold">
51,223 <span class="text-muted small">(15%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="15"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="twitter"
height="17"
class="progress-group-icon"
/>
<span class="title">Twitter</span>
<span class="ml-auto font-weight-bold">
37,564 <span class="text-muted small">(11%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="11"
color="success"
/>
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="linkedin"
height="17"
class="progress-group-icon"
/>
<span class="title">LinkedIn</span>
<span class="ml-auto font-weight-bold">
27,319 <span class="text-muted small">&nbsp;(8%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress
class="progress-xs"
:value="8"
color="success"
/>
</div>
</div>
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<CIcon name="options"/>
</CButton>
</div>
</ul>
</CCol>
</CRow>
<br/>
<CDataTable
class="mb-0 table-outline"
hover
:items="tableItems"
:fields="tableFields"
head-color="light"
no-sorting
>
<CIcon
:name="item.country.flag"
height="25"
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="clearfix">
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
<td slot="avatar" class="text-center" slot-scope="{item}">
<div class="c-avatar">
<img :src="item.avatar.url" class="c-avatar-img" alt="">
<span
class="c-avatar-status"
:class="`bg-${item.avatar.status || 'secondary'}`"
></span>
</div>
<div class="float-right">
<small class="text-muted">{{item.usage.period}}</small>
</td>
<td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="small text-muted">
<span>
<template v-if="item.user.new">New</template>
<template v-else>Recurring</template>
</span> | Registered: {{item.user.registered}}
</div>
</div>
<CProgress
class="progress-xs"
v-model="item.usage.value"
:color="color(item.usage.value)"
/>
</td>
<td
slot="payment"
slot-scope="{item}"
class="text-center"
>
<CIcon
:name="item.payment.icon"
height="25"
/>
</td>
<td slot="activity" slot-scope="{item}">
<div class="small text-muted">Last login</div>
<strong>{{item.activity}}</strong>
</td>
</CDataTable>
</td>
<td
slot="country"
slot-scope="{item}"
class="text-center"
>
<CIcon
:name="item.country.flag"
height="25"
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="clearfix">
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
</div>
<div class="float-right">
<small class="text-muted">{{item.usage.period}}</small>
</div>
</div>
<CProgress
class="progress-xs"
v-model="item.usage.value"
:color="color(item.usage.value)"
/>
</td>
<td
slot="payment"
slot-scope="{item}"
class="text-center"
>
<CIcon
:name="item.payment.icon"
height="25"
/>
</td>
<td slot="activity" slot-scope="{item}">
<div class="small text-muted">Last login</div>
<strong>{{item.activity}}</strong>
</td>
</CDataTable>
</CCardBody>
</CCard>
</CCol>
</CRow>