Update about page

src/App.vue

@@ -50,11 +50,13 @@ function toggleLeftDrawer() {
     </q-drawer>
 
     <q-page-container>
-      <router-view v-slot="{ Component }">
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </router-view>
+      <div class="q-pa-sm">
+        <router-view v-slot="{ Component }">
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </router-view>
+      </div>
     </q-page-container>
 
     <q-footer class="bg-grey-8 text-white">

src/views/AboutView.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="q-px-sm">
-    <h3>A propos</h3>
+  <p>
+    Ce site a été créé par les conjurés du temporel. Nous somme une association de jeux de plateaux
+    et jeux de rôle à Angers, France. Visite notre site
+    <a href="https://lesconjuresdutemporel.fr" target="_blank">lesconjuresdutemporel.fr</a> pour en
+    savoir plus. Et si tu habites dans le coins, viens nous voir !
+  </p>
 
-    <p>
-      Ce site a été créé par les conjurés du temporel. Nous somme une association de jeux de
-      plateaux et jeux de rôle à Angers, France. Visite notre site
-      <a href="https://lesconjuresdutemporel.fr" target="_blank">lesconjuresdutemporel.fr</a> pour
-      en savoir plus. Et si tu habites dans le coins, viens nous voir !
-    </p>
+  <p>
+    Une bonne partie des informations affichées dans ce site sont extraites du site Board Game Geek.
+    Tu peux voir notre collection sur
+    <a href="https://boardgamegeek.com/collection/user/lesconjures" target="_blank"
+      >boardgamegeek.com/collection/user/lesconjures</a
+    >.
+  </p>
 
-    <p>
-      Code source sur
-      <a href="https://github.com/sitegui/plateaux-aux-conjures" target="_blank">github.com</a>
-    </p>
-  </div>
+  <p>
+    Le code source de cette application web est disponible sur
+    <a href="https://github.com/sitegui/plateaux-aux-conjures" target="_blank">github.com</a>
+  </p>
 </template>
 
 <style scoped></style>

src/views/GamesView.vue

@@ -14,21 +14,19 @@ const recentGames = computed(() => {
 </script>
 
 <template>
-  <div class="q-pa-sm">
-    <p>
-      Sur cette page tu trouves une liste des jeux récemment joués chez nous et d'autres jeux dans
-      notre collection.
-    </p>
+  <p>
+    Sur cette page tu trouves une liste des jeux récemment joués chez nous et d'autres jeux dans
+    notre collection.
+  </p>
 
-    <div class="text-center" v-if="games.length === 0">
-      <q-spinner color="primary" size="5em" />
-    </div>
-
-    <template v-for="(game, index) in recentGames" :key="game.bgg.id">
-      <q-separator v-if="index > 0" color="secondary" />
-      <game-item :game="game" show-total-plays />
-    </template>
+  <div class="text-center" v-if="games.length === 0">
+    <q-spinner color="primary" size="5em" />
   </div>
+
+  <template v-for="(game, index) in recentGames" :key="game.bgg.id">
+    <q-separator v-if="index > 0" color="secondary" />
+    <game-item :game="game" show-total-plays />
+  </template>
 </template>
 
 <style scoped></style>

src/views/HomeView.vue

@@ -1,34 +1,32 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="q-pa-sm">
-    <div class="text-center">
-      <img style="height: 150px" src="/logo-conjures.png" alt="Logo des conjurés du temporel" />
-    </div>
+  <div class="text-center">
+    <img style="height: 150px" src="/logo-conjures.png" alt="Logo des conjurés du temporel" />
+  </div>
 
-    <p class="text-h5">Nos outils pour les jeux de plateau</p>
+  <p class="text-h5">Nos outils pour les jeux de plateau</p>
 
-    <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'suggest' })">
-      <q-card-section>
-        <div class="text-h6"><q-icon name="tips_and_updates" /> L'assistant</div>
-        <div>Laisse-moi t'aider à choisir un jeu dans notre bibliothèque</div>
-      </q-card-section>
-    </q-card>
+  <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'suggest' })">
+    <q-card-section>
+      <div class="text-h6"><q-icon name="tips_and_updates" /> L'assistant</div>
+      <div>Laisse-moi t'aider à choisir un jeu dans notre bibliothèque</div>
+    </q-card-section>
+  </q-card>
 
