tiny improvements on league UI elements

ori-community · May 11, 2024 · 97123a2 · 97123a2
1 parent b968b89
commit 97123a2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/components/League/GameCard.vue b/components/League/GameCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card-container">
-    <div v-if="isPending" class="card-flash accent"></div>
+    <div v-if="isPending" class="accent" :class="attentionActive ? 'card-flash' : ''"></div>
 
     <v-card
       class="game-card"
@@ -90,15 +90,16 @@
     data: () => ({
       countdownTimerTextOrSecondsLeft: null,
       updateIntervalId: null,
+      attentionActive: false,
     }),
     computed: {
       isPending() {
         return this.game.isCurrent && this.game.userMetadata?.canSubmit
       },
     },
     mounted() {
-      this.updateIntervalId = setInterval(() => this.updateTimerText(), 1000)
-      this.updateTimerText()
+      this.updateIntervalId = setInterval(() => this.updateTimer(), 1000)
+      this.updateTimer()
     },
     beforeDestroy() {
       if (this.updateIntervalId !== null) {
@@ -107,27 +108,32 @@
     },
     methods: {
       formatTime,
-      updateTimerText() {
+      updateTimer() {
         if (!this.playableUntil) {
           this.countdownTimerTextOrSecondsLeft = null
+          this.attentionActive = false
           return
         }
-
+        
         const secondsLeft = (this.playableUntil - Date.now()) / 1000
-
+        
         // Only show countdown for <48h
         if (secondsLeft > 48 * 3600) {
           this.countdownTimerTextOrSecondsLeft = null
+          this.attentionActive = false
           return
         }
+        
+        this.attentionActive = true
 
         if (secondsLeft <= 0) {
           this.countdownTimerTextOrSecondsLeft = 'Season will continue any second...'
           return
         }
-
+        
         this.countdownTimerTextOrSecondsLeft = secondsLeft
       },
+
     },
   }
 </script>

diff --git a/components/League/SeasonCard.vue b/components/League/SeasonCard.vue
@@ -81,7 +81,7 @@
     position: relative;
     overflow: hidden;
     transition: transform 300ms;
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     will-change: transform;
 
     &:hover {

diff --git a/pages/league/seasons/index.vue b/pages/league/seasons/index.vue
@@ -11,9 +11,9 @@
         FAQ / Help
       </v-btn>
     </div>
-
+    
     <template v-if="pendingGames.length > 0">
-      <h2 class="mt-5 mb-2">Your pending games</h2>
+      <h2 class="mt-5 mb-2">Your Pending Games</h2>
 
       <div class="seasons-container">
         <league-game-card
@@ -29,7 +29,11 @@
     </template>
 
     <template v-if="categorizedSeasons.active.length > 0 || categorizedSeasons.upcoming.length > 0">
-      <h2 class="mt-5 mb-2">Active & Upcoming Seasons</h2>
+      <h2 class="mt-5 mb-2">
+        <template v-if="categorizedSeasons.active.length > 0 && categorizedSeasons.upcoming.length > 0">Active & Upcoming Seasons</template>
+        <template v-else-if="categorizedSeasons.active.length > 0">Active Seasons</template>
+        <template v-else>Upcoming Seasons</template>
+      </h2>
 
       <div class="seasons-container">
         <league-season-card