Improved styling of scoreboard page and team tile.

krazkidd · Oct 16, 2023 · 1a9af03 · 1a9af03
1 parent cf14c5a
commit 1a9af03
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/components/scoreboard/ScoreboardTeamTile.vue b/components/scoreboard/ScoreboardTeamTile.vue
@@ -27,16 +27,22 @@ const cardPassThroughOptions = computed(() => ({
     class: 'accent m-1 w-64',
   },
   title: {
-    class: 'rounded',
+    class: 'rounded truncate',
     style: {
         color: props.team ? `#${props.team!.jerseyTextColor}` : '',
         backgroundColor: props.team ? `#${props.team!.jerseyColor}` : '',
     }
   },
+  body: {
+    class: 'py-1',
+  },
   content: {
-    class: {
-        hidden: !props.showButtons
-    }
+    class: [
+        'py-1',
+        {
+            hidden: !props.showButtons
+        }
+    ]
   },
 } as CardPassThroughOptions));
 
@@ -54,7 +60,7 @@ const buttonPassThroughOptions = {
         </template>
         <template #title>{{ props.team?.name }}</template>
         <template #content>
-            <div class="flex justify-around">
+            <div class="flex space-x-2 justify-center">
                 <Button
                     @click="onClick(1)"
                     icon="pi pi-caret-up"

diff --git a/pages/scoreboard/[[id]].vue b/pages/scoreboard/[[id]].vue
@@ -5,7 +5,7 @@ import type { Team, Emote } from '~~/types';
 
 import { useTeamStore } from '~~/stores/Team';
 import { getTeam } from '~~/db/Team'
-import { getScoreboard, incrementTeamScore, incrementOtherTeamScore } from '~~/db/Scoreboard'
+import { getScoreboard, incrementTeamScore, incrementOtherTeamScore, incrementInning } from '~~/db/Scoreboard'
 import { getEmotes, addEmote, subscribeToNewEmotes } from '~~/db/Emotes'
 
 const route = useRoute()
@@ -37,18 +37,18 @@ const fakeTeam = {
 <template>
     <div>
         <div class="flex justify-end mb-1 px-4">
-            <ScoreboardShareButton :teamId="teamId" :team="team!" class="justify-self-end" />
+            <ScoreboardShareButton :teamId="teamId" :team="team!" />
         </div>
 
         <ScoreboardEmojiButton :id="currentEmote" class="block m-auto" :class="{ invisible: !currentEmote }" />
 
-        <div class="flex flex-col sm:flex-row justify-between items-center text-center mb-4 px-4">
+        <div class="flex flex-col sm:flex-row justify-around items-center mb-4">
             <ScoreboardTeamTile
                 :team="team"
                 :score="scoreboard?.teamScore ?? 0"
                 :show-buttons="!route.params.id"
                 @increment-score="incrementTeamScore($event)"
-                class="w-64"
+                class="text-center shrink-0"
             />
 
             <ScoreboardInningTile
@@ -63,7 +63,7 @@ const fakeTeam = {
                 :score="scoreboard?.otherTeamScore ?? 0"
                 :show-buttons="!route.params.id"
                 @increment-score="incrementOtherTeamScore($event)"
-                class="w-64"
+                class="text-center shrink-0"
             />
         </div>