From 0494298159c5b14e6854c03de7f6cd871427ecf9 Mon Sep 17 00:00:00 2001
From: Maxime Moraine <mmoraine@bearstech.com>
Date: Sat, 23 May 2020 11:41:13 +0200
Subject: [PATCH] =?UTF-8?q?r=C3=A9vision=20de=20l'int=C3=A9gration=20du=20?=
 =?UTF-8?q?calculateur=20de=20caract=C3=A9ristiques?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/AbilityCalculator.vue    | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/.vuepress/theme/components/AbilityCalculator.vue b/docs/.vuepress/theme/components/AbilityCalculator.vue
index e681402..e2ab73e 100644
--- a/docs/.vuepress/theme/components/AbilityCalculator.vue
+++ b/docs/.vuepress/theme/components/AbilityCalculator.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ability-scores-calculator">
     <v-row>
-      <v-col :cols="12" :md="8" :lg="6">
+      <v-col :cols="12">
         <v-row>
           <v-col>
             <v-btn color="primary" @click.stop="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
@@ -50,9 +50,14 @@
                     <td class="text-center"><span class="subtitle-2">{{ ability.label }}</span></td>
                     <td class="text-center ability-field">
                       <div v-if="generationMethod == 'pointBuy'" class="d-flex align-center">
-                        <v-btn icon dense color="accent" :disabled="ability.value <= powerTier.min" @click.stop="ability.value--"><v-icon>mdi-minus-circle</v-icon></v-btn>
-                        <v-text-field class="text-center" readonly outlined hide-details dense :value="ability.value"></v-text-field>
-                        <v-btn icon dense color="accent" :disabled="ability.value >= powerTier.max" @click.stop="ability.value++"><v-icon>mdi-plus-circle</v-icon></v-btn>
+                        <v-text-field class="text-center" readonly outlined hide-details dense :value="ability.value">
+                          <template v-slot:prepend>
+                            <v-btn icon dense color="accent" :disabled="ability.value <= powerTier.min" @click.stop="ability.value--"><v-icon>mdi-minus-circle</v-icon></v-btn>
+                          </template>
+                          <template v-slot:append-outer>
+                            <v-btn icon dense color="accent" :disabled="ability.value >= powerTier.max" @click.stop="ability.value++"><v-icon>mdi-plus-circle</v-icon></v-btn>
+                          </template>
+                        </v-text-field>
                       </div>
                       <template v-else-if="generationMethod == 'standardArray'">
                         <v-select v-if="!ability.value" dense :items="standardArrayValues" v-model="ability.value" outlined hide-details clearable @change="selectAbilityValue(ability)"></v-select>
@@ -275,8 +280,10 @@ export default {
   }
 }
 .ability-field {
-  .v-input__slot {
-    width: 80px;
+  width: 180px;
+  .v-input__prepend-outer, .v-input__append-outer {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
 }
 </style>