Fix participants panel icons and improve tabs
Close #198 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
5b1b7ee164
commit
c565076fac
@ -3,60 +3,66 @@
|
|||||||
<b-tabs type="is-boxed" v-if="event">
|
<b-tabs type="is-boxed" v-if="event">
|
||||||
<b-tab-item>
|
<b-tab-item>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<b-icon icon="information-outline"></b-icon>
|
<b-icon icon="account-multiple"></b-icon>
|
||||||
<span>{{ $t('Participants')}} <b-tag rounded> {{ participantStats.approved }} </b-tag> </span>
|
<span>{{ $t('Participants')}} <b-tag rounded> {{ participantStats.approved }} </b-tag> </span>
|
||||||
</template>
|
</template>
|
||||||
<section v-if="participantsAndCreators.length > 0">
|
<template>
|
||||||
<h2 class="title">{{ $t('Participants') }}</h2>
|
<section v-if="participantsAndCreators.length > 0">
|
||||||
<div class="columns">
|
<h2 class="title">{{ $t('Participants') }}</h2>
|
||||||
<div class="column is-one-quarter-desktop" v-for="participant in participantsAndCreators" :key="participant.actor.id">
|
<div class="columns">
|
||||||
<participant-card
|
<div class="column is-one-quarter-desktop" v-for="participant in participantsAndCreators" :key="participant.actor.id">
|
||||||
:participant="participant"
|
<participant-card
|
||||||
:accept="acceptParticipant"
|
:participant="participant"
|
||||||
:reject="refuseParticipant"
|
:accept="acceptParticipant"
|
||||||
:exclude="refuseParticipant"
|
:reject="refuseParticipant"
|
||||||
/>
|
:exclude="refuseParticipant"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
</b-tab-item>
|
</b-tab-item>
|
||||||
<b-tab-item>
|
<b-tab-item :disabled="participantStats.unapproved === 0">
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<b-icon icon="source-pull"></b-icon>
|
<b-icon icon="account-multiple-plus"></b-icon>
|
||||||
<span>{{ $t('Requests') }} <b-tag rounded> {{ participantStats.unapproved }} </b-tag> </span>
|
<span>{{ $t('Requests') }} <b-tag rounded> {{ participantStats.unapproved }} </b-tag> </span>
|
||||||
</template>
|
</template>
|
||||||
<section v-if="queue.length > 0">
|
<template>
|
||||||
<h2 class="title">{{ $t('Waiting list') }}</h2>
|
<section v-if="queue.length > 0">
|
||||||
<div class="columns">
|
<h2 class="title">{{ $t('Waiting list') }}</h2>
|
||||||
<div class="column is-one-quarter-desktop" v-for="participant in queue" :key="participant.actor.id">
|
<div class="columns">
|
||||||
<participant-card
|
<div class="column is-one-quarter-desktop" v-for="participant in queue" :key="participant.actor.id">
|
||||||
:participant="participant"
|
<participant-card
|
||||||
:accept="acceptParticipant"
|
:participant="participant"
|
||||||
:reject="refuseParticipant"
|
:accept="acceptParticipant"
|
||||||
:exclude="refuseParticipant"
|
:reject="refuseParticipant"
|
||||||
/>
|
:exclude="refuseParticipant"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
</b-tab-item>
|
</b-tab-item>
|
||||||
<b-tab-item>
|
<b-tab-item :disabled="participantStats.rejected === 0">
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<b-icon icon="source-pull"></b-icon>
|
<b-icon icon="account-multiple-minus"></b-icon>
|
||||||
<span>{{ $t('Rejected')}} <b-tag rounded> {{ participantStats.rejected }} </b-tag> </span>
|
<span>{{ $t('Rejected')}} <b-tag rounded> {{ participantStats.rejected }} </b-tag> </span>
|
||||||
</template>
|
</template>
|
||||||
<section v-if="rejected.length > 0">
|
<template>
|
||||||
<h2 class="title">{{ $t('Rejected participations') }}</h2>
|
<section v-if="rejected.length > 0">
|
||||||
<div class="columns">
|
<h2 class="title">{{ $t('Rejected participations') }}</h2>
|
||||||
<div class="column is-one-quarter-desktop" v-for="participant in rejected" :key="participant.actor.id">
|
<div class="columns">
|
||||||
<participant-card
|
<div class="column is-one-quarter-desktop" v-for="participant in rejected" :key="participant.actor.id">
|
||||||
:participant="participant"
|
<participant-card
|
||||||
:accept="acceptParticipant"
|
:participant="participant"
|
||||||
:reject="refuseParticipant"
|
:accept="acceptParticipant"
|
||||||
:exclude="refuseParticipant"
|
:reject="refuseParticipant"
|
||||||
/>
|
:exclude="refuseParticipant"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
</b-tab-item>
|
</b-tab-item>
|
||||||
</b-tabs>
|
</b-tabs>
|
||||||
</main>
|
</main>
|
||||||
@ -231,6 +237,15 @@ export default class Participants extends Vue {
|
|||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
section {
|
section {
|
||||||
padding: 3rem 0;
|
padding: 1rem 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
nav.tabs li {
|
||||||
|
margin: 3rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user