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

refactor: update images

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-31 00:31:56 +02:00
parent 85c257aaf2
commit 715415e7a2
19 changed files with 106 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/angular.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

src/assets/images/react.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

src/assets/images/vue.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

src/assets/images/vue400.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

src/components/AppHeader.vue
+2 -2
View File
@@ -57,8 +57,8 @@
import { onMounted, ref, watch } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
import router from '../router'
import { logo } from './../assets/brand/logo'
import router from '@/router'
import { logo } from '@/assets/brand/logo'
export default {
name: 'AppHeader',
components: {
src/components/AppHeaderDropdownAccnt.vue
+1 -1
View File
@@ -46,7 +46,7 @@
</template>
<script>
import avatar from './../assets/images/avatars/8.jpg'
import avatar from '@/assets/images/avatars/8.jpg'
export default {
name: 'AppHeaderDropdownAccnt',
setup() {
src/components/AppSidebar.vue
+2 -2
View File
@@ -36,8 +36,8 @@
import { computed } from 'vue'
import { useStore } from 'vuex'
import { AppSidebarNav } from './AppSidebarNav'
import { logoNegative } from './../assets/brand/logo-negative'
import { sygnet } from './../assets/brand/sygnet'
import { logoNegative } from '@/assets/brand/logo-negative'
import { sygnet } from '@/assets/brand/sygnet'
export default {
name: 'AppSidebar',
components: {
src/views/Dashboard.vue
+6 -6
View File
@@ -388,12 +388,12 @@
</template>
<script>
import avatar1 from './../assets/images/avatars/1.jpg'
import avatar2 from './../assets/images/avatars/2.jpg'
import avatar3 from './../assets/images/avatars/3.jpg'
import avatar4 from './../assets/images/avatars/4.jpg'
import avatar5 from './../assets/images/avatars/5.jpg'
import avatar6 from './../assets/images/avatars/6.jpg'
import avatar1 from '@/assets/images/avatars/1.jpg'
import avatar2 from '@/assets/images/avatars/2.jpg'
import avatar3 from '@/assets/images/avatars/3.jpg'
import avatar4 from '@/assets/images/avatars/4.jpg'
import avatar5 from '@/assets/images/avatars/5.jpg'
import avatar6 from '@/assets/images/avatars/6.jpg'
import MainChartExample from './charts/MainChartExample'
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
src/views/base/Cards.vue
+67 -369
View File
@@ -28,24 +28,7 @@
</p>
<DocsExample href="components/card">
<CCard style="width: 18rem">
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -127,24 +110,7 @@
</p>
<DocsExample href="components/card/#images">
<CCard style="width: 18rem">
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardText>
Some quick example text to build on the card title and make up
@@ -214,24 +180,7 @@
</p>
<DocsExample href="components/card/#kitchen-sink">
<CCard style="width: 18rem">
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -544,24 +493,7 @@
<CRow>
<CCol :lg="6">
<CCard class="mb-3">
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -592,24 +524,7 @@
>
</CCardText>
</CCardBody>
<CCardImage
component="svg"
orientation="bottom"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="bottom" :src="VueImg" />
</CCard>
</CCol>
</CRow>
@@ -633,28 +548,42 @@
</p>
<DocsExample href="components/card/#background-and-color">
<CRow>
{[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
textColor: 'white' }, { color: 'success', textColor: 'white' }, {
color: 'danger', textColor: 'white' }, { color: 'warning' }, {
color: 'info', textColor: 'white' }, { color: 'light' }, { color:
'dark', textColor: 'white' }, ].map((item, index) => (
<CCol :lg="4" key="{index}">
<CCard
color="{item.color}"
textColor="{item.textColor}"
class="mb-3"
>
<CCardHeader>Header</CCardHeader>
<CCardBody>
<CCardTitle>{item.color} card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and
make up the bulk of the card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
</CCol>
))}
<template
v-for="item in [
{ color: 'primary', textColor: 'white' },
{ color: 'secondary', textColor: 'white' },
{ color: 'success', textColor: 'white' },
{
color: 'danger',
textColor: 'white',
},
{ color: 'warning' },
{
color: 'info',
textColor: 'white',
},
{ color: 'light' },
{ color: 'dark', textColor: 'white' },
]"
:key="item"
>
<CCol :lg="4">
<CCard
class="mb-3"
:color="item.color"
:textColor="item.textColor"
>
<CCardHeader>Header</CCardHeader>
<CCardBody>
<CCardTitle>{{ item.color }} card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and
make up the bulk of the card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
</CCol>
</template>
</CRow>
</DocsExample>
<h3>Border</h3>
@@ -680,6 +609,7 @@
{ color: 'light' },
{ color: 'dark' },
]"
:key="item"
>
<CCard
:textColor="item.textColor"
@@ -758,24 +688,7 @@
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -791,24 +704,7 @@
</CCardBody>
</CCard>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -823,24 +719,7 @@
</CCardBody>
</CCard>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -864,24 +743,7 @@
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -897,24 +759,7 @@
</CCardFooter>
</CCard>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -929,24 +774,7 @@
</CCardFooter>
</CCard>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -975,38 +803,21 @@
<p class="text-medium-emphasis small">
Use the <code>CRow</code> component and set
<code
>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: *
&#125;&#125;</code
>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: *
&#125;"</code
>
property to control how many grid columns (wrapped around your
cards) you show per row. For example, here&#39;s
<code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the cards
<code>xs="&#123;cols: 1&#125;"</code> laying out the cards
on one column, and
<code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards
<code>md="&#123;cols: 1&#125;"</code> splitting four cards
to equal width across multiple rows, from the medium breakpoint up.
</p>
<DocsExample href="components/card/#grid-cards">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1024,24 +835,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1059,24 +853,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1094,24 +871,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1130,31 +890,14 @@
</CRow>
</DocsExample>
<p class="text-medium-emphasis small">
Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and
Change it to <code>md="&#123; cols: 3&#125;"</code> and
you&#39;ll see the fourth card wrap.
</p>
<DocsExample href="components/card/#grid-cards">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1172,24 +915,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1207,24 +933,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1242,24 +951,7 @@
</CCol>
<CCol xs>
<CCard>
<CCardImage
component="svg"
orientation="top"
class="docs-placeholder-img"
width="100%"
height="180"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder: Image cap"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
Image cap
</text>
</CCardImage>
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
@@ -1284,7 +976,13 @@
</template>
<script>
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Cards',
setup() {
return {
VueImg,
}
},
}
</script>
src/views/base/Carousels.vue
+28 -18
View File
@@ -17,21 +17,21 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
</CCarouselItem>
@@ -53,21 +53,21 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
</CCarouselItem>
@@ -89,21 +89,21 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
</CCarouselItem>
@@ -131,7 +131,7 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
<CCarouselCaption class="d-none d-md-block">
@@ -144,7 +144,7 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
<CCarouselCaption class="d-none d-md-block">
@@ -157,7 +157,7 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
<CCarouselCaption class="d-none d-md-block">
@@ -185,21 +185,21 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
</CCarouselItem>
@@ -225,21 +225,21 @@
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
:src="VueImg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
:src="ReactImg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
:src="AngularImg"
alt="slide 3"
/>
</CCarouselItem>
@@ -252,7 +252,17 @@
</template>
<script>
import AngularImg from '@/assets/images/angular.jpg'
import ReactImg from '@/assets/images/react.jpg'
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Carousels',
setup() {
return {
AngularImg,
ReactImg,
VueImg,
}
}
}
</script>