mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
contribution style nav
This commit is contained in:
ogerly
parent
320d3a8593
commit
7a5fcd9ea6
@ -4,10 +4,19 @@
|
||||
<div class="">
|
||||
<b-row>
|
||||
<b-col cols="2">
|
||||
<b-avatar :icon="icon" :variant="variant" size="4em"></b-avatar>
|
||||
<b-avatar
|
||||
v-if="firstName"
|
||||
:text="avatarText"
|
||||
:badge-variant="variant"
|
||||
size="4em"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
<template #badge><b-icon :icon="icon"></b-icon></template>
|
||||
</b-avatar>
|
||||
<b-avatar v-else :icon="icon" :variant="variant" size="4em"></b-avatar>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div v-if="firstName" class="mr-3">{{ firstName }} {{ lastName }}</div>
|
||||
<div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
|
||||
<div class="small">
|
||||
{{ $d(new Date(contributionDate), 'monthAndYear') }}
|
||||
</div>
|
||||
@ -23,7 +32,7 @@
|
||||
</b-col>
|
||||
<b-col cols="3">
|
||||
<div class="small">{{ $t('creation') }}</div>
|
||||
<div class="small">{{ amount | GDD }}</div>
|
||||
<div class="font-weight-bold h2">{{ amount | GDD }}</div>
|
||||
</b-col>
|
||||
<b-col cols="1" @click="visible = !visible">
|
||||
<collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
|
||||
@ -253,6 +262,9 @@ export default {
|
||||
collapsId() {
|
||||
return 'collapse' + String(this.id)
|
||||
},
|
||||
avatarText() {
|
||||
return this.firstName[0] + this.lastName[0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
deleteContribution(item) {
|
||||
|
||||
@ -4,6 +4,42 @@
|
||||
<b-card class="p-0 m-0 appBoxShadow gradido-border-radius">
|
||||
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
|
||||
<b-form-radio-group v-model="radioSelected">
|
||||
<b-row class="mb-4">
|
||||
<b-col>
|
||||
<b-row class="bg-secondary gradido-border-radius p-2">
|
||||
<b-col cols="9">{{ $t('send_gdd') }}</b-col>
|
||||
<b-col cols="3">
|
||||
<b-form-radio
|
||||
name="shipping"
|
||||
size="lg"
|
||||
:value="sendTypes.send"
|
||||
stacked
|
||||
></b-form-radio>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-row class="bg-secondary gradido-border-radius p-2">
|
||||
<b-col cols="9">{{ $t('send_per_link') }}</b-col>
|
||||
<b-col cols="3">
|
||||
<b-form-radio
|
||||
name="shipping"
|
||||
:value="sendTypes.link"
|
||||
size="lg"
|
||||
></b-form-radio>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link">
|
||||
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
|
||||
<div>
|
||||
{{ $t('gdd_per_link.choose-amount') }}
|
||||
</div>
|
||||
</div>
|
||||
</b-form-radio-group>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-row>
|
||||
@ -15,46 +51,9 @@
|
||||
:placeholder="$t('form.email')"
|
||||
v-model="form.email"
|
||||
/>
|
||||
<!-- <validation-provider
|
||||
name="Email"
|
||||
:rules="{
|
||||
required: radioSelected === sendTypes.send ? true : false,
|
||||
email: true,
|
||||
is_not: $store.state.email,
|
||||
}"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
|
||||
<b-input-group
|
||||
id="input-group-1"
|
||||
class="border border-default border-radius"
|
||||
description="We'll never share your email with anyone else."
|
||||
size="lg"
|
||||
>
|
||||
<b-input-group-prepend class="d-none d-md-block">
|
||||
<b-icon icon="envelope" class="display-4 m-3"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="input-1"
|
||||
v-model="form.email"
|
||||
v-focus="emailFocused"
|
||||
@focus="emailFocused = true"
|
||||
@blur="normalizeEmail()"
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
class="pl-3 gradido-font-large"
|
||||
:disabled="isBalanceDisabled"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<b-col v-if="errors">
|
||||
<span v-for="error in errors" :key="error" class="errors">
|
||||
{{ error }}
|
||||
</span>
|
||||
</b-col>
|
||||
</validation-provider> -->
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-col cols="6">
|
||||
<input-amount
|
||||
v-model="form.amount"
|
||||
:name="$t('form.amount')"
|
||||
@ -63,76 +62,9 @@
|
||||
:rules="{ required: true, gddSendAmount: [0.01, balance] }"
|
||||
typ="TransactionForm"
|
||||
></input-amount>
|
||||
|
||||
<!-- <validation-provider
|
||||
:name="$t('form.amount')"
|
||||
:rules="{
|
||||
required: true,
|
||||
gddSendAmount: [0.01, balance],
|
||||
}"
|
||||
v-slot="{ errors, valid }"
|
||||
>
|
||||
<label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
|
||||
<b-input-group
|
||||
id="input-group-2"
|
||||
class="border border-default border-radius"
|
||||
size="lg"
|
||||
>
|
||||
<b-input-group-prepend class="p-2 d-none d-md-block">
|
||||
<div class="m-1 mt-2">{{ $t('GDD') }}</div>
|
||||
</b-input-group-prepend>
|
||||
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="form.amount"
|
||||
type="text"
|
||||
v-focus="amountFocused"
|
||||
@focus="amountFocused = true"
|
||||
@blur="normalizeAmount(valid)"
|
||||
:placeholder="$n(0.01)"
|
||||
class="pl-3 gradido-font-large"
|
||||
:disabled="isBalanceDisabled"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<b-col v-if="errors">
|
||||
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
||||
</b-col>
|
||||
</validation-provider> -->
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="h3">{{ $t('sendMethod') }}</div>
|
||||
<b-form-radio-group v-model="radioSelected">
|
||||
<b-row>
|
||||
<b-col cols="9">{{ $t('send_gdd') }}</b-col>
|
||||
<b-col cols="3">
|
||||
<b-form-radio
|
||||
name="shipping"
|
||||
size="lg"
|
||||
:value="sendTypes.send"
|
||||
stacked
|
||||
></b-form-radio>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="9">{{ $t('send_per_link') }}</b-col>
|
||||
<b-col cols="3">
|
||||
<b-form-radio
|
||||
name="shipping"
|
||||
:value="sendTypes.link"
|
||||
size="lg"
|
||||
></b-form-radio>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div class="mt-4" v-if="radioSelected === sendTypes.link">
|
||||
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
|
||||
<div>
|
||||
{{ $t('gdd_per_link.choose-amount') }}
|
||||
</div>
|
||||
</div>
|
||||
</b-form-radio-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
@ -144,32 +76,6 @@
|
||||
:placeholder="$t('form.message')"
|
||||
:rules="{ required: true, min: 5, max: 255 }"
|
||||
/>
|
||||
<!-- <validation-provider
|
||||
:rules="{
|
||||
required: true,
|
||||
min: 5,
|
||||
max: 255,
|
||||
}"
|
||||
:name="$t('form.message')"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<label class="input-3" for="input-3">{{ $t('form.message') }}</label>
|
||||
<b-input-group id="input-group-3" class="border border-default border-radius">
|
||||
<b-input-group-prepend class="d-none d-md-block">
|
||||
<b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-textarea
|
||||
id="input-3"
|
||||
rows="3"
|
||||
v-model="form.memo"
|
||||
class="pl-3 gradido-font-large"
|
||||
:disabled="isBalanceDisabled"
|
||||
></b-form-textarea>
|
||||
</b-input-group>
|
||||
<b-col v-if="errors">
|
||||
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
||||
</b-col>
|
||||
</validation-provider> -->
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div v-if="!!isBalanceDisabled" class="text-danger mt-5">
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<b-icon icon="person" aria-hidden="true"></b-icon>
|
||||
<span class="ml-2">{{ $t('navigation.profile') }}</span>
|
||||
</b-nav-item> -->
|
||||
<b-nav-item to="/community" class="mb-3" active-class="activeRoute">
|
||||
<b-nav-item to="/community#my" class="mb-3" active-class="activeRoute">
|
||||
<b-icon icon="people" aria-hidden="true"></b-icon>
|
||||
<span class="ml-2">{{ $t('navigation.members') }}</span>
|
||||
</b-nav-item>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="nav-community">
|
||||
<div class="d-flex justify-content-center">
|
||||
<b-button variant="gradido" class="rounded-right" to="#edit">
|
||||
{{ $t('community.submitContribution') }}
|
||||
</b-button>
|
||||
<b-button variant="gradido" class="rounded-0" to="#my">
|
||||
{{ $t('community.myContributions') }}
|
||||
</b-button>
|
||||
<b-button variant="gradido" class="rounded-left" to="#all">
|
||||
{{ $t('community.community') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<b-row class="nav-row">
|
||||
<b-col>
|
||||
<router-link to="#edit">{{ $t('community.submitContribution') }}</router-link>
|
||||
</b-col>
|
||||
<b-col class="text-center">
|
||||
<router-link to="#my">{{ $t('community.myContributions') }}</router-link>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<router-link to="#all">{{ $t('community.community') }}</router-link>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -18,3 +18,19 @@ export default {
|
||||
name: 'NavCommunity',
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.nav-row {
|
||||
background-color: rgb(209, 209, 209);
|
||||
padding: 10px;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.router-link-exact-active {
|
||||
background-color: rgb(14, 121, 188);
|
||||
color: white;
|
||||
border-radius: 26px;
|
||||
padding: 10px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user