fix(match): show label if score is yet to be confirmed

SwissTchoukball · Oct 13, 2024 · e944284 · e944284
1 parent 37deec6
commit e944284
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 82 deletions.
diff --git a/assets/css/variables.css b/assets/css/variables.css
@@ -173,7 +173,9 @@
   --st-color-phase-select-background-hover: var(--st-color-grey-very-light);
   --st-color-match-score: var(--st-color-red-swiss-tchoukball);
   --st-color-match-results-separator: var(--st-color-grey-light);
+  --st-color-match-result-background-hover: var(--st-color-grey-very-light);
   --st-color-match-phase-round: var(--st-color-red-swiss-tchoukball);
+  --st-color-match-additional-info-background: var(--st-color-red-swiss-tchoukball-ultra-light);
 
   /* Resources */
   --st-color-resource-icon: var(--st-color-red-swiss-tchoukball);

diff --git a/components/competitions/st-match-result-list.vue b/components/competitions/st-match-result-list.vue
@@ -29,6 +29,7 @@ defineProps({
 
 .c-match-result-list__match {
   border-bottom: 1px solid var(--st-color-match-results-separator);
+  margin: 1rem 0;
 }
 
 .c-match-result-list__match:last-of-type {

diff --git a/components/competitions/st-match-result.vue b/components/competitions/st-match-result.vue
@@ -8,37 +8,34 @@
       })
     "
   >
-    <div
-      class="c-match-result__team c-match-result__team--home"
-      :class="{ 'c-match-result__team--winner': match.hasHomeTeamWon }"
-    >
-      <template v-if="match.home_team">
-        <img
-          v-if="match.home_team.avatarMediumUrl"
-          :src="match.home_team.avatarMediumUrl"
-          class="c-match-result__team-avatar"
-        />
-        <div v-else class="c-match-result__team-avatar c-match-result__team-avatar--placeholder"></div>
-        <div class="c-match-result__team-name">{{ match.home_team.name }}</div>
-        <div class="c-match-result__score">{{ match.home_team_score }}</div>
-      </template>
-    </div>
+    <template v-if="match.home_team">
+      <img
+        v-if="match.home_team.avatarMediumUrl"
+        :src="match.home_team.avatarMediumUrl"
+        class="c-match-result__team-avatar"
+      />
+      <div v-else class="c-match-result__team-avatar c-match-result__team-avatar--placeholder"></div>
+      <div class="c-match-result__team-name" :class="{ 'c-match-result__team-name--winner': match.hasHomeTeamWon }">
+        {{ match.home_team.name }}
+      </div>
+      <div class="c-match-result__team-score">{{ match.home_team_score }}</div>
+    </template>
     <div class="c-match-result__score-separator">-</div>
-    <div
-      class="c-match-result__team c-match-result__team--away"
-      :class="{ 'c-match-result__team--winner': match.hasAwayTeamWon }"
-    >
-      <template v-if="match.away_team">
-        <img
-          v-if="match.away_team.avatarMediumUrl"
-          :src="match.away_team.avatarMediumUrl"
-          class="c-match-result__team-avatar"
-        />
-        <div v-else class="c-match-result__team-avatar c-match-result__team-avatar--placeholder"></div>
-        <div class="c-match-result__team-name">{{ match.away_team.name }}</div>
-        <div class="c-match-result__score">{{ match.away_team_score }}</div>
-      </template>
-    </div>
+    <template v-if="match.away_team">
+      <img
+        v-if="match.away_team.avatarMediumUrl"
+        :src="match.away_team.avatarMediumUrl"
+        class="c-match-result__team-avatar"
+      />
+      <div v-else class="c-match-result__team-avatar c-match-result__team-avatar--placeholder"></div>
+      <div class="c-match-result__team-name" :class="{ 'c-match-result__team-name--winner': match.hasAwayTeamWon }">
+        {{ match.away_team.name }}
+      </div>
+      <div class="c-match-result__team-score">{{ match.away_team_score }}</div>
+    </template>
+    <st-chip v-if="match.hasScore && !match.finished" class="c-match-result__additional-info">
+      {{ $t('match.toBeConfirmed') }}
+    </st-chip>
   </nuxt-link>
 </template>
 
@@ -59,91 +56,101 @@ defineProps({
 @import url('~/assets/css/media.css');
 
 .c-match-result {
-  display: block;
+  display: grid;
+  grid-template-columns: min-content auto min-content;
+  grid-template-areas:
+    'additional-info additional-info additional-info'
+    'home-team-avatar home-team-name home-team-score'
+    'away-team-avatar away-team-name away-team-score';
+  align-items: center;
+  gap: var(--st-length-spacing-xxs) var(--st-length-spacing-xs);
   width: 100%;
   padding: var(--st-length-spacing-xs) 0;
   color: inherit;
   text-decoration: none;
+  border-radius: 5px;
+  transition: all 0.2s ease-in;
 }
 
-.c-match-result__team {
-  display: flex;
-  align-items: center;
-}
-
-.c-match-result__team--winner {
-  font-weight: bold;
+.c-match-result:hover {
+  box-shadow: rgba(149 157 165 / 20%) 0 8px 24px;
+  transform: translateY(-2px);
 }
 
 .c-match-result__team-name {
-  flex-grow: 2;
   text-align: left;
 }
 
-.c-match-result__score {
-  padding: var(--st-length-spacing-xs) 0;
+.c-match-result__team-name:nth-child(1 of .c-match-result__team-name) {
+  grid-area: home-team-name;
+}
+
+.c-match-result__team-name:nth-child(2 of .c-match-result__team-name) {
+  grid-area: away-team-name;
+}
+
+.c-match-result__team-name--winner {
+  font-weight: bold;
+}
+
+.c-match-result__team-score {
+  padding: 0;
   color: var(--st-color-match-score);
   font-weight: bold;
   width: 2em;
 }
 
+.c-match-result__team-score:nth-child(1 of .c-match-result__team-score) {
+  grid-area: home-team-score;
+}
+
+.c-match-result__team-score:nth-child(2 of .c-match-result__team-score) {
+  grid-area: away-team-score;
+}
+
 .c-match-result__score-separator {
+  grid-area: score-separator;
   display: none;
-  padding: var(--st-length-spacing-xs) var(--st-length-spacing-xxs);
   color: var(--st-color-match-score);
   font-weight: bold;
 }
 
 .c-match-result__team-avatar {
   width: 40px;
   height: 40px;
-  margin-right: var(--st-length-spacing-xs);
-  margin-left: var(--st-length-spacing-xs);
-  margin-bottom: var(--st-length-spacing-xxs);
 }
 
-@media (--sm-and-up) {
-  .c-match-result {
-    display: flex;
-    justify-content: center;
-    padding: var(--st-length-spacing-xxs) 0;
-  }
-
-  .c-match-result__team {
-    flex: 1 1 0;
-  }
-
-  .c-match-result__team--away {
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-  }
+.c-match-result__team-avatar:nth-child(1 of .c-match-result__team-avatar) {
+  grid-area: home-team-avatar;
+}
 
-  .c-match-result__team--home {
-    justify-content: flex-end;
-  }
+.c-match-result__team-avatar:nth-child(2 of .c-match-result__team-avatar) {
+  grid-area: away-team-avatar;
+}
 
-  .c-match-result__team-avatar {
-    margin-bottom: 0;
-    order: 2;
-  }
+.c-match-result__additional-info {
+  grid-area: additional-info;
+  justify-self: center;
+}
 
-  .c-match-result__team-name {
-    order: 1;
+@media (--sm-and-up) {
+  .c-match-result {
+    grid-template-columns: 1fr min-content min-content min-content min-content min-content 1fr;
+    grid-template-areas:
+      'home-team-name home-team-avatar home-team-score score-separator away-team-score away-team-avatar away-team-name'
+      'empty-left empty-left additional-info additional-info additional-info empty-right empty-right';
+    padding: var(--st-length-spacing-xs) 0 var(--st-length-spacing-xxs);
   }
 
-  .c-match-result__team--home .c-match-result__team-name {
+  .c-match-result__team-name:nth-child(1 of .c-match-result__team-name) {
     text-align: right;
   }
 
-  .c-match-result__score {
-    order: 3;
-  }
-
-  .c-match-result__team--home .c-match-result__score {
+  .c-match-result__team-score:nth-child(1 of .c-match-result__team-score) {
     text-align: right;
   }
 
-  .c-match-result__team--away .c-match-result__score {
+  .c-match-result__team-score:nth-child(2 of .c-match-result__team-score) {
     text-align: left;
   }
 

diff --git a/components/st-chip.vue b/components/st-chip.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="c-chip">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.c-chip {
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 0.3rem 0.8rem;
+  border-radius: 50rem;
+  background-color: var(--st-color-match-additional-info-background);
+}
+</style>
diff --git a/locales/de.json b/locales/de.json
@@ -147,7 +147,8 @@
     "noUpcomingMatches": "Es sind aktuell keine Spiele geplant."
   },
   "match": {
-    "photos": "Fotos vom Spiel"
+    "photos": "Fotos vom Spiel",
+    "toBeConfirmed": "Zu bestätigen"
   },
   "person": {
     "photoOf": "Foto von {name}"

diff --git a/locales/fr.json b/locales/fr.json
@@ -147,7 +147,8 @@
     "noUpcomingMatches": "Il n'y a actuellement pas de matchs planifiés."
   },
   "match": {
-    "photos": "Photos du match"
+    "photos": "Photos du match",
+    "toBeConfirmed": "À confirmer"
   },
   "person": {
     "photoOf": "Photo de {name}"

diff --git a/models/match.model.ts b/models/match.model.ts
@@ -191,7 +191,7 @@ export default class Match {
     return '';
   }
 
-  get isOver(): boolean {
+  get hasScore(): boolean {
     return (!!this.home_team_score && this.home_team_score > 0) || (!!this.away_team_score && this.away_team_score > 0);
   }
 

diff --git a/pages/competitions/[competition]/[season]/match/[matchId].vue b/pages/competitions/[competition]/[season]/match/[matchId].vue
@@ -25,7 +25,7 @@
       />
       <div v-else class="c-match__team-avatar"></div>
 
-      <div v-if="match.isOver" class="c-match__score">{{ match.home_team_score }} - {{ match.away_team_score }}</div>
+      <div v-if="match.hasScore" class="c-match__score">{{ match.home_team_score }} - {{ match.away_team_score }}</div>
       <div v-else class="c-match__no-score"></div>
 
       <img
@@ -35,6 +35,11 @@
       />
       <div v-else class="c-match__team-avatar"></div>
     </div>
+    <div class="c-match__additional-info">
+      <st-chip v-if="match.hasScore && !match.finished">
+        {{ $t('match.toBeConfirmed') }}
+      </st-chip>
+    </div>
     <ul v-if="match.periods" class="c-match__detailed-score u-unstyled-list">
       <template v-for="period in match.periods">
         <li v-if="period.home_team_score || period.away_team_score" :key="period.order" class="c-match__period">
@@ -293,7 +298,7 @@ const isRoundNameVisible = computed<boolean>(() => {
  */
 const phaseRoundLink = computed<string>(() => {
   let pathName = 'competitions-competition-season-phase-planning';
-  if (match.value?.isOver) {
+  if (match.value?.finished) {
     pathName = 'competitions-competition-season-phase-results';
   }
   if (!phase.value) {
@@ -402,13 +407,18 @@ useHead(() => {
   width: 10vw;
 }
 
+.c-match__additional-info {
+  margin-top: var(--st-length-spacing-s);
+  text-align: center;
+}
+
 .c-match__detailed-score {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 1rem;
   font-weight: bold;
-  margin-top: var(--st-length-spacing-s);
+  margin-top: var(--st-length-spacing-xxs);
 }
 
 .c-match__period {