Hide certain info and use team codes on mobile viewports - closes #75

slmnio · Nov 12, 2021 · 4cd9848 · 4cd9848
1 parent 3b1df04
commit 4cd9848
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/website/src/components/broadcast/Standings.vue b/website/src/components/broadcast/Standings.vue
@@ -1,13 +1,15 @@
 <template>
     <div class="standings" v-if="standings && standings.length">
 <!--        <div>{{ event.name }} / {{ stage }} / {{ allMatches.length }} -> {{ stageMatches.length }} ({{ teams.length }} teams)</div>-->
+        <h3 class="top-standings-name text-center d-md-none">{{ title || stage || 'Team' }}</h3>
         <div class="standings-header d-flex align-items-center">
-            <div class="team-name flex-grow-1 text-left">{{ title || stage || 'Team' }}</div>
+            <div class="team-name flex-grow-1 text-left d-none d-md-flex">{{ title || stage || 'Team' }}</div>
+            <div class="team-name team-code flex-grow-1 text-left d-md-none"></div>
             <div class="team-stats d-flex">
                 <div class="team-stat text-center">Matches</div>
                 <div class="team-stat text-center">Maps</div>
                 <div class="team-stat text-center">Map Diff</div>
-                <div v-if="useOMW" class="team-stat text-center" title="Opponent Match Winrate">OMW</div>
+                <div v-if="useOMW" class="team-stat text-center d-none d-md-block" title="Opponent Match Winrate">OMW</div>
 <!--                <div class="team-stat text-center">Points</div>-->
             </div>
         </div>
@@ -249,7 +251,7 @@ export default {
         font-size: .75em;
     }
 
-    .standings-header {
+    .standings-header, .top-standings-name {
         font-weight: bold;
         text-transform: uppercase;
     }

diff --git a/website/src/components/broadcast/StandingsTeam.vue b/website/src/components/broadcast/StandingsTeam.vue
@@ -2,9 +2,10 @@
     <div class="standings-team d-flex">
         <div class="team-rank flex-shrink-0">{{ tieText && !teamStats["tie_show_number"] ? tieText : teamStats["rank"] }}</div>
         <ThemeLogo class="team-logo flex-shrink-0" :theme="team.theme" icon-padding="0.2em" border-width="0.15em" />
-        <router-link :to="url('team', team)" class="team-name no-link-style flex-grow-1 text-left">{{ team.name }}</router-link>
+        <router-link :to="url('team', team)" class="team-name no-link-style flex-grow-1 text-left d-none d-md-flex">{{ team.name }}</router-link>
+        <router-link :to="url('team', team)" class="team-name team-code no-link-style flex-grow-1 text-left d-md-none">{{ team.code }}</router-link>
         <div class="team-stats d-flex">
-            <div class="team-stat text-center" v-for="stat in stats" v-bind:key="stat">
+            <div class="team-stat text-center" v-for="stat in stats" v-bind:key="stat" v-bind:class="{'d-none d-md-block': ['omw'].includes(stat) }">
                 {{ teamStats[stat] }}
             </div>
         </div>

diff --git a/website/src/views/sub-views/EventStandings.vue b/website/src/views/sub-views/EventStandings.vue
@@ -55,6 +55,10 @@ export default {
     }
     .standings >>> .team-name {
         margin-right: 32px;
-        min-width: 300px;
+        min-width: 250px;
+    }
+    .standings >>> .team-name.team-code {
+        margin-right: 32px;
+        min-width: 50px;
     }
 </style>