Improved character attributes styles (#21)

* Improve character attributes styles * Improve coding styles * Improve coding styles * Add if for display specialties * Improve show component styles * Improve compulsions component styles * Remove console log * Adjust margins and paddings * Add border-bottom * Applu full height on details modal on mobile and add close button * improve paddings --------- Co-authored-by: Matthieu MARTIN <[email protected]>
codingstuff91 · Nov 15, 2024 · b048f6e · b048f6e
1 parent a8c7055
commit b048f6e
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 54 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -82,7 +82,7 @@ p {
 }
 
 .desktop_menu {
-    @apply hidden lg:block lg:flex lg:justify-between;
+    @apply hidden lg:flex lg:justify-between;
     @apply mt-4 pb-4;
     @apply border-b border-gray-700;
 }
@@ -100,8 +100,8 @@ p {
 }
 
 .description-modal {
-    @apply w-full bg-darkness-900 overflow-scroll shadow-xl transform transition-all h-[80%] px-4;
-    @apply lg:mx-auto lg:border-0 lg:max-w-7xl;
+    @apply w-full bg-darkness-900 overflow-scroll shadow-xl transform transition-all h-full px-4;
+    @apply lg:mx-auto  lg:h-[90%] lg:max-w-[80%];
 }
 
 .description-modal h1 {

diff --git a/resources/js/Components/Modals/DetailsModal.vue b/resources/js/Components/Modals/DetailsModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, onUnmounted, watch} from 'vue';
+import {onMounted, onUnmounted, watch} from 'vue';
 
 import {useModalStore} from "@/Stores/modalStore.js";
 
@@ -50,7 +50,10 @@ onUnmounted(() => {
 <template>
     <Teleport to="body">
         <Transition leave-active-class="duration-200">
-            <div v-show="show" class="fixed inset-0 overflow-y-auto sm:px-0 z-50" scroll-region>
+            <div
+                v-show="show"
+                class="fixed inset-0 overflow-y-auto sm:px-0 z-50"
+            >
                 <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0"
@@ -60,7 +63,7 @@ onUnmounted(() => {
                     leave-to-class="opacity-0"
                 >
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-                        <div class="absolute inset-0 bg-gray-700 opacity-75"/>
+                        <div class="absolute inset-0 bg-gray-400 opacity-75"/>
                     </div>
                 </Transition>
 
@@ -76,6 +79,13 @@ onUnmounted(() => {
                         v-show="show"
                         class="description-modal"
                     >
+                        <button
+                            class="p-2 bg-blood-500 text-white text-sm rounded-xl absolute top-4 right-4"
+                            @click="close"
+                        >
+                            Fermer
+                        </button>
+
                         <h1>{{ modalStore.details.name }}</h1>
 
                         <p v-html="modalStore.details?.description?.text"></p>

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -186,7 +186,7 @@ const showingNavigationDropdown = ref(false);
 
             <!-- Page Heading -->
             <header v-if="$slots.header" class="character_header shadow border-b border-gray-700 w-full">
-                <div class="py-4 w-full mx-auto px-4 sm:px-6 sm:py-6">
+                <div class="py-2 w-full mx-auto px-2 sm:px-6 sm:py-6">
                     <slot name="header"/>
                 </div>
             </header>

diff --git a/resources/js/Pages/Character/Partials/Attributes.vue b/resources/js/Pages/Character/Partials/Attributes.vue
@@ -41,18 +41,23 @@ const showDescription = async (entity, id) => {
             :closeable="true"
             :show="modalStore.open"
         />
-        
+
         <Foldable>
             <template #header>
-                <h1 class="section_title text-center my-4">Attributs</h1>
+                <h1 class="section_title text-center my-2">Attributs</h1>
             </template>
             <template #content>
-                <div class="grid grid-cols-3 gap-2 flex justify-center px-2 pb-4 w-full">
+                <div class="grid grid-cols-3 gap-2 flex justify-center p-2 w-full border-b border-gray-700">
                     <div class="flex flex-col">
                         <h2 class="column_title">Physiques</h2>
-                        <div v-for="(attribute, index) in physical_attributes" :key="index"
-                             class="flex flex-col items-start">
-                            <p class="mt-8 mb-2 attribute_title" @click="showDescription('attribute', attribute.id)">
+                        <div
+                            v-for="(attribute, index) in physical_attributes" :key="index"
+                            class="flex flex-col items-start"
+                        >
+                            <p
+                                class="my-2 attribute_title"
+                                @click="showDescription('attribute', attribute.id)"
+                            >
                                 {{ attribute.name }}</p>
                             <AttributeGauge
                                 :max="5"
@@ -62,9 +67,14 @@ const showDescription = async (entity, id) => {
                     </div>
                     <div class="flex flex-col items-center">
                         <h2 class="column_title">Sociaux</h2>
-                        <div v-for="(attribute, index) in social_attributes" :key="index"
-                             class="flex flex-col items-center">
-                            <p class="mt-8 mb-2 attribute_title" @click="showDescription('attribute', attribute.id)">
+                        <div
+                            v-for="(attribute, index) in social_attributes" :key="index"
+                            class="flex flex-col items-center"
+                        >
+                            <p
+                                class="my-2 attribute_title"
+                                @click="showDescription('attribute', attribute.id)"
+                            >
                                 {{ attribute.name }}</p>
                             <AttributeGauge
                                 :max="5"
@@ -74,9 +84,14 @@ const showDescription = async (entity, id) => {
                     </div>
                     <div class="flex flex-col items-end">
                         <h2 class="column_title">Mentaux</h2>
-                        <div v-for="(attribute, index) in mental_attributes" :key="index"
-                             class="flex flex-col items-end">
-                            <p class="mt-8 mb-2 attribute_title" @click="showDescription('attribute', attribute.id)">
+                        <div
+                            v-for="(attribute, index) in mental_attributes" :key="index"
+                            class="flex flex-col items-end"
+                        >
+                            <p
+                                class="my-2 attribute_title"
+                                @click="showDescription('attribute', attribute.id)"
+                            >
                                 {{ attribute.name }}</p>
                             <AttributeGauge
                                 :max="5"

diff --git a/resources/js/Pages/Character/Partials/Compulsions.vue b/resources/js/Pages/Character/Partials/Compulsions.vue
@@ -7,11 +7,9 @@ import {router} from '@inertiajs/vue3';
 
 import {useCharacterStore} from "@/Stores/characterStore.js";
 import {useCompulsionStore} from "@/Stores/CompulsionStore.js";
-import {useCharacterAttributesStore} from "@/Stores/characterAttributesStore.js";
 
 const characterStore = useCharacterStore();
 const compulsionStore = useCompulsionStore();
-const attributesStore = useCharacterAttributesStore();
 
 const displayModal = ref(false);
 
@@ -53,32 +51,36 @@ const deleteCompulsion = async () => {
     </div>
 
     <Modal
-        :show="displayModal"
         :closeable="true"
+        :show="displayModal"
         @close="closeModal"
     >
         <div class="my-4 flex justify-center">
             <SecondaryButton
-                @click="setRandomCompulsion"
                 v-if="! characterStore.character.compulsion"
+                @click="setRandomCompulsion"
             >
                 Attribuer une compulsion
             </SecondaryButton>
         </div>
         <div
-            class="p-4 flex flex-col items-center"
             v-if="characterStore.character.compulsion"
+            class="p-4 flex flex-col items-center"
         >
-            <h2 class="header_attribute_title text-center uppercase">{{ characterStore.character.compulsion.name }}</h2>
+            <h2
+                class="header_attribute_title text-center uppercase"
+            >
+                {{ characterStore.character.compulsion.name }}
+            </h2>
             <p
                 class="subtitle text-justify"
                 v-html="characterStore.character.compulsion.description"
             >
             </p>
 
             <SecondaryButton
-                @click="deleteCompulsion"
                 v-if="characterStore.character.compulsion"
+                @click="deleteCompulsion"
             >
                 Supprimer la compulsion
             </SecondaryButton>

diff --git a/resources/js/Pages/Character/Partials/Skills.vue b/resources/js/Pages/Character/Partials/Skills.vue
@@ -37,68 +37,98 @@ const showDescription = async (entity, id) => {
 </script>
 
 <template>
-    <div class="py-2 pb-16">
+    <div class="pb-16">
         <DetailsModal
             :closeable="true"
             :show="modalStore.open"
         />
         <Foldable>
             <template #header>
                 <div class="flex justify-center">
-                    <h1 class="section_title my-4">Compétences</h1>
+                    <h1 class="section_title my-2">Compétences</h1>
                 </div>
             </template>
 
             <template #content>
                 <div class="grid grid-cols-3 gap-2 flex justify-center px-2 pb-4 w-full">
                     <div class="flex flex-col">
-                        <h2 class="column_title">Physiques</h2>
-                        <div v-for="(attribute, index) in physical_skills" :key="index"
-                             class="flex flex-col items-start">
+                        <h2 class="column_title mb-1">Physiques</h2>
+                        <div
+                            v-for="(attribute, index) in physical_skills"
+                            :key="index"
+                            class="flex flex-col items-start"
+                        >
                             <p
-                                class="mt-8 mb-2 attribute_title"
+                                class="attribute_title"
                                 @click="showDescription('attribute', attribute.id)"
                             >
                                 {{ attribute.name }}
                             </p>
+
                             <AttributeGauge
                                 :max="5"
                                 :value="attribute.pivot.attribute_value"
                             />
-                            <p class="mt-2 text-skin-50 text-sm lg:text-lg">
+
+                            <p
+                                v-if="attribute.pivot.specialties"
+                                class="my-2 text-skin-50 text-sm lg:text-lg"
+                            >
                                 {{ attribute.pivot.specialties }}
                             </p>
                         </div>
                     </div>
                     <div class="flex flex-col items-center">
-                        <h2 class="column_title">Sociales</h2>
-                        <div v-for="(attribute, index) in social_skills" :key="index"
-                             class="flex flex-col items-center">
+                        <h2 class="column_title mb-1">Sociales</h2>
+                        <div
+                            v-for="(attribute, index) in social_skills"
+                            :key="index"
+                            class="flex flex-col items-center"
+                        >
                             <p
-                                class="mt-8 mb-2 attribute_title"
+                                class="attribute_title"
                                 @click="showDescription('attribute', attribute.id)"
                             >
                                 {{ attribute.name }}
                             </p>
+
                             <AttributeGauge
                                 :max="5"
                                 :value="attribute.pivot.attribute_value"
                             />
-                            <p class="mt-2 text-skin-50 text-sm lg:text-lg">
+
+                            <p
+                                v-if="attribute.pivot.specialties"
+                                class="text-skin-50 text-sm lg:text-lg"
+                            >
                                 {{ attribute.pivot.specialties }}
                             </p>
                         </div>
                     </div>
+
                     <div class="flex flex-col items-end">
-                        <h2 class="column_title">Mentales</h2>
-                        <div v-for="(attribute, index) in mental_skills" :key="index" class="flex flex-col items-end">
-                            <p class="mt-8 mb-2 attribute_title" @click="showDescription('attribute', attribute.id)">
-                                {{ attribute.name }}</p>
+                        <h2 class="column_title mb-1">Mentales</h2>
+                        <div
+                            v-for="(attribute, index) in mental_skills"
+                            :key="index"
+                            class="flex flex-col items-end"
+                        >
+                            <p
+                                class="attribute_title"
+                                @click="showDescription('attribute', attribute.id)"
+                            >
+                                {{ attribute.name }}
+                            </p>
+
                             <AttributeGauge
                                 :max="5"
                                 :value="attribute.pivot.attribute_value"
                             />
-                            <p class="mt-2 text-skin-50 text-sm lg:text-lg">
+
+                            <p
+                                v-if="attribute.pivot.specialties"
+                                class="text-skin-50 text-sm lg:text-lg"
+                            >
                                 {{ attribute.pivot.specialties }}
                             </p>
                         </div>

diff --git a/resources/js/Pages/Character/Partials/Status/Willpower.vue b/resources/js/Pages/Character/Partials/Status/Willpower.vue
@@ -1,15 +1,9 @@
 <script setup>
 import DynamicGauge from "@/Components/Gauges/DynamicGauge.vue";
-import {onMounted} from "vue";
 import {useCharacterAttributesStore} from "@/Stores/characterAttributesStore";
 
 const attributesStore = useCharacterAttributesStore();
 const maxWillpowerPoints = attributesStore.willPowerAttributes[2].pivot.attribute_value;
-
-onMounted(() => {
-    console.log("Willpower attributes", maxWillpowerPoints, attributesStore.willPowerAttributes[0].pivot.attribute_value, attributesStore.willPowerAttributes[1].pivot.attribute_value);
-    console.log("Willpower store attributes", attributesStore.willPowerAttributes);
-});
 </script>
 
 <template>
@@ -24,9 +18,9 @@ onMounted(() => {
             </h2>
             <DynamicGauge
                 :attribute="attributesStore.willPowerAttributes[0].pivot.attribute_id"
+                :max="maxWillpowerPoints"
                 :value="attributesStore.willPowerAttributes[0].pivot.attribute_value"
                 icon="fa-solid fa-shield"
-                :max="maxWillpowerPoints"
             />
         </div>
         <div class="flex flex-col justify-center items-center px-2 pb-4 w-full">
@@ -38,9 +32,9 @@ onMounted(() => {
             </h2>
             <DynamicGauge
                 :attribute="attributesStore.willPowerAttributes[1].pivot.attribute_id"
+                :max="maxWillpowerPoints"
                 :value="attributesStore.willPowerAttributes[1].pivot.attribute_value"
                 icon="fa-solid fa-skull"
-                :max="maxWillpowerPoints"
             />
         </div>
     </div>

diff --git a/resources/js/Pages/Character/Show.vue b/resources/js/Pages/Character/Show.vue
@@ -77,18 +77,17 @@ onMounted(async () => {
 
             <div
                 v-if="rightMenustore.category == 'attributes'"
-                class="w-full p-4 flex justify-between lg:w-2/3 lg:hidden"
+                class="w-full px-4 pt-2 flex justify-between border-b border-gray-700 lg:w-2/3 lg:hidden"
             >
                 <div>
-                    <h2 class="header_attribute_title">Fléau de clan</h2>
+                    <h2 class="header_attribute_title mb-2">Fléau de clan</h2>
                     <h2 class="subtitle">{{ character.clan.bane }}</h2>
                 </div>
                 <div>
                     <Compulsions/>
                 </div>
             </div>
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <CompulsionModal/>
                 <DesktopMenu class="desktop_menu"/>
 
                 <div