Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases 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

27
js/src/views/Event/Participants.vue
View File

@ -3,9 +3,10 @@
<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>
<template>
<section v-if="participantsAndCreators.length > 0"> <section v-if="participantsAndCreators.length > 0">
<h2 class="title">{{ $t('Participants') }}</h2> <h2 class="title">{{ $t('Participants') }}</h2>
<div class="columns"> <div class="columns">
@ -19,12 +20,14 @@
</div> </div>
</div> </div>
</section> </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>
<template>
<section v-if="queue.length > 0"> <section v-if="queue.length > 0">
<h2 class="title">{{ $t('Waiting list') }}</h2> <h2 class="title">{{ $t('Waiting list') }}</h2>
<div class="columns"> <div class="columns">
@ -38,12 +41,14 @@
</div> </div>
</div> </div>
</section> </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>
<template>
<section v-if="rejected.length > 0"> <section v-if="rejected.length > 0">
<h2 class="title">{{ $t('Rejected participations') }}</h2> <h2 class="title">{{ $t('Rejected participations') }}</h2>
<div class="columns"> <div class="columns">
@ -57,6 +62,7 @@
</div> </div>
</div> </div>
</section> </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 lang="scss">
nav.tabs li {
margin: 3rem 0 0;
}
.tab-content {
background: #fff;
} }
</style> </style>