Skip to content

Commit b1b8577

Browse files
g3forceg3force
committed
Improve UI scaling
1 parent d746e86 commit b1b8577

File tree

6 files changed

+109
-136
lines changed

6 files changed

+109
-136
lines changed

‎src/components/BotCount.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="bot-count">
3+
<div class="element">
4+
<img class="bot-pic" alt="bot" src="bot.png"/>
5+
</div>
6+
<div class="element bot-number">
7+
{{ numBots }}
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: "BotCount",
15+
props: {
16+
color: String,
17+
numBots: Number,
18+
}
19+
}
20+
</script>
21+
22+
<style scoped>
23+
24+
.bot-count {
25+
margin: 0.1em;
26+
font-size: 0.6em;
27+
}
28+
29+
.element {
30+
display: table-cell;
31+
vertical-align: middle;
32+
}
33+
34+
.bot-number {
35+
padding-left: 0.2em;
36+
}
37+
38+
.bot-pic {
39+
object-fit: contain;
40+
width: 1.5em;
41+
height: 2em;
42+
}
43+
44+
</style>

‎src/components/Card.vue‎

Lines changed: 28 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,42 @@
11
<template>
22
<div class="card">
3-
<div class="card-pic" :class="{'red-card': color === 'red', 'yellow-card': color === 'yellow'}"></div>
4-
<div class="card-count">
5-
{{numCards}}
3+
<div class="card-pic" :class="{'red-card': color === 'red', 'yellow-card': color === 'yellow'}">{{ numCards }}
64
</div>
75
</div>
86
</template>
97

