Merge branch 'develop'

Cadiducho · Feb 29, 2024 · 4568b0f · 4568b0f
2 parents 9156b38 + 769c28a
commit 4568b0f
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 40 deletions.
diff --git a/src/components/gps/CircuitCard.vue b/src/components/gps/CircuitCard.vue
@@ -1,30 +1,30 @@
 <template>
-    <div class="card">
-        <div class="card-image">
-            <figure class="image">
+    <div class="card bg-white dark:bg-gray-900 rounded shadow-md rounded-lg relative max-w-full">
+        <div class="block relative">
+            <figure class="block relative">
                 <img v-if="circuit.hasLogoImage" :src="circuit.logoImage()" alt="Logo image">
             </figure>
-            <figure class="image">
+            <figure class="block relative">
                 <img :src="variant.layoutImage(true)" alt="Circuit layout image">
             </figure>
         </div>
-        <div class="card-content">
-            <div class="media">
-                <div class="media-content">
-                    <p class="title is-4">
-                        <router-link :to="circuit.circuitLink()" class="has-text-black">
+        <div class="p-5 bg-transparent">
+            <div class="flex items-start">
+                <div class="basis-auto grow shrink">
+                    <p class="font-semibold text-xl">
+                        <router-link :to="circuit.circuitLink()" class="text-black dark:text-gray-200">
                             {{ circuit.name }} {{ variant.isDefault() ? "" : ('- ' + variant.name) }}
                         </router-link>
                     </p>
-                    <p class="subtitle is-6">{{ circuit.locality }}, {{ circuit.country }}</p>
+                    <p class="font-normal text-base mb-3 dark:text-gray-300">{{ circuit.locality }}, {{ circuit.country }}</p>
                 </div>
             </div>
 
-            <div class="content">
-                <p v-if="!variant.isDefault()" class="card-text"><b>Variante: </b>{{ variant.name }}</p>
-                <p class="card-text"><b>Distancia por vuelta: </b>{{ variant.distance }}km</p>
-                <p v-if="hasLaps()" class="card-text"><b>Vueltas: </b>{{ laps }}</p>
-                <p v-if="hasLaps()" class="card-text"><b>Distancia total: </b>{{ (laps * variant.distance).toFixed(2) }}km</p>
+            <div class="dark:text-gray-300 mb-3">
+                <p v-if="!variant.isDefault()"><b>Variante: </b>{{ variant.name }}</p>
+                <p class="mt-2"><b>Distancia por vuelta: </b>{{ variant.distance }}km</p>
+                <p v-if="hasLaps()" class="mt-2"><b>Vueltas: </b>{{ laps }}</p>
+                <p v-if="hasLaps()" class="mt-2"><b>Distancia total: </b>{{ (laps * variant.distance).toFixed(2) }}km</p>
             </div>
             <o-button variant="info is-light is-fullwidth" tag="router-link" :to="circuit.circuitLink()">Más datos del circuito</o-button>
         </div>

diff --git a/src/components/gps/DraggableDriverCard.vue b/src/components/gps/DraggableDriverCard.vue
@@ -1,11 +1,12 @@
 <template>
-    <div class="is-highlighted has-text-weight-semibold has-radius driver-card is-justify-content-left p-3 rounded-md opacity-90 bg-white hover:bg-sky-50"
+    <div class="font-semibold driver-card justify-start p-3 rounded-md opacity-90 bg-white
+        hover:bg-sky-50 dark:bg-gray-900 dark:hover:bg-gray-700 shadow-sm"
          :style="styleDriverCard(driver)">
-        <span>
+        <span class="dark:text-gray-100">
             <b v-if="showPosition">{{ index + 1 }}º.</b> {{ driver.firstname }} {{ driver.lastname }}
             <span class="tag is-rounded" v-bind:style="styleDorsal(driver)">#{{ driver.number }}</span>
 
-            <span class="ml-2 font-normal">
+            <span class="margin-left-card font-normal">
                 <span v-if="currentUser.preferences['use-long-team-names']">{{ driver.team.longname }} ({{ driver.team.carname }})</span>
                 <span v-else>{{ driver.team.name }}</span>
             </span>
@@ -55,6 +56,9 @@ export default defineComponent({
     display: flex;
     cursor: move !important;
 }
+.margin-left-card {
+    margin-left: 0.5rem;
+}
 
 // Resolución móvil
 @media screen and (max-width: variables.$desktop) {
@@ -66,5 +70,9 @@ export default defineComponent({
             display: none;
         }
     }
+    .margin-left-card {
+        display: block;
+        margin-left: 0.0rem;
+    }
 }
 </style>
diff --git a/src/components/gps/ScoreComponent.vue b/src/components/gps/ScoreComponent.vue
@@ -2,9 +2,9 @@
     <div>
         <loading v-if="!loaded" />
         <template v-else>
-            <span class="title is-5">Puntuaciones de {{ session.humanName() }} </span> <br/>
-            <span class="title is-6">Leyenda</span>
-            <p class="content">
+            <span class="title is-5 dark:text-gray-300">Puntuaciones de {{ session.humanName() }} </span> <br/>
+            <span class="title is-6 dark:text-gray-300">Leyenda</span>
+            <p class="m-0 p-0 mb-6 dark:text-gray-300">
                 Tus puntuaciones salen reflejadas con color <span class="tag is-primary">verde</span> <br/>
                 El ganador del Gran Premio es reflejado con color <span class="tag is-warning">dorado</span> <br/>
                 Los ganadores de cada sesión tendrán representado un <o-icon pack="fas" icon="trophy"></o-icon>
@@ -99,6 +99,7 @@
                         <o-tooltip
                             v-if="props.row.tipps[index] !== undefined"
                             :label="driverTooltip(props.row.tipps[index].driver)"
+                            :style="styleCodeInResults(props.row.tipps[index].driver)"
                             append-to-body>
                             {{ props.row.tipps[index].driver.code }}
 
@@ -172,8 +173,8 @@
             </o-table>
 
             <hr />
-            <h6 class="subtitle">Opciones de la tabla</h6>
-            <section class="is-flex is-flex-direction-column" style="gap: 0.6rem">
+            <h6 class="subtitle dark:text-gray-300">Opciones de la tabla</h6>
+            <section class="flex flex-col gap-2">
                 <o-checkbox v-model="showAdvancedStadistics">Mostrar estadísticas avanzadas</o-checkbox>
                 <o-checkbox v-model="showResults">Mostrar resultados</o-checkbox>
                 <o-checkbox v-model="showColorUser">Mostrar color en tu usuario</o-checkbox>
@@ -216,6 +217,7 @@ import {useAuthStore} from "@/store/authStore";
 import {useCommunityStore} from "@/store/communityStore";
 import {StartGridPosition} from "@/types/StartGridPosition";
 import {useDayjs} from "@/composables/useDayjs";
+import {useStyles} from "@/composables/useStyles";
 
 export default defineComponent({
     name: "LandingNavbar",
@@ -246,12 +248,15 @@ export default defineComponent({
         const dayjs = useDayjs();
         const authStore = useAuthStore();
         const communityStore = useCommunityStore();
+        const styles = useStyles();
 
         const humanDateTime = dayjs.humanDateTime;
         const dateDiff = dayjs.dateDiff;
         const currentUser = authStore.loggedUser;
         const currentCommunity = communityStore.currentCommunity;
-        return { currentUser, currentCommunity, dateDiff, humanDateTime };
+        const styleCodeInResults = styles.styleCodeInResults;
+
+        return { currentUser, currentCommunity, dateDiff, humanDateTime, styleCodeInResults };
     },
     data() {
         return {

diff --git a/src/components/gps/SelectTipps.vue b/src/components/gps/SelectTipps.vue
@@ -6,7 +6,7 @@
         <div class="flex space-x-4 mb-4">
 
             <div class="flex-1">
-                <h3 class="select-none">Pilotos disponibles</h3>
+                <h3 class="select-none dark:text-gray-300">Pilotos disponibles</h3>
 
                 <div class="busqueda-ordenada">
                     <o-button label="Ordenar" variant="primary" aria-controls="opcionesOrdenado" @click="opcionesOrdenadoOpen = !opcionesOrdenadoOpen"/>
@@ -66,7 +66,7 @@
             </div>
 
             <div class="flex-1">
-                <h3 class="select-none">Tu pronóstico</h3>
+                <h3 class="select-none dark:text-gray-300">Tu pronóstico</h3>
                 <draggable
                     :id="`pronosticados-${session.id}`"
                     class="w-full h-full select-none space-y-2"

diff --git a/src/components/lib/PrognoPageTitle.vue b/src/components/lib/PrognoPageTitle.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 class="title mb-3">{{ name }}</h1>
+        <h1 class="title mb-3 dark:text-gray-200">{{ name }}</h1>
     </div>
 </template>
 

diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
@@ -82,14 +82,15 @@
             return {
                 isOpen: false,
                 counter: 0,
-                darkModeActivable: true,
+                darkModeActivable: localStorage.getItem('dark-mode') ?? false,
             }
         },
         methods: {
             clickEasterEgg() {
                 this.counter++;
                 if (this.counter >= 33) {
                     this.darkModeActivable = true;
+                    localStorage.setItem('dark-mode', true)
                 }
             }
         }

diff --git a/src/composables/useStyles.ts b/src/composables/useStyles.ts
@@ -26,8 +26,8 @@ export function useStyles() {
     const styleDriverCard = (driver: Driver): any => {
         return {
             color: 'black',
-            'border': '1px solid #'+ driver.team.teamcolor,
-            'border-left': '10px #'+ driver.team.teamcolor + ' solid',
+            'border': '1px solid #' + driver.team.teamcolor,
+            'border-left': '10px #' + driver.team.teamcolor + ' solid',
             'border-right-image-source': 'linear-gradient(to left, #'+ driver.team.teamcolor + ', #ffffff)',
             opacity: 0.9,
         }
@@ -39,6 +39,16 @@ export function useStyles() {
             backgroundColor: '#' + driver.team.teamcolor,
         }
     }
+    const styleCodeInResults = (driver: Driver): any => {
+        if (driver.code === '???') return {}
+        return {
+            color: 'black',
+            'padding-left': '5px',
+            'border-left': '4px #' + driver.team.teamcolor + ' solid',
+            'border-right-image-source': 'linear-gradient(to left, #' + driver.team.teamcolor + ', #ffffff)',
+            opacity: 0.9,
+        }
+    }
 
-    return {invertColor, styleDriverCard, styleDorsal};
+    return {invertColor, styleDriverCard, styleDorsal, styleCodeInResults};
 }
diff --git a/src/layouts/PrognoLayout.vue b/src/layouts/PrognoLayout.vue
@@ -5,7 +5,7 @@
         <section class="section">
             <section class="container prognocontainer">
 
-                <Breadcrumb />
+                <!-- <Breadcrumb /> -->
 
                 <o-notification v-if="isBeta && !betaAceptada" closable variant="warning" aria-close-label="Close notification" @close="acceptBeta()">
                     Estás utilizando PrognoSports Beta, la experiencia puede verse afectada

diff --git a/src/pages/gps/OneGrandPrix.vue b/src/pages/gps/OneGrandPrix.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="grandprix">
         <loading v-if="isLoadingGrandPrix" />
-        <p v-else-if="!thereIsGrandPrix">El Gran Premio buscado con nombre <i>{{ this.id }}</i> no ha sido encontrado</p>
+        <p v-else-if="!thereIsGrandPrix">El Gran Premio buscado con nombre <i>{{ id }}</i> no ha sido encontrado</p>
 
         <template v-else>
             <div class="columns is-variable is-5">
@@ -26,11 +26,11 @@
                                     :label="session.humanName()"
                                     :key="session.id"
                                     :value="index">
-                            <h6 class="font-weight-light">
-                                La hora de cierre de este pronóstico para la <strong>{{ session.humanName() }}</strong>
+                            <h6 class="dark:text-gray-300">
+                                La hora de cierre de este pronóstico para la <span class="font-bold dark:text-gray-200">{{ session.humanName() }}</span>
                                 es {{ humanDateTime(session.closureDate()) }} ({{ dateDiff(session.closureDate()) }})
                             </h6>
-                            <h6 class="font-weight-light">
+                            <h6 class="dark:text-gray-300">
                                 Para esta sesión se han de pronosticar {{ ruleSet.cantidadPilotosPronosticados(session) }} pilotos
                             </h6>
                             <SelectTipps :session="session"
@@ -49,9 +49,9 @@
                     <CircuitCard v-if="grandPrix.circuit && grandPrix.variant"
                                  :circuit="grandPrix.circuit!" :variant="grandPrix.variant!" :laps="grandPrix.laps"
                     />
-                    <PitLaneStartGrid v-if="this.startGrid.size" :grid="startGrid"/>
+                    <PitLaneStartGrid v-if="startGrid.size" :grid="startGrid"/>
 
-                    <section v-if="this.currentUser.isAdmin()" class="mt-2">
+                    <section v-if="currentUser.isAdmin()" class="mt-2">
                         <hr/>
                         <o-button variant="primary" expanded tag="router-link"
                                   :to="{ name: 'adminGpEditInSeason', params: {season: season.name, gp: grandPrix.id} } ">
@@ -66,8 +66,8 @@
                             :label="session.humanName()"
                             :key="session.id"
                             :value="index">
-                    <h6 class="font-weight-light">
-                        La hora de cierre de este pronóstico para la <strong>{{ session.humanName() }}</strong>
+                    <h6 class="dark:text-gray-300">
+                        La hora de cierre de este pronóstico para la <span class="font-bold dark:text-gray-200">{{ session.humanName() }}</span>
                         es {{ humanDateTime(session.closureDate()) }} ({{ dateDiff(session.closureDate()) }})
                     </h6>
                     <ScoreComponents :gp="grandPrix"