mobile contribution list style

This commit is contained in:
ogerly 2022-12-30 12:35:08 +01:00
parent e76d4084d6
commit 52c28410fd
6 changed files with 31 additions and 29 deletions

View File

@ -5,7 +5,7 @@
:class="state === 'IN_PROGRESS' ? 'pulse border border-205' : ''" :class="state === 'IN_PROGRESS' ? 'pulse border border-205' : ''"
> >
<b-row> <b-row>
<b-col cols="2"> <b-col cols="3" lg="2" md="2">
<avatar <avatar
v-if="firstName" v-if="firstName"
:username="username.username" :username="username.username"
@ -30,11 +30,11 @@
</div> </div>
<div class="small">createdAt {{ createdAt }}</div> --> <div class="small">createdAt {{ createdAt }}</div> -->
</b-col> </b-col>
<b-col cols="3"> <b-col cols="12" lg="3" offset="3" offset-md="0" offset-lg="0">
<div class="small">{{ $t('creation') }}</div> <div class="small">{{ $t('creation') }}</div>
<div class="font-weight-bold">{{ amount | GDD }}</div> <div class="font-weight-bold">{{ amount | GDD }}</div>
</b-col> </b-col>
<b-col cols="1" class="align-items-center"> <b-col cols="12" md="1" lg="1" class="text-right align-items-center">
<div v-if="messagesCount > 0" @click="visible = !visible"> <div v-if="messagesCount > 0" @click="visible = !visible">
<collapse-icon class="text-right" :visible="visible" /> <collapse-icon class="text-right" :visible="visible" />
</div> </div>
@ -44,17 +44,18 @@
v-if="(!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0" v-if="(!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0"
class="p-2" class="p-2"
> >
<b-col cols="auto" class="mr-auto"> <b-col cols="3" class="mr-auto text-center">
<div <div
v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution" v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
class="test-delete-contribution pointer mr-3" class="test-delete-contribution pointer mr-3"
@click="deleteContribution({ id })" @click="deleteContribution({ id })"
> >
<b-icon icon="trash"></b-icon> <b-icon icon="trash"></b-icon>
{{ $t('delete') }}
<div>{{ $t('delete') }}</div>
</div> </div>
</b-col> </b-col>
<b-col cols="auto"> <b-col cols="3" class="text-center">
<div <div
v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution" v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
class="test-edit-contribution pointer mr-3" class="test-edit-contribution pointer mr-3"
@ -72,13 +73,14 @@
</div> </div>
</b-col> </b-col>
<b-col cols="auto"> <b-col cols="6" class="text-center">
<div v-if="messagesCount > 0" class="pointer" @click="visible = !visible"> <div v-if="messagesCount > 0" class="pointer" @click="visible = !visible">
<b-icon icon="chat-dots"></b-icon> <b-icon icon="chat-dots"></b-icon>
{{ $t('moderatorChat') }} <div>{{ $t('moderatorChat') }}</div>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<div v-else class="pb-3"></div>
<!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`"> <!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
<div> <div>

View File

@ -6,8 +6,8 @@
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
<b-form-radio-group v-model="radioSelected" class="container"> <b-form-radio-group v-model="radioSelected" class="container">
<b-row class="mb-4"> <b-row class="mb-4">
<b-col> <b-col cols="12" lg="6">
<b-row class="bg-248 gradido-border-radius pt-2 mr-2"> <b-row class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
<b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer"> <b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer">
{{ $t('send_gdd') }} {{ $t('send_gdd') }}
</b-col> </b-col>
@ -23,7 +23,7 @@
</b-row> </b-row>
</b-col> </b-col>
<b-col> <b-col>
<b-row class="bg-248 gradido-border-radius pt-2 ml-2"> <b-row class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
<b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer"> <b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer">
{{ $t('send_per_link') }} {{ $t('send_per_link') }}
</b-col> </b-col>
@ -59,7 +59,7 @@
/> />
</div> </div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="12" lg="6">
<input-amount <input-amount
v-model="form.amount" v-model="form.amount"
:name="$t('form.amount')" :name="$t('form.amount')"

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="community-member"> <div class="community-member mt-3 mt-lg-0">
<div class="text-center"> <div class="text-center">
<b-badge class="position-absolute mt--2 ml--5 px-3" variant="success"> <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">
{{ $t('member') }} {{ $t('member') }}
@ -9,11 +9,11 @@
class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success" class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
> >
<b-row> <b-row>
<b-col cols="12" md="8" lg="8"> <b-col cols="9">
<div class="h4">{{ $t('community.communityMember') }}</div> <div class="h4">{{ $t('community.communityMember') }}</div>
<div>{{ CONFIG.COMMUNITY_NAME }}</div> <div>{{ CONFIG.COMMUNITY_NAME }}</div>
</b-col> </b-col>
<b-col cols="12" md="4" lg="4" align-self="end" class="border-left border-light"> <b-col cols="3" align-self="end" class="border-left border-light">
<b-icon icon="people"></b-icon> <b-icon icon="people"></b-icon>
{{ totalUsers }} {{ totalUsers }}
</b-col> </b-col>

View File

@ -31,7 +31,7 @@
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="12" md="10" lg="10"> <b-col cols="9">
<b-icon <b-icon
icon="layers" icon="layers"
class="mr-3 gradido-global-border-color-accent d-none d-lg-inline" class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"
@ -43,7 +43,7 @@
{{ balance | GDD }} {{ balance | GDD }}
</span> </span>
</b-col> </b-col>
<b-col cols="12" md="2" lg="2" class="border-left border-light"> <b-col cols="3" class="border-left border-light">
<b-icon <b-icon
:icon="hideAmount ? 'eye-slash' : 'eye'" :icon="hideAmount ? 'eye-slash' : 'eye'"
class="mr-3 gradido-global-border-color-accent pointer hover-icon" class="mr-3 gradido-global-border-color-accent pointer hover-icon"

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="gdt-amount mt-3 mt-lg-0">
<div class="gdt-amount text-center"> <div class="text-center">
<b-badge <b-badge
v-if="badgeShow" v-if="badgeShow"
class="position-absolute mt--2 ml--4 px-3 zindex1" class="position-absolute mt--2 ml--4 px-3 zindex1"
@ -26,7 +26,7 @@
</b-col> --> </b-col> -->
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="12" md="10" lg="10"> <b-col cols="9">
<b-icon <b-icon
icon="layers" icon="layers"
class="mr-3 gradido-global-border-color-accent d-none d-lg-inline" class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"
@ -38,7 +38,7 @@
{{ $n(GdtBalance, 'decimal') }} {{ $t('GDT') }} {{ $n(GdtBalance, 'decimal') }} {{ $t('GDT') }}
</span> </span>
</b-col> </b-col>
<b-col cols="12" md="2" lg="2" class="border-left border-light"> <b-col cols="3" class="border-left border-light">
<b-icon <b-icon
:icon="hideAmount ? 'eye-slash' : 'eye'" :icon="hideAmount ? 'eye-slash' : 'eye'"
class="mr-3 gradido-global-border-color-accent pointer hover-icon" class="mr-3 gradido-global-border-color-accent pointer hover-icon"

View File

@ -2,12 +2,12 @@
<div> <div>
<div v-if="path === '/overview'"> <div v-if="path === '/overview'">
<b-row> <b-row>
<b-col cols="5"> <b-col cols="12" lg="5">
<div> <div>
<gdd-amount :balance="balance" :showStatus="false" :path="path" :badgeShow="false" /> <gdd-amount :balance="balance" :showStatus="false" :path="path" :badgeShow="false" />
</div> </div>
</b-col> </b-col>
<b-col cols="7"> <b-col cols="12" lg="7">
<div> <div>
<community-member :totalUsers="totalUsers" /> <community-member :totalUsers="totalUsers" />
</div> </div>
@ -18,12 +18,12 @@
<div v-if="path === '/addresses'"></div> --> <div v-if="path === '/addresses'"></div> -->
<div v-if="path === '/send'"> <div v-if="path === '/send'">
<b-row> <b-row>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<gdd-amount :balance="balance" :badge="true" :showStatus="true" :badgeShow="false" /> <gdd-amount :balance="balance" :badge="true" :showStatus="true" :badgeShow="false" />
</div> </div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<router-link to="gdt"> <router-link to="gdt">
<gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" /> <gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
@ -34,14 +34,14 @@
</div> </div>
<div v-if="path === '/transactions'"> <div v-if="path === '/transactions'">
<b-row> <b-row>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<router-link to="transactions"> <router-link to="transactions">
<gdd-amount :balance="balance" :showStatus="true" /> <gdd-amount :balance="balance" :showStatus="true" />
</router-link> </router-link>
</div> </div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<router-link to="gdt"> <router-link to="gdt">
<gdt-amount :GdtBalance="GdtBalance" /> <gdt-amount :GdtBalance="GdtBalance" />
@ -52,14 +52,14 @@
</div> </div>
<div v-if="path === '/gdt'"> <div v-if="path === '/gdt'">
<b-row> <b-row>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<router-link to="transactions"> <router-link to="transactions">
<gdd-amount :balance="balance" :showStatus="false" /> <gdd-amount :balance="balance" :showStatus="false" />
</router-link> </router-link>
</div> </div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="12" lg="6">
<div> <div>
<router-link to="gdt"> <router-link to="gdt">
<gdt-amount :badge="true" :showStatus="true" :GdtBalance="GdtBalance" /> <gdt-amount :badge="true" :showStatus="true" :GdtBalance="GdtBalance" />