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

Improve appearance of Salmon Run box

Browse Source
This commit is contained in:
Matt Isenhower
2017-08-03 19:20:53 -07:00
parent 87c6dc10ef
commit 090e6d791a
4 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/css/main.scss
View File

@@ -57,8 +57,22 @@ html {
margin: 40px auto 0;
.hook-box, .hook-box:before {
background-color: darken(#ff5600, 10%);
background-color: darken(#ff5600, 0%);
@extend .bg-spots-dots;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.salmon-run-header, .salmon-run-content {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.salmon-run-content {
padding-top: 15px;
}
}

BIN
src/img/mr-grizz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
src/img/salmon-run.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

57
src/js/components/SalmonRunBox.vue
View File

@@ -1,21 +1,48 @@
<template>
<div class="font-splatoon2">
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
Salmon Run
</h2>
<div class="is-size-5 title-squid font-splatoon1">
<span v-if="isOpen">Now open!</span>
<span v-else>Soon!</span>
<div class="salmon-run-header">
<div class="level">
<div class="level-left">
<div class="level-item">
<div class="image is-48x48">
<img src="../../img/mr-grizz.png" style="margin-top: -5px" />
</div>
</div>
<div class="level-item">
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
Salmon Run
</h2>
</div>
</div>
</div>
</div>
<div>
{{ coop.schedule.start_time | time }} &ndash;
{{ coop.schedule.end_time | time }}
</div>
<div v-if="isOpen">
{{ coop.schedule.end_time - now | duration }} remaining
</div>
<div v-else>
in {{ coop.schedule.start_time - now | duration }}
<div class="salmon-run-contentz">
<div class="columns is-gapless">
<div class="column is-5">
<div class="image is-16by9">
<img src="../../img/salmon-run.png" style="z-index: 1" />
</div>
</div>
<div class="column">
<div class="salmon-run-content">
<div class="is-size-5 title-squid font-splatoon1">
<span v-if="isOpen">Now open!</span>
<span v-else>Soon!</span>
</div>
<div class="title-color is-size-5">
{{ coop.schedule.start_time | time }} &ndash;
{{ coop.schedule.end_time | time }}
</div>
<div v-if="isOpen">
{{ coop.schedule.end_time - now | duration }} remaining
</div>
<div v-else>
in {{ coop.schedule.start_time - now | duration }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>