mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
skeleton struktur, bg-image svg
This commit is contained in:
ogerly
parent
51b770012b
commit
a44f9583c2
22
frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg
Normal file
22
frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 673.47 722.49" style="enable-background:new 0 0 673.47 722.49;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F2F2F2;}
|
||||
</style>
|
||||
<path class="st0" d="M651.42,228.24c-60.85,51.18-92.46,94.8-99.91,105.69c0,0.02,0,0.03,0,0.05
|
||||
c1.42,86.34-28.15,168.15-50.15,216.73c39.98-24.28,89.26-65.02,118.74-128.7l0,0C659.32,337.31,659.75,271.5,651.42,228.24z"/>
|
||||
<path class="st0" d="M646.33,207.44c-0.05-0.18-0.1-0.36-0.15-0.53c-2.99-10.12-6.9-19.95-11.68-29.36
|
||||
c-17.24,6.73-56.21,25.49-96.38,68.97c5.66,18.49,9.52,37.49,11.52,56.73C566.8,281.58,598.73,246.5,646.33,207.44z"/>
|
||||
<path class="st0" d="M298.67,20.88c-0.2-0.07-0.4-0.15-0.59-0.21c-10.31-3.64-20.85-6.59-31.56-8.81
|
||||
c-25.13,29.67-143.01,183.42-63.67,369.93c40.68,95.63,123.09,145.6,185.48,170.76c0.11,0.04,0.21,0.08,0.31,0.12
|
||||
C324.51,465.51,231.5,283.62,298.67,20.88z"/>
|
||||
<path class="st0" d="M510.68,247.67l-2.43-7.18C459.77,109.65,374.24,52.52,317.22,28.11c-71.14,281.83,47.26,466.57,106.05,536.85
|
||||
c16.02,4.94,28.92,7.91,36.87,9.52l0,0c11.18-20.87,40.87-80.69,55.88-153.12c0.01-0.04,0.02-0.09,0.03-0.13
|
||||
c0.17-0.83,0.34-1.66,0.51-2.5C527.35,364.97,529.9,304.36,510.68,247.67z"/>
|
||||
<path class="st0" d="M421.89,593.39l0.57-0.38c-52.89-15.28-143.12-52.46-204.42-132.98c-16.54,7.11-32.45,15.63-47.53,25.46
|
||||
C93.05,535.92,53.61,590.95,33.65,631.56c-0.11,0.22-0.21,0.43-0.31,0.66C212.12,676.57,341.56,639.33,421.89,593.39z"/>
|
||||
<path class="st0" d="M25.21,650.55c-4.32,10.7-7.73,21.74-10.19,33.01c32.95,14.7,159.32,62.04,304.57-0.12l0,0
|
||||
c26.69-12.2,58.63-31.05,88.89-60.51c-54.82,27.16-127.46,48.99-217.62,48.99C141.92,671.91,85.22,665.71,25.21,650.55z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div id="component-sidebar">
|
||||
<div id="side-menu" class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4">
|
||||
|
||||
<div
|
||||
id="side-menu"
|
||||
ref="sideMenu"
|
||||
class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4"
|
||||
>
|
||||
<!-- @mouseout="$emit('toogleMobilMenu')" -->
|
||||
<div class="mb-6 mt-3">
|
||||
<b-nav vertical class="w-200">
|
||||
<b-nav-item to="/overview" class="mb-3">
|
||||
@ -62,6 +66,12 @@
|
||||
<b-icon icon="power" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
class="mt-4 mb-3 d-block d-md-none d-lg-none"
|
||||
@click="$emit('toogleMobilMenu')"
|
||||
>
|
||||
<b-icon icon="x" aria-hidden="true"></b-icon>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
43
frontend/src/components/skeleton/Overview.vue
Normal file
43
frontend/src/components/skeleton/Overview.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row class="text-center">
|
||||
<b-col>
|
||||
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="b-right m-4">
|
||||
<b-row>
|
||||
<b-col><b-skeleton type="avatar"></b-skeleton></b-col>
|
||||
<b-col>
|
||||
<b-skeleton></b-skeleton>
|
||||
<b-skeleton></b-skeleton>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="text-center mt-5">
|
||||
<b-col>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,68 +1,39 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<div v-if="skeleton">
|
||||
<b-row class="text-center">
|
||||
<b-col>
|
||||
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="b-right m-4">
|
||||
<b-row>
|
||||
<b-col><b-skeleton type="avatar"></b-skeleton></b-col>
|
||||
<b-col>
|
||||
<b-skeleton></b-skeleton>
|
||||
<b-skeleton></b-skeleton>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="text-center mt-5">
|
||||
<b-col>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<skeleton-overview />
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--sm menu mobil hamburger button-->
|
||||
<div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
|
||||
<b-button @click="toogleMobilMenu">
|
||||
<span v-if="hamburger" class="navbar-toggler-icon"></span>
|
||||
<span v-else><b-icon icon="x-square" aria-hidden="true"></b-icon></span>
|
||||
{{ hamburger }}
|
||||
<b-button v-if="hamburger" @click="toogleMobilMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<b-row>
|
||||
<!-- navbar -->
|
||||
<b-col>
|
||||
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
|
||||
<sidebar-new
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@logout="logout"
|
||||
@modeToggle="modeToggle"
|
||||
@toogleMobilMenu="toogleMobilMenu"
|
||||
/>
|
||||
</div>
|
||||
<b-row fluid class="d-flex">
|
||||
<b-col cols="2" ref="sideMenuRow" class="d-none d-lg-block d-md-block zindex1000">
|
||||
<b-col cols="2" class="d-none d-lg-block d-md-block">
|
||||
<sidebar-new
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@logout="logout"
|
||||
@modeToggle="modeToggle"
|
||||
@toogleMobilMenu="toogleMobilMenu"
|
||||
/>
|
||||
</b-col>
|
||||
<b-col>
|
||||
@ -113,6 +84,7 @@
|
||||
<script>
|
||||
import ContentHeader from '@/layouts/templates/ContentHeader.vue'
|
||||
import RightSide from '@/layouts/templates/RightSide.vue'
|
||||
import SkeletonOverview from '@/components/skeleton/Overview.vue'
|
||||
// import Navbar from '@/components/Menu/Navbar.vue'
|
||||
import NavbarNew from '@/components/Menu/NavbarNew.vue'
|
||||
// import Sidebar from '@/components/Menu/Sidebar.vue'
|
||||
@ -127,6 +99,7 @@ import CONFIG from '@/config'
|
||||
export default {
|
||||
name: 'DashboardLayout',
|
||||
components: {
|
||||
SkeletonOverview,
|
||||
ContentHeader,
|
||||
RightSide,
|
||||
// Navbar,
|
||||
@ -220,11 +193,10 @@ export default {
|
||||
this.tunneledEmail = email
|
||||
},
|
||||
toogleMobilMenu() {
|
||||
// console.log(this.$refs.sideMenuRow.classList.contains('position-absolute'))
|
||||
|
||||
this.$refs.sideMenuRow.classList.toggle('d-none')
|
||||
console.log(this.$refs.sideMenuRow.classList.value)
|
||||
this.$refs.sideMenuRow.classList.toggle('d-inline')
|
||||
this.$refs.sideMenuRow.classList.toggle('position-absolute')
|
||||
// console.log(document.getElementById('component-sidebar'))
|
||||
|
||||
document.getElementById('side-menu').classList.toggle('bg-lightgrey')
|
||||
this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
|
||||
},
|
||||
@ -256,6 +228,14 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg */
|
||||
.main-page {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(/img/svg/Gradido_Blaetter_Mainpage.svg) !important;
|
||||
}
|
||||
.b-right {
|
||||
text-align: -webkit-right;
|
||||
}
|
||||
|
||||
@ -1,3 +1,25 @@
|
||||
<template>
|
||||
<div class="p-5">Content Header Template</div>
|
||||
<div>
|
||||
<div class="p-5">
|
||||
<b-container v-if="path === '/overview'">overview content header</b-container>
|
||||
<b-container v-if="path === '/storys'">storys content header</b-container>
|
||||
<b-container v-if="path === '/favourites'">favourites content header</b-container>
|
||||
<b-container v-if="path === '/send'">send content header</b-container>
|
||||
<b-container v-if="path === '/transactions'">transactions content header</b-container>
|
||||
<b-container v-if="path === '/profile'">profile content header</b-container>
|
||||
<b-container v-if="path === '/community'">community content header</b-container>
|
||||
<b-container v-if="path === '/settings'">settings content header</b-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContentHeader',
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,22 @@
|
||||
<template>
|
||||
<div class="p-5">Right Side Template</div>
|
||||
<div class="p-5">
|
||||
<b-container v-if="path === '/overview'">overview ride side</b-container>
|
||||
<b-container v-if="path === '/storys'">storys ride side</b-container>
|
||||
<b-container v-if="path === '/favourites'">favourites ride side</b-container>
|
||||
<b-container v-if="path === '/send'">send ride side</b-container>
|
||||
<b-container v-if="path === '/transactions'">transactions ride side</b-container>
|
||||
<b-container v-if="path === '/profile'">profile ride side</b-container>
|
||||
<b-container v-if="path === '/community'">community ride side</b-container>
|
||||
<b-container v-if="path === '/settings'">settings ride side</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightSide',
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user