108
<script>
11-
export default {
12-
name: "Card",
13-
props: {
14-
color: String,
15-
numCards: Number,
16-
}
9+
export default {
10+
name: "Card",
11+
props: {
12+
color: String,
13+
numCards: Number,
1714
}
15+
}
1816
</script>
1917

2018
<style scoped>
2119
22-
.card {
23-
display: inline-block;
24-
margin: 0.1em;
25-
height: 7vmin;
26-
min-width: 130px;
27-
text-align: center;
28-
}
29-
30-
.card-pic {
31-
border-radius: 0.5vmin;
32-
width: 3vmin;
33-
height: 5vmin;
34-
margin-left: 1vmin;
35-
display: inline-block;
36-
font-size: 12pt;
37-
/* IE 7 hack */
38-
*zoom: 1;
39-
*display: inline;
40-
vertical-align: middle;
41-
}
42-
43-
.card-count {
44-
display: inline-block;
45-
line-height: 7vmin;
46-
vertical-align: baseline;
47-
margin-right: 1vw;
48-
margin-left: 1vw;
49-
}
50-
51-
.yellow-card {
52-
background: #e9ea2a;
53-
}
54-
55-
.red-card {
56-
background: #ea1a18;
57-
}
20+
.card {
21+
margin: 0.1em;
22+
}
23+
24+
.card-pic {
25+
border-radius: 0.2em;
26+
width: 1.5em;
27+
height: 2em;
28+
font-size: 0.6em;
29+
display: table-cell;
30+
vertical-align: middle;
31+
}
32+
33+
.yellow-card {
34+
background: #e9ea2a;
35+
color: #2c3e50;
36+
}
37+
38+
.red-card {
39+
background: #ea1a18;
40+
}
5841
5942
</style>

‎src/components/GameEvents.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<tr v-for="(gameEvent, index) in gameEvents.slice(0,8)"
66
:key="index"
77
:style="{'font-size': rowHeight}">
8-
<td class="autoRefIndicator" v-html="autoRefIndicator(gameEvent)"></td>
98
<td v-html="formatGameEvent(gameEvent)"></td>
9+
<td class="autoRefIndicator" v-html="autoRefIndicator(gameEvent)"></td>
1010
</tr>
1111
</tbody>
1212
</table>
@@ -15,7 +15,7 @@
1515
</template>
1616

1717
<script>
18-
import {mapGameEventToText} from "../texts";
18+
import {mapGameEventToText} from "@/texts";
1919
2020
const maxUnscaledItems = 5.5;
2121
@@ -55,7 +55,7 @@
5555
5656
.game-events {
5757
text-align: left;
58-
font-size: 4.5vh;
58+
font-size: 0.7em;
5959
}
6060
6161
.table-striped {
@@ -74,12 +74,11 @@
7474
7575
.table-striped td {
7676
vertical-align: baseline;
77-
padding: 2px;
78-
padding-left: 10px;
77+
padding: 2px 2px 2px 10px;
7978
}
8079
8180
.more-game-events {
82-
font-size: 2.5vmin;
81+
font-size: 1em;
8382
text-align: center;
8483
margin-top: 10px;
8584
font-weight: bold;

‎src/components/MatchStatus.vue‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div class="match-status full-width">
3-
<div class="full-width">
4-
<div class="full-width" :class="{'highlight-command': true, 'stop-command': isStop, 'halt-command': isHalt}">
2+
<div class="match-status">
3+
<div>
4+
<div :class="{'highlight-command': true, 'stop-command': isStop, 'halt-command': isHalt}">
55
<div class="stage">{{stage}}</div>
66

77
<span class="score">
@@ -114,14 +114,11 @@
114114
align-items: center;
115115
}
116116
117-
.full-width {
118-
width: 100%;
119-
}
120-
121117
.time-container {
122118
border-style: dashed;
123119
display: inline-block;
124-
padding: 8px;
120+
padding: 0.1em;
121+
margin: 0.1em;
125122
}
126123
127124
.time-positive {
@@ -137,7 +134,6 @@
137134
138135
.separator {
139136
margin: 0.2em;
140-
width: 100%;
141137
}
142138
143139
.score {
@@ -157,8 +153,7 @@
157153
.highlight-command {
158154
transition: background-color 500ms ease;
159155
border-radius: .5em;
160-
padding: 0.1em;
161-
padding-top: 0.2em;
156+
padding: 0.2em 0.1em 0.1em;
162157
margin-top: 0.1em;
163158
}
164159

‎src/components/StatusBoard.vue‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,15 @@
3535
<style scoped>
3636
.status-board {
3737
text-align: center;
38-
height: 100%;
39-
max-height: 100%;
40-
font-size: 6vh;
38+
font-size: 3.5vw;
4139
}
4240
4341
.upper-container {
44-
width: 100%;
45-
align-items: center;
46-
height: 62%
42+
display: flex;
43+
align-items: stretch;
4744
}
4845
4946
.lower-container {
50-
height: 35%;
5147
}
5248
5349
.upper-lower-separator {
@@ -57,16 +53,13 @@
5753
}
5854
5955
.match-status-container {
60-
align-items: center;
61-
display: inline;
62-
width: 40%;
63-
height: 100%;
64-
float: left;
56+
flex-grow: 0.4;
57+
flex-basis: 40%;
6558
}
6659
6760
.team-status {
68-
width: 30%;
69-
float: left;
61+
flex-grow: 0.3;
62+
flex-basis: 30%;
7063
}
7164
7265
</style>

‎src/components/TeamStatus.vue‎

Lines changed: 19 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,15 @@
77
<img :src="logoUrl" alt="team logo" class="team-logo"/>
88

99
<div class="cards">
10-
<Card color="red" :num-cards="team.redCards"/>
11-
<span class="card-separator"> | </span>
12-
<Card color="yellow"
13-
:class="{'marked-card': markYellowCard}"
14-
:num-cards="team.yellowCards"/>
15-
<span class="card-separator"> | </span>
16-
<span class="botinfo">
17-
<img class="boticon" src="bot.png"/>
18-
{{team.maxAllowedBots}}
19-
</span>
20-
<div class="cardTimers">
10+
<Card class="card" color="red" :num-cards="team.redCards"/>
11+
<Card class="card" color="yellow" :num-cards="team.yellowCards"/>
12+
<BotCount class="card" :num-bots="team.maxAllowedBots"/>
13+
</div>
14+
15+
<div class="cardTimers">
2116
<span v-for="(cardTime, index) in team.yellowCardTimes.slice(0,3)" :key="index">
22-
<CardTimer
23-
:cardTimer="cardTime" />
17+
<CardTimer :cardTimer="cardTime" />
2418
</span>
25-
26-
27-
<div class="additional-cards" v-if="team.yellowCardTimes.length > 3"> + {{ team.yellowCardTimes.length - 3}} more </div>
28-
</div>
2919
</div>
3020
</div>
3121
</template>
@@ -35,10 +25,11 @@
3525
import teamLogoUrl from "@/teamLogoUrl"
3626
import Card from "./Card";
3727
import CardTimer from "./CardTimer";
28+
import BotCount from "@/components/BotCount";
3829
3930
export default {
4031
name: "TeamStatus",
41-
components: {Card, CardTimer},
32+
components: {BotCount, Card, CardTimer},
4233
props: {
4334
color: String,
4435
team: Referee.ITeamInfo,
@@ -47,9 +38,6 @@
4738
logoUrl() {
4839
return teamLogoUrl(this.team.name);
4940
},
50-
markYellowCard() {
51-
return this.team.yellowCards > 0 && this.team.yellowCards % 3 === 0;
52-
},
5341
botSubstitutionIntent() {
5442
return this.team.botSubstitutionIntent;
5543
}
@@ -59,9 +47,16 @@
5947

6048
<style scoped>
6149
50+
.cards {
51+
display: flex;
52+
justify-content: center;
53+
}
54+
55+
.card {
56+
}
57+
6258
.teamStatus {
6359
transition: background-color 500ms ease;
64-
6560
}
6661
6762
.bot-substitution-intent {
@@ -71,55 +66,19 @@
7166
.team-name {
7267
margin-top: 12px;
7368
margin-bottom: 12px;
74-
font-size: 5vh;
69+
font-size: 1em;
7570
display: flex;
7671
flex-direction: column;
7772
justify-content: flex-end;
7873
}
7974
8075
.team-logo {
81-
max-width: 27vw;
82-
max-height: 27vh;
83-
}
84-
85-
.marked-card {
86-
background-color: rgba(255, 255, 0, 0.2);
87-
}
88-
89-
.inline {
90-
display: inline;
91-
}
92-
93-
.logo-card-separator {
94-
margin: 0.2em;
76+
max-width: 60%;
9577
}
9678
9779
.cardTimers {
9880
margin-top: 6px;
9981
display: block;
10082
}
10183
102-
103-
.boticon {
104-
height: 4.5vmin;
105-
vertical-align: baseline;
106-
}
107-
108-
.botinfo {
109-
display: inline-block;
110-
min-width: 130px;
111-
height: 7vmin;
112-
line-height: 7vmin;
113-
vertical-align: baseline
114-
}
115-
116-
.additional-cards {
117-
font-size: 24pt;
118-
color: yellow;
119-
}
120-
121-
.card-separator {
122-
display: inline-block;
123-
padding-right: 2px;
124-
}
12584
</style>

0 commit comments

Comments
 (0)