-    <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'games' })">
-      <q-card-section>
-        <div class="text-h6"><q-icon name="flare" /> Les jeux du moment</div>
-        <div>Vois à quoi on joue en ce moment</div>
-      </q-card-section>
-    </q-card>
+  <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'games' })">
+    <q-card-section>
+      <div class="text-h6"><q-icon name="flare" /> Les jeux du moment</div>
+      <div>Vois à quoi on joue en ce moment</div>
+    </q-card-section>
+  </q-card>
 
-    <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'record-play' })">
-      <q-card-section>
-        <div class="text-h6"><q-icon name="rate_review" /> Enregistre ta partie</div>
-        <div>Dis-nous à quoi tu as joué avec nous</div>
-      </q-card-section>
-    </q-card>
-  </div>
+  <q-card class="q-my-sm cursor-pointer" @click="$router.push({ name: 'record-play' })">
+    <q-card-section>
+      <div class="text-h6"><q-icon name="rate_review" /> Enregistre ta partie</div>
+      <div>Dis-nous à quoi tu as joué avec nous</div>
+    </q-card-section>
+  </q-card>
 </template>
 
 <style scoped></style>

src/views/RecordPlayView.vue

@@ -124,110 +124,108 @@ async function doSave() {
 </script>
 
 <template>
-  <div class="q-pa-md">
-    <p>
-      Tu as joué avec nous ? Enregistre ta partie sur cette page pour que nous le sachions.<br />
-      Ça nous aide à mieux connaître les jeux tendance :)
-    </p>
-
-    <div class="text-h6 q-my-sm">
-      Quel jeu ?
-      <q-btn
-        v-if="game"
-        label="Changer"
-        size="sm"
-        unelevated
-        no-caps
-        icon="edit"
-        color="secondary"
-        class="q-mx-sm"
-        @click="game = null"
-      />
-    </div>
-    <search-game v-if="!game" @input="(selectedGame) => (game = selectedGame)" />
-    <game-item v-if="game" :game="game" show-total-plays></game-item>
-
-    <div class="text-h6 q-my-sm">
-      Quand ?
-      <q-btn
-        v-if="!isPickingDate"
-        label="Changer"
-        size="sm"
-        unelevated
-        no-caps
-        icon="edit"
-        color="secondary"
-        class="q-mx-sm"
-        @click="startDatePick"
-      />
-    </div>
-    <p v-if="!isPickingDate">
-      {{ humanPlayDate }}
-    </p>
-    <q-date
-      v-if="isPickingDate"
-      v-model="pickingDate"
-      :options="isDateValid"
-      :navigation-min-year-month="minMonth"
-      :navigation-max-year-month="maxMonth"
-      bordered
-      flat
-      minimal
-      @update:model-value="endDatePick"
+  <p>
+    Tu as joué avec nous ? Enregistre ta partie sur cette page pour que nous le sachions.<br />
+    Ça nous aide à mieux connaître les jeux tendance :)
+  </p>
+
+  <div class="text-h6 q-my-sm">
+    Quel jeu ?
+    <q-btn
+      v-if="game"
+      label="Changer"
+      size="sm"
+      unelevated
+      no-caps
+      icon="edit"
+      color="secondary"
+      class="q-mx-sm"
+      @click="game = null"
     />
+  </div>
+  <search-game v-if="!game" @input="(selectedGame) => (game = selectedGame)" />
+  <game-item v-if="game" :game="game" show-total-plays></game-item>
 
