IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings header data style

Browse Source
This commit is contained in:
ogerly 2023-01-16 15:34:29 +01:00
parent 51d20d4d5b
commit 067ed3652b
2 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/components/UserSettings/UserCard.vue
View File

@ -1,41 +1,46 @@
<template>
<div class="userdata-card">
<b-row>
<b-col class="centerPerMargin">
<avatar
:username="username.username"
:initials="username.initials"
:color="'#fff'"
:size="90"
></avatar>
</b-col>
</b-row>
<b-card class="border-0">
<b-container class="justify-content-center mt-md-5">
<b-row>
<b-col>
<div class="text-center font-weight-bold">
{{ $n(balance, 'decimal') }}
</div>
<div class="text-center">{{ $t('GDD') }}</div>
</b-col>
<b-col>
<div class="text-center font-weight-bold">
{{ transactionCount }}
</div>
<div class="text-center">
{{ $t('navigation.transactions') }}
</div>
</b-col>
<b-col>
<div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
<div class="text-center">
{{ $t('community.community') }}
</div>
</b-col>
</b-row>
</b-container>
</b-card>
<div class="centerPerMargin">
<avatar
:username="username.username"
:initials="username.initials"
:color="'#fff'"
:size="90"
></avatar>
</div>
<div class="justify-content-center mt-5 mb-5">
<b-row align-v="stretch">
<b-col cols="4">
<div class="text-center font-weight-bold">
{{ $n(balance, 'decimal') }}
</div>
</b-col>
<b-col cols="4">
<div class="text-center font-weight-bold">
{{ transactionCount }}
</div>
</b-col>
<b-col cols="4">
<div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
</b-col>
</b-row>
<b-row>
<b-col cols="4">
<div class="text-center">{{ $t('GDD') }}</div>
</b-col>
<b-col cols="4">
<div class="text-center">
{{ $t('navigation.transactions') }}
</div>
</b-col>
<b-col cols="4">
<div class="text-center">
{{ $t('community.community') }}
</div>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
@ -70,4 +75,14 @@ export default {
.centerPerMargin {
padding-left: 44%;
}
@media screen and (max-width: 850px) {
.centerPerMargin {
padding-left: 38%;
}
}
@media screen and (max-width: 450px) {
.centerPerMargin {
padding-left: 34%;
}
}
</style>

2
frontend/src/pages/Settings.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container bg-white appBoxShadow gradido-border-radius p-3 mt--3">
<div class="container bg-white appBoxShadow p-3 mt--3">
<user-card :balance="balance" :transactionCount="transactionCount"></user-card>
<user-data />
<hr />