mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-06 09:56:05 +00:00
ContentHeader && RideSide Structur
This commit is contained in:
ogerly
parent
a44f9583c2
commit
82544930e3
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="app" class="placeholder">
|
||||
<div id="app" class="placeholder h-100">
|
||||
<component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayout'" />
|
||||
<div class="goldrand position-fixed w-100 fixed-bottom zindex1000"></div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="skeleton-overview h-100">
|
||||
<b-row class="text-center">
|
||||
<b-col>
|
||||
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
|
||||
@ -19,13 +19,13 @@
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="text-center mt-5">
|
||||
<b-col>
|
||||
<b-row class="text-center mt-5 pt-5">
|
||||
<b-col cols="12" lg="">
|
||||
<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-col cols="12" lg="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>
|
||||
@ -33,7 +33,7 @@
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-col cols="12" lg="">
|
||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<div class="main-page h-100">
|
||||
<div v-if="skeleton">
|
||||
<skeleton-overview />
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--sm menu mobil hamburger button-->
|
||||
<!--menu mobil hamburger button-->
|
||||
<div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
|
||||
{{ hamburger }}
|
||||
<b-button v-if="hamburger" @click="toogleMobilMenu">
|
||||
@ -27,6 +27,7 @@
|
||||
/>
|
||||
</div>
|
||||
<b-row fluid class="d-flex">
|
||||
<!-- Sidebar left -->
|
||||
<b-col cols="2" class="d-none d-lg-block d-md-block">
|
||||
<sidebar-new
|
||||
class="main-sidebar"
|
||||
@ -36,15 +37,18 @@
|
||||
@toogleMobilMenu="toogleMobilMenu"
|
||||
/>
|
||||
</b-col>
|
||||
<!-- ContentHeader && Content -->
|
||||
<b-col>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-row class="d-lg-flex" cols="12">
|
||||
<!-- ContentHeader -->
|
||||
<b-col>
|
||||
<content-header />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<!-- RideSide Mobil -->
|
||||
<b-col class="d-block d-lg-none">
|
||||
<right-side />
|
||||
</b-col>
|
||||
@ -67,6 +71,7 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<!-- RightSide Desktop -->
|
||||
<b-col cols="2" class="d-none d-lg-block" align-self="stretch">
|
||||
<right-side />
|
||||
</b-col>
|
||||
@ -193,7 +198,7 @@ export default {
|
||||
this.tunneledEmail = email
|
||||
},
|
||||
toogleMobilMenu() {
|
||||
console.log(this.$refs.sideMenuRow.classList.value)
|
||||
// console.log(this.$refs.sideMenuRow.classList.value)
|
||||
this.$refs.sideMenuRow.classList.toggle('d-inline')
|
||||
this.$refs.sideMenuRow.classList.toggle('position-absolute')
|
||||
|
||||
|
||||
@ -1,12 +1,45 @@
|
||||
<template>
|
||||
<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>
|
||||
<div>
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col cols="5">
|
||||
<div class="p-4 bg-light rounded">a overview</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<div class="p-4 bg-light rounded">b overview</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></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 === '/send'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-light rounded">a send</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-light rounded">b send</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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 === '/profile'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">
|
||||
<b-row>
|
||||
<b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
|
||||
<b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
|
||||
<b-col cols="10" class="">Text</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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>
|
||||
|
||||
@ -1,9 +1,54 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="right-side mt-3 mt-lg-0">
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a ride side overview</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3 mt-lg-5">
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded h-100">
|
||||
<div>b ride side overview</div>
|
||||
<div>b ride side overview</div>
|
||||
<div>b ride side overview</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/storys'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a storys ride side</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3 mt-lg-5">
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded h-100">
|
||||
<div>b storys ride side</div>
|
||||
<div>b storys ride side</div>
|
||||
<div>b storys ride side</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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 === '/send'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a ride side send</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3 mt-lg-5">
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded h-100">
|
||||
<div>b ride side send</div>
|
||||
<div>b ride side send</div>
|
||||
<div>b ride side send</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user