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

refactor: improve responsive behavior

Browse Source
This commit is contained in:
mrholek
2023-11-15 20:03:23 +01:00
parent a4f1cf2826
commit a1e6cf1b3d
4 changed files with 579 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/Dashboard.vue
+46 -108
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<WidgetsStatsA /> <WidgetsStatsA class="mb-4" />
<CRow> <CRow>
<CCol :md="12"> <CCol :md="12">
<CCard class="mb-4"> <CCard class="mb-4">
@@ -20,68 +20,46 @@
aria-label="Basic outlined example" aria-label="Basic outlined example"
> >
<CButton color="secondary" variant="outline">Day</CButton> <CButton color="secondary" variant="outline">Day</CButton>
<CButton color="secondary" variant="outline" active <CButton color="secondary" variant="outline" active>Month</CButton>
>Month</CButton
>
<CButton color="secondary" variant="outline">Year</CButton> <CButton color="secondary" variant="outline">Year</CButton>
</CButtonGroup> </CButtonGroup>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<MainChart <MainChart style="height: 300px; max-height: 300px; margin-top: 40px" />
style="height: 300px; max-height: 300px; margin-top: 40px"
/>
</CRow> </CRow>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center"> <CRow
<CCol class="mb-sm-2 mb-0"> :xs="{ cols: 1, gutter: 4 }"
:sm="{ cols: 2 }"
:lg="{ cols: 4 }"
:xl="{ cols: 5 }"
class="mb-2 text-center"
>
<CCol>
<div class="text-body-secondary">Visits</div> <div class="text-body-secondary">Visits</div>
<div class="fw-semibold">29.703 Users (40%)</div> <div class="fw-semibold text-truncate">29.703 Users (40%)</div>
<CProgress <CProgress class="mt-2" color="success" thin :precision="1" :value="40" />
class="mt-2"
color="success"
thin
:precision="1"
:value="40"
/>
</CCol> </CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none"> <CCol>
<div class="text-body-secondary">Unique</div> <div class="text-body-secondary">Unique</div>
<div class="fw-semibold">24.093 Users (20%)</div> <div class="fw-semibold text-truncate">24.093 Users (20%)</div>
<CProgress <CProgress class="mt-2" color="info" thin :precision="1" :value="20" />
class="mt-2"
color="info"
thin
:precision="1"
:value="20"
/>
</CCol> </CCol>
<CCol class="mb-sm-2 mb-0"> <CCol>
<div class="text-body-secondary">Pageviews</div> <div class="text-body-secondary">Pageviews</div>
<div class="fw-semibold">78.706 Views (60%)</div> <div class="fw-semibold text-truncate">78.706 Views (60%)</div>
<CProgress <CProgress class="mt-2" color="warning" thin :precision="1" :value="60" />
class="mt-2"
color="warning"
thin
:precision="1"
:value="60"
/>
</CCol> </CCol>
<CCol class="mb-sm-2 mb-0"> <CCol>
<div class="text-body-secondary">New Users</div> <div class="text-body-secondary">New Users</div>
<div class="fw-semibold">22.123 Users (80%)</div> <div class="fw-semibold text-truncate">22.123 Users (80%)</div>
<CProgress <CProgress class="mt-2" color="danger" thin :precision="1" :value="80" />
class="mt-2"
color="danger"
thin
:precision="1"
:value="80"
/>
</CCol> </CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none"> <CCol class="d-none d-xl-block">
<div class="text-body-secondary">Bounce Rate</div> <div class="text-body-secondary">Bounce Rate</div>
<div class="fw-semibold">Average Rate (40.15%)</div> <div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
<CProgress class="mt-2" :value="40" thin :precision="1" /> <CProgress class="mt-2" :value="40" thin :precision="1" />
</CCol> </CCol>
</CRow> </CRow>
@@ -89,7 +67,7 @@
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<WidgetsStatsD /> <WidgetsStatsD class="mb-4" />
<CRow> <CRow>
<CCol :md="12"> <CCol :md="12">
<CCard class="mb-4"> <CCard class="mb-4">
@@ -98,21 +76,15 @@
<CRow> <CRow>
<CCol :sm="12" :lg="6"> <CCol :sm="12" :lg="6">
<CRow> <CRow>
<CCol :sm="6"> <CCol :xs="6">
<div <div class="border-start border-start-4 border-start-info py-1 px-3 mb-3">
class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
>
<div class="text-body-secondary small">New Clients</div> <div class="text-body-secondary small">New Clients</div>
<div class="fs-5 fw-semibold">9,123</div> <div class="fs-5 fw-semibold">9,123</div>
</div> </div>
</CCol> </CCol>
<CCol :sm="6"> <CCol :xs="6">
<div <div class="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
class="border-start border-start-4 border-start-danger py-1 px-3 mb-3" <div class="text-body-secondary small">Recurring Clients</div>
>
<div class="text-body-secondary small">
Recurring Clients
</div>
<div class="fs-5 fw-semibold">22,643</div> <div class="fs-5 fw-semibold">22,643</div>
</div> </div>
</CCol> </CCol>
@@ -124,9 +96,7 @@
class="progress-group mb-4" class="progress-group mb-4"
> >
<div class="progress-group-prepend"> <div class="progress-group-prepend">
<span class="text-body-secondary small">{{ <span class="text-body-secondary small">{{ item.title }}</span>
item.title
}}</span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<CProgress thin color="info" :value="item.value1" /> <CProgress thin color="info" :value="item.value1" />
@@ -136,29 +106,21 @@
</CCol> </CCol>
<CCol :sm="12" :lg="6"> <CCol :sm="12" :lg="6">
<CRow> <CRow>
<CCol :sm="6"> <CCol :xs="6">
<div <div class="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
>
<div class="text-body-secondary small">Pageviews</div> <div class="text-body-secondary small">Pageviews</div>
<div class="fs-5 fw-semibold">78,623</div> <div class="fs-5 fw-semibold">78,623</div>
</div> </div>
</CCol> </CCol>
<CCol :sm="6"> <CCol :xs="6">
<div <div class="border-start border-start-4 border-start-success py-1 px-3 mb-3">
class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
>
<div class="text-body-secondary small">Organic</div> <div class="text-body-secondary small">Organic</div>
<div class="fs-5 fw-semibold">49,123</div> <div class="fs-5 fw-semibold">49,123</div>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
<hr class="mt-0" /> <hr class="mt-0" />
<div <div v-for="item in progressGroupExample2" :key="item.title" class="progress-group">
v-for="item in progressGroupExample2"
:key="item.title"
class="progress-group"
>
<div class="progress-group-header"> <div class="progress-group-header">
<CIcon :icon="item.icon" class="me-2" size="lg" /> <CIcon :icon="item.icon" class="me-2" size="lg" />
<span class="title">{{ item.title }}</span> <span class="title">{{ item.title }}</span>
@@ -171,19 +133,13 @@
<div class="mb-5"></div> <div class="mb-5"></div>
<div <div v-for="item in progressGroupExample3" :key="item.title" class="progress-group">
v-for="item in progressGroupExample3"
:key="item.title"
class="progress-group"
>
<div class="progress-group-header"> <div class="progress-group-header">
<CIcon :icon="item.icon" class="me-2" size="lg" /> <CIcon :icon="item.icon" class="me-2" size="lg" />
<span class="title">{{ item.title }}</span> <span class="title">{{ item.title }}</span>
<span class="ms-auto fw-semibold"> <span class="ms-auto fw-semibold">
{{ item.value }} {{ item.value }}
<span class="text-body-secondary small" <span class="text-body-secondary small">({{ item.percent }}%)</span>
>({{ item.percent }}%)</span
>
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
@@ -194,36 +150,26 @@
</CRow> </CRow>
<br /> <br />
<CTable align="middle" class="mb-0 border" hover responsive> <CTable align="middle" class="mb-0 border" hover responsive>
<CTableHead> <CTableHead class="text-nowrap">
<CTableRow> <CTableRow>
<CTableHeaderCell class="bg-body-secondary text-center"> <CTableHeaderCell class="bg-body-secondary text-center">
<CIcon name="cil-people" /> <CIcon name="cil-people" />
</CTableHeaderCell> </CTableHeaderCell>
<CTableHeaderCell class="bg-body-secondary"> <CTableHeaderCell class="bg-body-secondary"> User </CTableHeaderCell>
User
</CTableHeaderCell>
<CTableHeaderCell class="bg-body-secondary text-center"> <CTableHeaderCell class="bg-body-secondary text-center">
Country Country
</CTableHeaderCell> </CTableHeaderCell>
<CTableHeaderCell class="bg-body-secondary"> <CTableHeaderCell class="bg-body-secondary"> Usage </CTableHeaderCell>
Usage
</CTableHeaderCell>
<CTableHeaderCell class="bg-body-secondary text-center"> <CTableHeaderCell class="bg-body-secondary text-center">
Payment Method Payment Method
</CTableHeaderCell> </CTableHeaderCell>
<CTableHeaderCell class="bg-body-secondary"> <CTableHeaderCell class="bg-body-secondary"> Activity </CTableHeaderCell>
Activity
</CTableHeaderCell>
</CTableRow> </CTableRow>
</CTableHead> </CTableHead>
<CTableBody> <CTableBody>
<CTableRow v-for="item in tableExample" :key="item.name"> <CTableRow v-for="item in tableExample" :key="item.name">
<CTableDataCell class="text-center"> <CTableDataCell class="text-center">
<CAvatar <CAvatar size="md" :src="item.avatar.src" :status="item.avatar.status" />
size="md"
:src="item.avatar.src"
:status="item.avatar.status"
/>
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div>{{ item.user.name }}</div> <div>{{ item.user.name }}</div>
@@ -233,24 +179,16 @@
</div> </div>
</CTableDataCell> </CTableDataCell>
<CTableDataCell class="text-center"> <CTableDataCell class="text-center">
<CIcon <CIcon size="xl" :name="item.country.flag" :title="item.country.name" />
size="xl"
:name="item.country.flag"
:title="item.country.name"
/>
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div class="d-flex justify-content-between align-items-baseline"> <div class="d-flex justify-content-between align-items-baseline">
<div class="fw-semibold">{{ item.usage.value }}%</div> <div class="fw-semibold">{{ item.usage.value }}%</div>
<div class="ms-1 text-nowrap small text-body-secondary"> <div class="text-nowrap text-body-secondary small ms-3">
{{ item.usage.period }} {{ item.usage.period }}
</div> </div>
</div> </div>
<CProgress <CProgress thin :color="item.usage.color" :value="item.usage.value" />
thin
:color="item.usage.color"
:value="item.usage.value"
/>
</CTableDataCell> </CTableDataCell>
<CTableDataCell class="text-center"> <CTableDataCell class="text-center">
<CIcon size="xl" :name="item.payment.icon" /> <CIcon size="xl" :name="item.payment.icon" />
src/views/widgets/Widgets.vue
+511 -663
View File
File diff suppressed because it is too large Load Diff
src/views/widgets/WidgetsStatsTypeA.vue
+9 -9
View File
@@ -1,7 +1,7 @@
<template> <template>
<CRow> <CRow :xs="{ gutter: 4 }">
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsA class="mb-4" color="primary"> <CWidgetStatsA color="primary">
<template #value <template #value
>26K >26K
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -99,8 +99,8 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsA class="mb-4" color="info"> <CWidgetStatsA color="info">
<template #value <template #value
>$6.200 >$6.200
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -197,8 +197,8 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsA class="mb-4" color="warning"> <CWidgetStatsA color="warning">
<template #value <template #value
>2.49% >2.49%
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -281,8 +281,8 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsA class="mb-4" color="danger"> <CWidgetStatsA color="danger">
<template #value <template #value
>44K >44K
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
src/views/widgets/WidgetsStatsTypeD.vue
+13 -57
View File
@@ -1,31 +1,20 @@
<template> <template>
<CRow> <CRow :xs="{ gutter: 4 }">
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #3b5998" style="--cui-card-cap-bg: #3b5998"
:values="[ :values="[
{ title: 'friends', value: '89K' }, { title: 'friends', value: '89K' },
{ title: 'feeds', value: '459' }, { title: 'feeds', value: '459' },
]" ]"
> >
<template #icon <template #icon><CIcon icon="cib-facebook" height="52" class="my-4 text-white" /></template>
><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
/></template>
<template #chart> <template #chart>
<CChart <CChart
class="position-absolute w-100 h-100" class="position-absolute w-100 h-100"
type="line" type="line"
:data="{ :data="{
labels: [ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [ datasets: [
{ {
backgroundColor: 'rgba(255,255,255,.1)', backgroundColor: 'rgba(255,255,255,.1)',
@@ -42,32 +31,21 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #00aced" style="--cui-card-cap-bg: #00aced"
:values="[ :values="[
{ title: 'followers', value: '973k' }, { title: 'followers', value: '973k' },
{ title: 'tweets', value: '1.792' }, { title: 'tweets', value: '1.792' },
]" ]"
> >
<template #icon <template #icon><CIcon icon="cib-twitter" height="52" class="my-4 text-white" /></template>
><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
/></template>
<template #chart> <template #chart>
<CChart <CChart
class="position-absolute w-100 h-100" class="position-absolute w-100 h-100"
type="line" type="line"
:data="{ :data="{
labels: [ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [ datasets: [
{ {
backgroundColor: 'rgba(255,255,255,.1)', backgroundColor: 'rgba(255,255,255,.1)',
@@ -84,32 +62,21 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #4875b4" style="--cui-card-cap-bg: #4875b4"
:values="[ :values="[
{ title: 'contacts', value: '500' }, { title: 'contacts', value: '500' },
{ title: 'feeds', value: '1.292' }, { title: 'feeds', value: '1.292' },
]" ]"
> >
<template #icon <template #icon><CIcon icon="cib-linkedin" height="52" class="my-4 text-white" /></template>
><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
/></template>
<template #chart> <template #chart>
<CChart <CChart
class="position-absolute w-100 h-100" class="position-absolute w-100 h-100"
type="line" type="line"
:data="{ :data="{
labels: [ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [ datasets: [
{ {
backgroundColor: 'rgba(255,255,255,.1)', backgroundColor: 'rgba(255,255,255,.1)',
@@ -126,32 +93,21 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :xs="12" :sm="6" :lg="3"> <CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4"
color="warning" color="warning"
:values="[ :values="[
{ title: 'events', value: '12+' }, { title: 'events', value: '12+' },
{ title: 'meetings', value: '4' }, { title: 'meetings', value: '4' },
]" ]"
> >
<template #icon <template #icon><CIcon icon="cil-calendar" height="52" class="my-4 text-white" /></template>
><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
/></template>
<template #chart> <template #chart>
<CChart <CChart
class="position-absolute w-100 h-100" class="position-absolute w-100 h-100"
type="line" type="line"
:data="{ :data="{
labels: [ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [ datasets: [
{ {
backgroundColor: 'rgba(255,255,255,.1)', backgroundColor: 'rgba(255,255,255,.1)',