Skip to content
Snippets Groups Projects
Commit eecaa517 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER
Browse files

improve display for smartphones

parent 899972ae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/member/Card.vue
+ 51
− 51
View file @ eecaa517
......@@ -6,51 +6,53 @@
<BadgeStatus :membre="hash" />
</h2>
<div class="card-subtitle mb-2 text-muted text-center">{{ hash.pubkey }}</div>
<table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
<tbody>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.referent') }} :</th>
<td :class="{'list-group-item-success': isReferent, 'list-group-item-warning': !isReferent}">{{ isReferent ? $t('oui') : $t('non') }}</td>
</tr>
<tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">{{ $t('membre.qualite') }} :</th>
<td :class="{
'list-group-item-success': hash.quality.ratio >= 80,
'list-group-item-warning': hash.quality.ratio < 80,
}">{{ Math.round(hash.quality.ratio*100)/100 }}</td>
</tr>
<tr>
<th scope="row">{{ $t('membre.distance') }} :</th>
<td :class="{
'list-group-item-success': hash.status != 'NEWCOMER' ? hash.distance.dist_ok : hash.distanceE.dist_ok,
'list-group-item-danger': hash.status != 'NEWCOMER' ? !hash.distance.dist_ok : !hash.distanceE.dist_ok,
}">{{ hash.status != 'NEWCOMER' ? Math.round(hash.distance.value.ratio*100)/100 : Math.round(hash.distanceE.value.ratio*100)/100 }}</td>
</tr>
<tr>
<th scope="row">{{ hash.status != 'MISSING' ? $t('membre.datelimadhesion') : $t('membre.datelimrevoc')}} :</th>
<td :class="hash.status != 'MISSING' ? 'list-group-item-'+ $options.filters.dateStatus(hash.limitDate) : 'list-group-item-danger'">{{ $d(new Date(hash.limitDate*1000), 'long') }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.datemanquecertifs') }} :</th>
<td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ $d(new Date(hash.received_certifications.limit*1000), 'long') }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.dispocertif') }} :</th>
<td :class="{
'list-group-item-success': hash.minDatePassed,
'list-group-item-danger': !hash.minDatePassed,
}">{{ hash.minDatePassed ? $t('oui') : $t('non') }} <small v-if="!hash.minDatePassed">( > {{ $d(new Date(hash.minDate*1000), 'long') }} )</small></td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.nb_certifs') }} :</th>
<td :class="{
'list-group-item-success': hash.sent_certifications.length<=80,
'list-group-item-warning': hash.sent_certifications.length>80,
'list-group-item-danger': hash.sent_certifications.length>90,
}">{{ 100-hash.sent_certifications.length }}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
<tbody>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.referent') }}&nbsp;:</th>
<td :class="{'list-group-item-success': hash.sentry, 'list-group-item-warning': !hash.sentry}">{{ hash.sentry ? $t('oui') : $t('non') }}</td>
</tr>
<tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">{{ $t('membre.qualite') }}&nbsp;:</th>
<td :class="{
'list-group-item-success': hash.quality.ratio >= 80,
'list-group-item-warning': hash.quality.ratio < 80,
}">{{ Math.round(hash.quality.ratio*100)/100 }}</td>
</tr>
<tr>
<th scope="row">{{ $t('membre.distance') }}&nbsp;:</th>
<td :class="{
'list-group-item-success': hash.status != 'NEWCOMER' ? hash.distance.dist_ok : hash.distanceE.dist_ok,
'list-group-item-danger': hash.status != 'NEWCOMER' ? !hash.distance.dist_ok : !hash.distanceE.dist_ok,
}">{{ hash.status != 'NEWCOMER' ? Math.round(hash.distance.value.ratio*100)/100 : Math.round(hash.distanceE.value.ratio*100)/100 }}</td>
</tr>
<tr>
<th scope="row">{{ hash.status != 'MISSING' ? $t('membre.datelimadhesion') : $t('membre.datelimrevoc')}}&nbsp;:</th>
<td :class="hash.status != 'MISSING' ? 'list-group-item-'+ $options.filters.dateStatus(hash.limitDate) : 'list-group-item-danger'">{{ $d(new Date(hash.limitDate*1000), 'long') }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.datemanquecertifs') }}&nbsp;:</th>
<td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ $d(new Date(hash.received_certifications.limit*1000), 'long') }}</td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.dispocertif') }}&nbsp;:</th>
<td :class="{
'list-group-item-success': hash.minDatePassed,
'list-group-item-danger': !hash.minDatePassed,
}">{{ hash.minDatePassed ? $t('oui') : $t('non') }} <small v-if="!hash.minDatePassed">( > {{ $d(new Date(hash.minDate*1000), 'long') }} )</small></td>
</tr>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">{{ $t('membre.nb_certifs') }}&nbsp;:</th>
<td :class="{
'list-group-item-success': hash.sent_certifications.length<=80,
'list-group-item-warning': hash.sent_certifications.length>80,
'list-group-item-danger': hash.sent_certifications.length>90,
}">{{ 100-hash.sent_certifications.length }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
......@@ -59,13 +61,7 @@
export default {
props: {
hash: Object
},
computed: {
isReferent () {
const nb_certifs_referent = 5
return this.hash.received_certifications.certifications.length > nb_certifs_referent && this.hash.sent_certifications.length > nb_certifs_referent
}
},
}
</script>
......@@ -77,4 +73,8 @@ export default {
.table
width: auto
margin: auto
td
min-width: 200px
th
min-width: 250px
</style>
\ No newline at end of file
components/navigation/menu/Sidebar.vue
+ 1
− 1
View file @ eecaa517
......@@ -2,7 +2,7 @@
<aside class="menu shadow position-fixed">
<div class="nav_header pb-3 mb-5">
<nuxt-link :to="localePath('/')" class="d-flex">
<div><img src="@/assets/img/logo.png" alt="Accueil" class="logo"></div>
<img src="@/assets/img/logo.png" alt="Accueil" class="logo">
<div><h1 class="h2">Wotwizard</h1><small class="text-muted">{{ $t('slogan') }}</small></div>
</nuxt-link>
<button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">
......
pages/membres/_hash.vue
+ 21
− 17
View file @ eecaa517
<template>
<main class="container">
<main>
<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
<transition name="fade">
<div class="alert alert-danger" v-if="error">{{ error }}</div>
</transition>
<transition name="fade">
<div v-if="idFromHash">
<div class="row">
<div class="col-md-8 col-lg-6 mx-auto mt-3">
<MemberCard :hash="idFromHash" />
<div class="container-md">
<div class="row">
<div class="col-lg-9 col-xl-8 mx-auto mt-3">
<MemberCard :hash="idFromHash" />
</div>
</div>
</div>
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
<div class="col-md-8 col-lg-6 col-xl-5 mb-3 mx-auto">
<h3 class="h4 text-center" :class="{
'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
}">{{ $t('certifications.recues') }} ({{ idFromHash.received_certifications.certifications.length }})
<BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
</h3>
<CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
</div>
<div class="col-md-8 col-lg-6 col-xl-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
<h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
<CertifList :certifs="idFromHash.sent_certifications" type="sent" />
<div class="container">
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
<div class="col-sm-10 col-md-7 col-lg-5 mb-3 mx-auto">
<h3 class="h4 text-center" :class="{
'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
}">{{ $t('certifications.recues') }} ({{ idFromHash.received_certifications.certifications.length }})
<BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
</h3>
<CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
</div>
<div class="col-sm-10 col-md-7 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
<h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
<CertifList :certifs="idFromHash.sent_certifications" type="sent" />
</div>
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment