Leahnaya/splatoon2.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon2.ink.git synced 2026-08-27 21:14:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve text flow in schedule boxes

Browse Source
This commit is contained in:
Matt Isenhower
2017-08-03 19:27:27 -07:00
parent 090e6d791a
commit 12d05c43dd
2 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/main.scss
View File

@@ -19,35 +19,16 @@ html {
padding: 35px 10px 10px 10px;
margin: auto;
.schedule-icon {
display: inline-block;
width: 42px;
height: 38px;
background-size: auto 38px;
background-repeat: no-repeat;
background-position: center;
margin: 0 4px -4px 0;
}
&.regular {
background-color: $bg-battle-regular;
.schedule-icon {
background-image: url(../img/battle-regular.png);
}
}
&.ranked {
background-color: $bg-battle-ranked;
.schedule-icon {
background-image: url(../img/battle-ranked.png);
}
}
&.league {
background-color: $bg-battle-league;
.schedule-icon {
background-image: url(../img/battle-league.png);
}
}
}

19
src/js/components/ScheduleBox.vue
View File

@@ -1,8 +1,21 @@
<template>
<div class="font-splatoon2" v-if="firstSchedule">
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
<span class="schedule-icon"></span>{{ firstSchedule.game_mode.name }}
</h2>
<div class="level">
<div class="level-left">
<div class="level-item">
<div class="image is-48x48" style="margin-bottom: -6px">
<img v-if="firstSchedule.game_mode.key == 'regular'" src="../../img/battle-regular.png" />
<img v-if="firstSchedule.game_mode.key == 'gachi'" src="../../img/battle-ranked.png" />
<img v-if="firstSchedule.game_mode.key == 'league'" src="../../img/battle-league.png" />
</div>
</div>
<div class="level-item">
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
{{ firstSchedule.game_mode.name }}
</h2>
</div>
</div>
</div>
<div class="main-schedule">
<div class="level is-mobile top-bar">