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

refactor: improve responsive behavior

Browse Source
This commit is contained in:
mrholek
2023-06-13 20:35:08 +02:00
parent 3e3b94986c
commit 8a7baa6670
4 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/Dashboard.vue
+8 -7
View File
@@ -178,7 +178,7 @@
> >
<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">Organic Search</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-medium-emphasis small" <span class="text-medium-emphasis small"
@@ -221,7 +221,7 @@
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div>{{ item.user.name }}</div> <div>{{ item.user.name }}</div>
<div class="small text-medium-emphasis"> <div class="small text-medium-emphasis text-nowrap">
<span>{{ item.user.new ? 'New' : 'Recurring' }}</span> | <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
{{ item.user.registered }} {{ item.user.registered }}
</div> </div>
@@ -234,11 +234,11 @@
/> />
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div class="clearfix"> <div class="d-flex justify-content-between text-nowrap">
<div class="float-start"> <div>
<strong>{{ item.usage.value }}%</strong> <strong>{{ item.usage.value }}%</strong>
</div> </div>
<div class="float-end"> <div class="ms-1">
<small class="text-medium-emphasis"> <small class="text-medium-emphasis">
{{ item.usage.period }} {{ item.usage.period }}
</small> </small>
@@ -255,10 +255,11 @@
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div class="small text-medium-emphasis">Last login</div> <div class="small text-medium-emphasis">Last login</div>
<strong>{{ item.activity }}</strong> <div class="fw-semibold text-nowrap">
{{ item.activity }}
</div>
</CTableDataCell> </CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</CCardBody> </CCardBody>
src/views/widgets/Widgets.vue
+38 -38
View File
@@ -11,7 +11,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
:progress="{ color: 'success', value: 75 }" :progress="{ color: 'success', value: 75 }"
@@ -21,7 +21,7 @@
<template #value>89.9%</template> <template #value>89.9%</template>
</CWidgetStatsB> </CWidgetStatsB>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
:progress="{ color: 'info', value: 75 }" :progress="{ color: 'info', value: 75 }"
@@ -30,7 +30,7 @@
value="12.124" value="12.124"
/> />
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
:progress="{ color: 'warning', value: 75 }" :progress="{ color: 'warning', value: 75 }"
@@ -39,7 +39,7 @@
value="$98.111,00" value="$98.111,00"
/> />
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
:progress="{ color: 'primary', value: 75 }" :progress="{ color: 'primary', value: 75 }"
@@ -52,7 +52,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
color="success" color="success"
@@ -64,7 +64,7 @@
<template #value>89.9%</template> <template #value>89.9%</template>
</CWidgetStatsB> </CWidgetStatsB>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
color="info" color="info"
@@ -75,7 +75,7 @@
value="12.124" value="12.124"
/> />
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
color="warning" color="warning"
@@ -86,7 +86,7 @@
value="$98.111,00" value="$98.111,00"
/> />
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB <CWidgetStatsB
class="mb-3" class="mb-3"
color="primary" color="primary"
@@ -102,7 +102,7 @@
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -126,7 +126,7 @@
/> />
</CWidgetStatsE> </CWidgetStatsE>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -150,7 +150,7 @@
/> />
</CWidgetStatsE> </CWidgetStatsE>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -174,7 +174,7 @@
/> />
</CWidgetStatsE> </CWidgetStatsE>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -198,7 +198,7 @@
/> />
</CWidgetStatsE> </CWidgetStatsE>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -222,7 +222,7 @@
/> />
</CWidgetStatsE> </CWidgetStatsE>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123"> <CWidgetStatsE title="title" value="1,123">
<CChart <CChart
class="mx-auto" class="mx-auto"
@@ -250,28 +250,28 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50"> <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-settings" size="xl" /> <CIcon icon="cil-settings" size="xl" />
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="info" title="Title" value="$1.999,50"> <CWidgetStatsF color="info" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-user" size="xl" /> <CIcon icon="cil-user" size="xl" />
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="warning" title="Title" value="$1.999,50"> <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-moon" size="xl" /> <CIcon icon="cil-moon" size="xl" />
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="danger" title="Title" value="$1.999,50"> <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-bell" size="xl" /> <CIcon icon="cil-bell" size="xl" />
@@ -282,7 +282,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50"> <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-settings" size="xl" /> <CIcon icon="cil-settings" size="xl" />
@@ -304,7 +304,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="info" title="Title" value="$1.999,50"> <CWidgetStatsF color="info" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-user" size="xl" /> <CIcon icon="cil-user" size="xl" />
@@ -326,7 +326,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="warning" title="Title" value="$1.999,50"> <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-moon" size="xl" /> <CIcon icon="cil-moon" size="xl" />
@@ -348,7 +348,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF color="danger" title="Title" value="$1.999,50"> <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
<template #icon> <template #icon>
<CIcon icon="cil-bell" size="xl" /> <CIcon icon="cil-bell" size="xl" />
@@ -374,7 +374,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF <CWidgetStatsF
color="primary" color="primary"
:padding="false" :padding="false"
@@ -386,7 +386,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF <CWidgetStatsF
color="info" color="info"
:padding="false" :padding="false"
@@ -398,7 +398,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF <CWidgetStatsF
color="warning" color="warning"
:padding="false" :padding="false"
@@ -410,7 +410,7 @@
</template> </template>
</CWidgetStatsF> </CWidgetStatsF>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF <CWidgetStatsF
color="danger" color="danger"
:padding="false" :padding="false"
@@ -483,7 +483,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'info', value: 75 }" :progress="{ color: 'info', value: 75 }"
@@ -495,7 +495,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'success', value: 75 }" :progress="{ color: 'success', value: 75 }"
@@ -507,7 +507,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'warning', value: 75 }" :progress="{ color: 'warning', value: 75 }"
@@ -519,7 +519,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'primary', value: 75 }" :progress="{ color: 'primary', value: 75 }"
@@ -531,7 +531,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'danger', value: 75 }" :progress="{ color: 'danger', value: 75 }"
@@ -543,7 +543,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
:progress="{ color: 'info', value: 75 }" :progress="{ color: 'info', value: 75 }"
@@ -559,7 +559,7 @@
</DocsExample> </DocsExample>
<DocsExample href=""> <DocsExample href="">
<CRow> <CRow>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="info" color="info"
@@ -573,7 +573,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="success" color="success"
@@ -587,7 +587,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="warning" color="warning"
@@ -601,7 +601,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="primary" color="primary"
@@ -615,7 +615,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="danger" color="danger"
@@ -629,7 +629,7 @@
/></template> /></template>
</CWidgetStatsC> </CWidgetStatsC>
</CCol> </CCol>
<CCol :xs="2"> <CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC <CWidgetStatsC
class="mb-3" class="mb-3"
color="info" color="info"
src/views/widgets/WidgetsStatsTypeA.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template> <template>
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="primary"> <CWidgetStatsA class="mb-4" color="primary">
<template #value <template #value
>26K >26K
@@ -96,7 +96,7 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="info"> <CWidgetStatsA class="mb-4" color="info">
<template #value <template #value
>$6.200 >$6.200
@@ -191,7 +191,7 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="warning"> <CWidgetStatsA class="mb-4" color="warning">
<template #value <template #value
>2.49% >2.49%
@@ -272,7 +272,7 @@
</template> </template>
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="danger"> <CWidgetStatsA class="mb-4" color="danger">
<template #value <template #value
>44K >44K
src/views/widgets/WidgetsStatsTypeD.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template> <template>
<CRow> <CRow>
<CCol :sm="6" :lg="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4" class="mb-4"
style="--cui-card-cap-bg: #3b5998" style="--cui-card-cap-bg: #3b5998"
@@ -42,7 +42,7 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :sm="6" :lg="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4" class="mb-4"
style="--cui-card-cap-bg: #00aced" style="--cui-card-cap-bg: #00aced"
@@ -84,7 +84,7 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :sm="6" :lg="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4" class="mb-4"
style="--cui-card-cap-bg: #4875b4" style="--cui-card-cap-bg: #4875b4"
@@ -126,7 +126,7 @@
</template> </template>
</CWidgetStatsD> </CWidgetStatsD>
</CCol> </CCol>
<CCol :sm="6" :lg="3"> <CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD <CWidgetStatsD
class="mb-4" class="mb-4"
color="warning" color="warning"