From 4711a04b86311d4a82ed05962ef9c0448fa63da6 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Thu, 20 Jan 2022 15:51:16 +0100
Subject: [PATCH] improve responsiveness when displaying a member
---
components/member/Card.vue | 40 +++++++++++++++++++++++++++-----------
pages/membres/_hash.vue | 4 ++--
2 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 8ce23fb..525207b 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -65,16 +65,34 @@ export default {
}
</script>
-<style lang="sass" scoped>
-.member
- th
- text-align: right
+<style lang="scss">
+.member {
+ .table {
+ text-align: center;
+ width: auto;
+ margin: auto;
+
+ tr {
+ display: flex;
+ flex-direction: column;
+
+
+ }
+ }
+
+
+}
+
+@media (min-width:576px) {
+ .member {
+ .table {
+ tr {display: table-row;}
+ th {text-align: right;}
+ td {text-align: left;}
+
+ }
+ }
+}
+
-.table
- width: auto
- margin: auto
- td
- min-width: 200px
- th
- min-width: 250px
</style>
\ No newline at end of file
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index 5083590..035bc02 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -19,13 +19,13 @@
<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') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ ' + ' + nbCertifsPending('received') }}</span>)
+ }">{{ $t('certifications.recues') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ ' + ' + nbCertifsPending('received') }}</span>)
<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') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ ' + ' + nbCertifsPending('sent') }}</span>)</h3>
+ <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ ' + ' + nbCertifsPending('sent') }}</span>)</h3>
<CertifList :certifs="idFromHash.sent_certifications" type="sent" />
</div>
</div>
--
GitLab