From 7598b3b81c2a700d02a0092057f1eeaf2e3b913f Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Tue, 11 Jan 2022 21:21:11 +0100
Subject: [PATCH] improve UI
---
components/member/Card.vue | 8 ++++++--
components/navigation/Bar.vue | 2 +-
components/navigation/menu/Sidebar.vue | 3 ---
pages/index.vue | 4 ++--
pages/membres/_hash.vue | 10 +++++-----
pages/previsions/futurs_membres.vue | 14 +++++++++-----
6 files changed, 23 insertions(+), 18 deletions(-)
diff --git a/components/member/Card.vue b/components/member/Card.vue
index fc0e575..213468f 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -1,11 +1,11 @@
<template>
<div class="card member">
<div class="card-body">
- <h2 class="card-title">
+ <h2 class="card-title text-center">
{{ hash.uid }}
<BadgeStatus :membre="hash" />
</h2>
- <div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
+ <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'">
@@ -73,4 +73,8 @@ export default {
.member
th
text-align: right
+
+.table
+ width: auto
+ margin: auto
</style>
\ No newline at end of file
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index f149664..5b02697 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -29,7 +29,7 @@ export default {
},
mounted() {
this.isOpen = localStorage.getItem("menu-open")
- if (this.isOpen) {
+ if (this.isOpen == 'true') {
document.querySelector('.app').classList.add('open')
}
}
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index 0d1b09c..6677dc0 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -1,13 +1,10 @@
<template>
<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>
<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">
<span aria-hidden="true">×</span>
</button>
diff --git a/pages/index.vue b/pages/index.vue
index 9822664..edb0d8e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,11 +8,11 @@
<transition name="fade">
<div class="result" v-if="newMembers">
<div class="row text-center">
- <div class="col-lg-4">
+ <div class="col-md-6 col-lg-4">
<h2 class="h4 text-success">{{ $t('bienvenue') }}</h2>
<MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
</div>
- <div class="col-lg-4">
+ <div class="col-md-6 col-lg-4">
<h2 class="h4 text-danger">{{ $t('aurevoir') }}</h2>
<MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
</div>
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index 382e851..b190a0f 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -7,13 +7,13 @@
<transition name="fade">
<div v-if="idFromHash">
<div class="row">
- <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
+ <div class="mx-auto mt-3">
<MemberCard :hash="idFromHash" />
</div>
</div>
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
- <div class="col-sm-8 col-lg-5 mb-3 mx-auto">
- <h3 class="h4" :class="{
+ <div class="col-md-8 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 }})
@@ -21,8 +21,8 @@
</h3>
<CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
</div>
- <div class="col-sm-8 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
- <h3 class="h4">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
+ <div class="col-md-8 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>
diff --git a/pages/previsions/futurs_membres.vue b/pages/previsions/futurs_membres.vue
index 8108d35..db844e8 100644
--- a/pages/previsions/futurs_membres.vue
+++ b/pages/previsions/futurs_membres.vue
@@ -41,8 +41,8 @@
</th>
<td class="p-0">
<div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
- <div>{{ $d(new Date(date.date*1000), 'long') }} {{ $t('time.a') }} {{ $d(new Date(date.date*1000), 'hour') }}</div>
- <div>{{ date.proba * 100 }} %</div>
+ <div class="forecast_date mr-3">{{ $d(new Date(date.date*1000), 'short') }} {{ $t('time.a') }} {{ $d(new Date(date.date*1000), 'hour').replace(" ", " ") }}</div>
+ <div>{{ date.proba * 100 }} %</div>
</div>
</td>
</tr>
@@ -56,12 +56,12 @@
<table class="table table-striped">
<tbody>
<tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date">
- <th scope="row">{{ $d(new Date(forecast.date*1000), 'long') }} {{ $t('time.a') }} {{ $d(new Date(forecast.date*1000), 'hour') }}</th>
+ <th scope="row" class="forecast_date">{{ $d(new Date(forecast.date*1000), 'short') }} {{ $t('time.a') }} {{ $d(new Date(forecast.date*1000), 'hour') }}</th>
<td class="p-0">
<div class="list-group rounded-0">
<nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="localePath('/membres/' + member.member.hash)" v-for="member in forecast.forecasts" :key="member.member.uid">
- <div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
- <div>{{ member.proba * 100 }} %</div>
+ <div class="mr-3">{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
+ <div>{{ member.proba * 100 }} %</div>
</nuxt-link>
</div>
</td>
@@ -190,4 +190,8 @@ export default {
color: var(--text-primary-color);
}
}
+
+.forecast_date {
+ min-width: 150px;
+}
</style>
\ No newline at end of file
--
GitLab