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-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">
<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">
{{ item.value }}
<span class="text-medium-emphasis small"
@@ -221,7 +221,7 @@
</CTableDataCell>
<CTableDataCell>
<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> |
{{ item.user.registered }}
</div>
@@ -234,11 +234,11 @@
/>
</CTableDataCell>
<CTableDataCell>
<div class="clearfix">
<div class="float-start">
<div class="d-flex justify-content-between text-nowrap">
<div>
<strong>{{ item.usage.value }}%</strong>
</div>
<div class="float-end">
<div class="ms-1">
<small class="text-medium-emphasis">
{{ item.usage.period }}
</small>
@@ -255,10 +255,11 @@
</CTableDataCell>
<CTableDataCell>
<div class="small text-medium-emphasis">Last login</div>
<strong>{{ item.activity }}</strong>
<div class="fw-semibold text-nowrap">
{{ item.activity }}
</div>
</CTableDataCell>
</CTableRow>
<CTableRow> </CTableRow>
</CTableBody>
</CTable>
</CCardBody>
src/views/widgets/Widgets.vue
+38 -38
View File
@@ -11,7 +11,7 @@
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'success', value: 75 }"
@@ -21,7 +21,7 @@
<template #value>89.9%</template>
</CWidgetStatsB>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'info', value: 75 }"
@@ -30,7 +30,7 @@
value="12.124"
/>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'warning', value: 75 }"
@@ -39,7 +39,7 @@
value="$98.111,00"
/>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'primary', value: 75 }"
@@ -52,7 +52,7 @@
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
color="success"
@@ -64,7 +64,7 @@
<template #value>89.9%</template>
</CWidgetStatsB>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
color="info"
@@ -75,7 +75,7 @@
value="12.124"
/>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
color="warning"
@@ -86,7 +86,7 @@
value="$98.111,00"
/>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsB
class="mb-3"
color="primary"
@@ -102,7 +102,7 @@
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -126,7 +126,7 @@
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -150,7 +150,7 @@
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -174,7 +174,7 @@
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -198,7 +198,7 @@
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -222,7 +222,7 @@
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
@@ -250,28 +250,28 @@
</DocsExample>
<DocsExample href="">
<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">
<template #icon>
<CIcon icon="cil-settings" size="xl" />
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-user" size="xl" />
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-moon" size="xl" />
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-bell" size="xl" />
@@ -282,7 +282,7 @@
</DocsExample>
<DocsExample href="">
<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">
<template #icon>
<CIcon icon="cil-settings" size="xl" />
@@ -304,7 +304,7 @@
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-user" size="xl" />
@@ -326,7 +326,7 @@
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-moon" size="xl" />
@@ -348,7 +348,7 @@
</template>
</CWidgetStatsF>
</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">
<template #icon>
<CIcon icon="cil-bell" size="xl" />
@@ -374,7 +374,7 @@
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF
color="primary"
:padding="false"
@@ -386,7 +386,7 @@
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF
color="info"
:padding="false"
@@ -398,7 +398,7 @@
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF
color="warning"
:padding="false"
@@ -410,7 +410,7 @@
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
<CWidgetStatsF
color="danger"
:padding="false"
@@ -483,7 +483,7 @@
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'info', value: 75 }"
@@ -495,7 +495,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'success', value: 75 }"
@@ -507,7 +507,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'warning', value: 75 }"
@@ -519,7 +519,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'primary', value: 75 }"
@@ -531,7 +531,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'danger', value: 75 }"
@@ -543,7 +543,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'info', value: 75 }"
@@ -559,7 +559,7 @@
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="info"
@@ -573,7 +573,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="success"
@@ -587,7 +587,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="warning"
@@ -601,7 +601,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="primary"
@@ -615,7 +615,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="danger"
@@ -629,7 +629,7 @@
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CCol :sm="4" :md="3" :lg="2">
<CWidgetStatsC
class="mb-3"
color="info"
src/views/widgets/WidgetsStatsTypeA.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template>
<CRow>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="primary">
<template #value
>26K
@@ -96,7 +96,7 @@
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="info">
<template #value
>$6.200
@@ -191,7 +191,7 @@
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="warning">
<template #value
>2.49%
@@ -272,7 +272,7 @@
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsA class="mb-4" color="danger">
<template #value
>44K
src/views/widgets/WidgetsStatsTypeD.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template>
<CRow>
<CCol :sm="6" :lg="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #3b5998"
@@ -42,7 +42,7 @@
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #00aced"
@@ -84,7 +84,7 @@
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #4875b4"
@@ -126,7 +126,7 @@
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CCol :xs="12" :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
color="warning"