mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
right-side and content-header areas prepared
This commit is contained in:
ogerly
parent
82544930e3
commit
acd1c8bf8e
@ -22,17 +22,21 @@
|
||||
<div class="mb-2">
|
||||
<router-link to="/profile">
|
||||
<div>
|
||||
<div>
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
:text="avatarShortName"
|
||||
class="align-baseline"
|
||||
></b-avatar>
|
||||
{{ avatarLongName }}
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
:text="avatarShortName"
|
||||
class="align-baseline"
|
||||
></b-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ avatarLongName }}</div>
|
||||
|
||||
<div class="text-right">
|
||||
<small>{{ balance | GDD }}</small>
|
||||
<div class="text-right m">
|
||||
<small>{{ $store.state.email }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
20
frontend/src/components/Overview/CommunityNews.vue
Normal file
20
frontend/src/components/Overview/CommunityNews.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="community-news">
|
||||
<b-card class="bg-white">CommunityNews</b-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'CommunityNews',
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.card {
|
||||
min-height: 400px;
|
||||
background-attachment: absolute;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 350px 350px;
|
||||
background-image: url(/img/svg/Gradido_Blaetter_Mainpage.svg) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="community-member">
|
||||
<div>CommunityMember components</div>
|
||||
<div>{{ CONFIG.COMMUNITY_NAME }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CONFIG from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'CommunityMember',
|
||||
data() {
|
||||
return {
|
||||
CONFIG,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
14
frontend/src/components/Template/ContentHeader/GddAmount.vue
Normal file
14
frontend/src/components/Template/ContentHeader/GddAmount.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="wallet-amount">
|
||||
<div>GDD Amount components</div>
|
||||
<div>{{ balance | GDD }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'GddAmount',
|
||||
props: {
|
||||
balance: { type: Number, required: true },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="wallet-amount">GDT Amount components</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'GdtAmount',
|
||||
}
|
||||
</script>
|
||||
26
frontend/src/components/Template/RightSide/Favourites.vue
Normal file
26
frontend/src/components/Template/RightSide/Favourites.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="rightside-favourites">
|
||||
<b-row>
|
||||
<b-col>Favorit</b-col>
|
||||
<b-col cols="1" class="text-right">
|
||||
<b-icon icon="three-dots-vertical"></b-icon>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="d-flex mt-3">
|
||||
<b-col>
|
||||
<b-avatar></b-avatar>
|
||||
<b-avatar></b-avatar>
|
||||
<b-avatar></b-avatar>
|
||||
<b-avatar></b-avatar>
|
||||
</b-col>
|
||||
|
||||
<b-avatar><b-icon icon="chevron-right"></b-icon></b-avatar>
|
||||
<b-avatar><b-icon icon="plus"></b-icon></b-avatar>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Favourites',
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="rightside-last-transactions">
|
||||
<b-row>
|
||||
<b-col>Letzte Transaktionen:</b-col>
|
||||
<b-col cols="1" class="text-right">
|
||||
<b-icon icon="three-dots-vertical"></b-icon>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- {{ transactions }} -->
|
||||
<div class="d-flex mt-3 mb-3" v-for="transaction in transactions" :key="transaction.id">
|
||||
<div class="mr-3"><b-avatar></b-avatar></div>
|
||||
<div class="d-inline">
|
||||
<div>{{ transaction.typeId }}</div>
|
||||
<div>{{ transaction.amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'LastTransactions',
|
||||
props: {
|
||||
transactions: {
|
||||
default: () => [],
|
||||
},
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
transactionLinkCount: { type: Number, default: 0 },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="top-storys-by-month">TopStorysByMonth components</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopStorysByMonth',
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="top-storys-by-month">YourOverview components</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'YourOverview',
|
||||
}
|
||||
</script>
|
||||
@ -44,13 +44,18 @@
|
||||
<b-row class="d-lg-flex" cols="12">
|
||||
<!-- ContentHeader -->
|
||||
<b-col>
|
||||
<content-header />
|
||||
<content-header :balance="balance" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<!-- RideSide Mobil -->
|
||||
<!-- Right Side Mobil -->
|
||||
<b-col class="d-block d-lg-none">
|
||||
<right-side />
|
||||
{{ transactions }}
|
||||
<right-side
|
||||
:transactions="transactions"
|
||||
:transactionCount="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
/>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<div class="main-content mt-3">
|
||||
@ -72,8 +77,12 @@
|
||||
</b-row>
|
||||
</b-col>
|
||||
<!-- RightSide Desktop -->
|
||||
<b-col cols="2" class="d-none d-lg-block" align-self="stretch">
|
||||
<right-side />
|
||||
<b-col cols="3" class="d-none d-lg-block" align-self="stretch">
|
||||
<right-side
|
||||
:transactions="transactions"
|
||||
:transactionCount="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
|
||||
@ -4,30 +4,51 @@
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col cols="5">
|
||||
<div class="p-4 bg-light rounded">a overview</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<gdd-amount :balance="balance" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<div class="p-4 bg-light rounded">b overview</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<community-member />
|
||||
</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 === '/favourites'">Deine Favoriten im Überblick</b-container>
|
||||
<b-container v-if="path === '/send'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-light rounded">a send</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<gdd-amount :balance="balance" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-light rounded">b send</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<gdt-amount />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/transactions'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<gdd-amount :balance="balance" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<gdt-amount />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/transactions'">transactions content header</b-container>
|
||||
<b-container v-if="path === '/profile'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">
|
||||
<div class="p-4 bg-white shadow 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>
|
||||
@ -47,8 +68,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GddAmount from '@/components/Template/ContentHeader/GddAmount.vue'
|
||||
import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
|
||||
import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
|
||||
export default {
|
||||
name: 'ContentHeader',
|
||||
components: {
|
||||
GddAmount,
|
||||
GdtAmount,
|
||||
CommunityMember,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, required: true },
|
||||
},
|
||||
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
|
||||
@ -3,15 +3,19 @@
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a ride side overview</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<favourites />
|
||||
</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 class="p-4 bg-white shadow rounded h-100">
|
||||
<last-transactions
|
||||
:transactions="transactions"
|
||||
:transactionCount="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
/>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -19,15 +23,15 @@
|
||||
<b-container v-if="path === '/storys'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a storys ride side</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<favourites />
|
||||
</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 class="p-4 bg-white shadow rounded h-100">
|
||||
<top-storys-by-month />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -36,28 +40,76 @@
|
||||
<b-container v-if="path === '/send'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-light rounded">a ride side send</div>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<favourites />
|
||||
</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 class="p-4 bg-white shadow rounded h-100">
|
||||
<last-transactions />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/transactions'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-white shadow rounded">
|
||||
<favourites />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3 mt-lg-5">
|
||||
<b-col>
|
||||
<div class="p-4 bg-white shadow rounded h-100">
|
||||
<last-transactions />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/profile'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-white rounded">
|
||||
<favourites />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3 mt-lg-5">
|
||||
<b-col>
|
||||
<div class="p-4 bg-white shadow rounded h-100">
|
||||
<your-overview />
|
||||
</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>
|
||||
<b-container v-if="path === '/settings'">settings ride side</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
|
||||
import Favourites from '@/components/Template/RightSide/Favourites.vue'
|
||||
import TopStorysByMonth from '@/components/Template/RightSide/TopStorysByMonth.vue'
|
||||
import YourOverview from '@/components/Template/RightSide/YourOverview.vue'
|
||||
|
||||
export default {
|
||||
name: 'RightSide',
|
||||
components: {
|
||||
LastTransactions,
|
||||
Favourites,
|
||||
TopStorysByMonth,
|
||||
YourOverview,
|
||||
},
|
||||
props: {
|
||||
transactions: {
|
||||
default: () => [],
|
||||
},
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
transactionLinkCount: { type: Number, default: 0 },
|
||||
},
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<community-news class="mb-5 shadow" />
|
||||
<gdd-transaction-list
|
||||
:transactions="transactions"
|
||||
:pageSize="5"
|
||||
@ -8,7 +9,6 @@
|
||||
:transaction-count="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
:pending="pending"
|
||||
@update-transactions="updateTransactions"
|
||||
v-on="$listeners"
|
||||
/>
|
||||
<gdd-transaction-list-footer :count="transactionCount" />
|
||||
@ -16,12 +16,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CommunityNews from '@/components/Overview/CommunityNews.vue'
|
||||
import GddTransactionList from '@/components/GddTransactionList.vue'
|
||||
import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
|
||||
|
||||
export default {
|
||||
name: 'Overview',
|
||||
components: {
|
||||
CommunityNews,
|
||||
GddTransactionList,
|
||||
GddTransactionListFooter,
|
||||
},
|
||||
@ -42,9 +44,9 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
// updateTransactions(pagination) {
|
||||
// this.$emit('update-transactions', pagination)
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user