potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Fix participants panel icons and improve tabs

Browse source 
Close #198

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-09 17:03:35 +02:00
parent 5b1b7ee164
commit c565076fac
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
1 changed files with 60 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
js/src/views/Event/Participants.vue
View file

@ -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>