-    <q-banner
-      class="bg-warning q-my-sm"
-      v-if="game && game.lastPlayed === convertCalendarToIso(playDate)"
-    >
-      <div class="row q-gutter-sm">
-        <div class="col-auto"><q-icon name="warning" size="sm" /></div>
-        <div class="col">
-          Quelqu'un a déjà enregistré une partie de ce jeu à cette date.<br />
-          Si vous avez joué ensemble, inutile de l'enregistrer aussi.
-        </div>
+  <div class="text-h6 q-my-sm">
+    Quand ?
+    <q-btn
+      v-if="!isPickingDate"
+      label="Changer"
+      size="sm"
+      unelevated
+      no-caps
+      icon="edit"
+      color="secondary"
+      class="q-mx-sm"
+      @click="startDatePick"
+    />
+  </div>
+  <p v-if="!isPickingDate">
+    {{ humanPlayDate }}
+  </p>
+  <q-date
+    v-if="isPickingDate"
+    v-model="pickingDate"
+    :options="isDateValid"
+    :navigation-min-year-month="minMonth"
+    :navigation-max-year-month="maxMonth"
+    bordered
+    flat
+    minimal
+    @update:model-value="endDatePick"
+  />
+
+  <q-banner
+    class="bg-warning q-my-sm"
+    v-if="game && game.lastPlayed === convertCalendarToIso(playDate)"
+  >
+    <div class="row q-gutter-sm">
+      <div class="col-auto"><q-icon name="warning" size="sm" /></div>
+      <div class="col">
+        Quelqu'un a déjà enregistré une partie de ce jeu à cette date.<br />
+        Si vous avez joué ensemble, inutile de l'enregistrer aussi.
       </div>
-    </q-banner>
-
-    <div class="text-h6">Où ?</div>
-    <q-option-group v-model="location" :options="locationOptions" type="radio" />
-
-    <div class="text-h6 q-my-sm">
-      Clé d'accès
-      <q-btn
-        v-if="!isChangingPassCode"
-        label="Changer"
-        size="sm"
-        unelevated
-        no-caps
-        icon="edit"
-        color="secondary"
-        class="q-mx-sm"
-        @click="isChangingPassCode = true"
-      />
-    </div>
-    <div v-if="isChangingPassCode">
-      <q-input v-model="passCode" label="Saisis la clé de 8 caractères" outlined mask="XXXX XXXX" />
-    </div>
-    <div v-else>
-      <code>{{ passCode }}</code>
-    </div>
-    <div class="text-caption">
-      Ce code est affiché dans nos locaux et on l'utilise pour nous assurer que seulement nos
-      membres peuvent enregistrer ses parties
     </div>
+  </q-banner>
 
+  <div class="text-h6">Où ?</div>
+  <q-option-group v-model="location" :options="locationOptions" type="radio" />
+
+  <div class="text-h6 q-my-sm">
+    Clé d'accès
     <q-btn
-      label="Enregistrer"
-      @click="save"
+      v-if="!isChangingPassCode"
+      label="Changer"
+      size="sm"
       unelevated
-      color="primary"
       no-caps
-      class="q-my-sm"
-      :loading="saving"
-      :disable="game === null || !passCode"
+      icon="edit"
+      color="secondary"
+      class="q-mx-sm"
+      @click="isChangingPassCode = true"
     />
   </div>
+  <div v-if="isChangingPassCode">
+    <q-input v-model="passCode" label="Saisis la clé de 8 caractères" outlined mask="XXXX XXXX" />
+  </div>
+  <div v-else>
+    <code>{{ passCode }}</code>
+  </div>
+  <div class="text-caption">
+    Ce code est affiché dans nos locaux et on l'utilise pour nous assurer que seulement nos membres
+    peuvent enregistrer ses parties
+  </div>
+
+  <q-btn
+    label="Enregistrer"
+    @click="save"
+    unelevated
+    color="primary"
+    no-caps
+    class="q-my-sm"
+    :loading="saving"
+    :disable="game === null || !passCode"
+  />
 </template>
 
 <style scoped></style>