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

Fix a few issues on mobile

Browse Source
This commit is contained in:
Matt Isenhower
2017-08-11 15:32:31 -07:00
parent 1000a1600e
commit 0e81539ca1
4 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/js/components/Modal.vue
View File

@@ -2,30 +2,34 @@
<transition name="modal">
<div class="modal is-active" v-portal>
<div class="modal-background" @click="$emit('close')"></div>
<div class="modal-inner-transition">
<slot></slot>
</div>
<slot></slot>
<button class="modal-close is-large" @click="$emit('close')"></button>
</div>
</transition>
</template>
<style>
<style lang="scss">
.modal-enter-active, .modal-leave-active {
transition: all 0.15s ease;
&, &>.modal-content, &>.modal-card {
transition: all 0.15s ease;
}
}
.modal-enter, .modal-leave-active {
opacity: 0;
}
.modal-enter-active .modal-inner-transition, .modal-leave-active .modal-inner-transition {
transition: all 0.15s ease;
}
.modal-enter .modal-inner-transition, .modal-leave-active .modal-inner-transition {
-webkit-transform: scale(0.98);
transform: scale(0.98);
&>.modal-content, &>.modal-card {
&.tilt-left-slight {
-webkit-transform: rotate(-1.0deg) scale(0.98);
transform: rotate(-1.0deg) scale(0.98);
}
&.tilt-right-slight {
-webkit-transform: rotate(1.0deg) scale(0.98);
transform: rotate(1.0deg) scale(0.98);
}
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
}
</style>

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

@@ -38,7 +38,6 @@
<Modal v-if="isOpen" @close="isOpen = false" class="font-splatoon2">
<div class="modal-card schedule-box tilt-left-slight" :class="cssClass">
<header class="modal-card-head">
<GameModeHeader :gameMode="gameMode"></GameModeHeader>
</header>
<section class="modal-card-body">

4
src/js/components/ScheduleList.vue
View File

@@ -11,7 +11,7 @@
</div>
<template v-if="!onlyFirst">
<div v-if="second">
<div class="is-size-5 title-squid font-splatoon1">
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
Next
</div>
@@ -19,7 +19,7 @@
</div>
<div v-if="others && others.length">
<div class="is-size-5 title-squid font-splatoon1">
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
Future
</div>

16
src/js/components/ScheduleRow.vue
View File

@@ -5,12 +5,16 @@
<div class="level-item title-color is-size-5">{{ schedule.rule.name }}</div>
</div>
<div class="level-right">
<div class="level-item">
<template v-if="schedule.start_time > now">
in {{ schedule.start_time - now | duration }},
</template>
{{ schedule.start_time | time }} &ndash;
{{ schedule.end_time | time }}
<div class="level-item has-text-right">
<div>
<template v-if="schedule.start_time > now">
in {{ schedule.start_time - now | duration }}<span class="is-hidden-mobile">,&nbsp;</span>
</template>
<div class="is-size-7">
{{ schedule.start_time | time }} &ndash;
{{ schedule.end_time | time }}
</div>
</div>
</div>
</div>
</div>