mirror of
https://github.com/misenhower/splatoon2.ink.git
synced 2026-09-11 20:15:26 -05:00
Add a blur effect when a modal dialog is open
This commit is contained in:
Matt Isenhower
@@ -9,6 +9,10 @@ html {
|
||||
@extend .bg-squids;
|
||||
}
|
||||
|
||||
body.has-modal #main {
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.fa {
|
||||
&:before {
|
||||
display: inline-block;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero is-fullheight" id="main">
|
||||
<div class="hero-head">
|
||||
<div class="container is-fluid">
|
||||
<div class="level is-marginless">
|
||||
@@ -87,59 +87,58 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal is-active" v-if="aboutOpen" v-portal>
|
||||
<div class="modal-background" @click="aboutOpen = false"></div>
|
||||
<div class="modal-content tilt-left-slight" style="max-height: 100vh">
|
||||
<div class="about-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch" style="width: 307px; height: 250px;">
|
||||
<img src="../../img/hero-char.png" />
|
||||
</div>
|
||||
Hello!
|
||||
</h3>
|
||||
<p>
|
||||
Splatoon2.ink shows the current and upcoming map schedule for Splatoon 2.
|
||||
</p>
|
||||
<p>
|
||||
This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
|
||||
and <a href="http://bulma.io/" target="_blank">Bulma</a>.
|
||||
All data comes from the SplatNet 2 API.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
|
||||
or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
|
||||
</p>
|
||||
<h5 class="font-splatoon2 title is-5">Known Issues</h5>
|
||||
<p>
|
||||
<strong>Salmon Run:</strong>
|
||||
Times are only displayed when a Salmon Run stage is open.
|
||||
The API doesn't provide a way to see maps, available weapons, or upcoming Salmon Run times.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Splatfests:</strong>
|
||||
Only North American Splatfests are displayed since the API seems to be restricted to the region you purchased the game from.
|
||||
I may manually enter times for Splatfests in other regions in the future.
|
||||
</p>
|
||||
</div>
|
||||
<Modal v-if="aboutOpen" @close="aboutOpen = false">
|
||||
<div class="modal-content tilt-left-slight" style="max-height: 100vh">
|
||||
<div class="about-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch" style="width: 307px; height: 250px;">
|
||||
<img src="../../img/hero-char.png" />
|
||||
</div>
|
||||
Hello!
|
||||
</h3>
|
||||
<p>
|
||||
Splatoon2.ink shows the current and upcoming map schedule for Splatoon 2.
|
||||
</p>
|
||||
<p>
|
||||
This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
|
||||
and <a href="http://bulma.io/" target="_blank">Bulma</a>.
|
||||
All data comes from the SplatNet 2 API.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
|
||||
or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
|
||||
</p>
|
||||
<h5 class="font-splatoon2 title is-5">Known Issues</h5>
|
||||
<p>
|
||||
<strong>Salmon Run:</strong>
|
||||
Times are only displayed when a Salmon Run stage is open.
|
||||
The API doesn't provide a way to see maps, available weapons, or upcoming Salmon Run times.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Splatfests:</strong>
|
||||
Only North American Splatfests are displayed since the API seems to be restricted to the region you purchased the game from.
|
||||
I may manually enter times for Splatfests in other regions in the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" @click="aboutOpen = false"></button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Dropdown from './Dropdown.vue';
|
||||
import Modal from './Modal.vue';
|
||||
import ScheduleBox from './ScheduleBox.vue';
|
||||
import SalmonRunBox from './SalmonRunBox.vue';
|
||||
import SplatfestBox from './SplatfestBox.vue';
|
||||
|
||||
export default {
|
||||
components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox },
|
||||
components: { Dropdown, Modal, ScheduleBox, SalmonRunBox, SplatfestBox },
|
||||
data() {
|
||||
return {
|
||||
regions: [
|
||||
|
||||
33
src/js/components/Modal.vue
Normal file
33
src/js/components/Modal.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="modal is-active" v-portal>
|
||||
<div class="modal-background" @click="$emit('close')"></div>
|
||||
<slot />
|
||||
<button class="modal-close is-large" @click="$emit('close')"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const openModals = [];
|
||||
|
||||
function opened(vm) {
|
||||
openModals.push(vm);
|
||||
document.body.classList.add('has-modal');
|
||||
}
|
||||
|
||||
function closed(vm) {
|
||||
let index = openModals.indexOf(vm);
|
||||
if (index > -1)
|
||||
openModals.splice(index, 1);
|
||||
if (openModals.length === 0)
|
||||
document.body.classList.remove('has-modal');
|
||||
}
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
opened(this);
|
||||
},
|
||||
beforeDestroy() {
|
||||
closed(this);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -35,8 +35,7 @@
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<div class="modal is-active font-splatoon2" v-if="isOpen" v-portal>
|
||||
<div class="modal-background" @click="isOpen = false"></div>
|
||||
<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">
|
||||
|
||||
@@ -46,18 +45,18 @@
|
||||
<ScheduleList :schedules="schedules" :now="now" :onlyFirst="false"></ScheduleList>
|
||||
</section>
|
||||
</div>
|
||||
<button class="modal-close is-large" @click="isOpen = false"></button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
import GameModeHeader from './GameModeHeader.vue';
|
||||
import Stage from './Stage.vue';
|
||||
import ScheduleList from './ScheduleList.vue';
|
||||
|
||||
export default {
|
||||
components: { GameModeHeader, Stage, ScheduleList },
|
||||
components: { Modal, GameModeHeader, Stage, ScheduleList },
|
||||
props: ['schedules', 'cssClass', 'festival', 'now'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -3,25 +3,26 @@
|
||||
<figure class="image is-16by9"></figure>
|
||||
<span class="stage-title">{{ stage.name }}</span>
|
||||
|
||||
<div class="modal is-active" v-if="isOpen" v-portal>
|
||||
<div class="modal-background" @click="isOpen = false"></div>
|
||||
<div class="modal-content tilt-right-slight">
|
||||
<p class="image is-16by9">
|
||||
<img :src="image" />
|
||||
</p>
|
||||
<p class="has-text-centered">
|
||||
<span class="font-splatoon2">
|
||||
{{ stage.name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" @click="isOpen = false"></button>
|
||||
</div>
|
||||
<Modal v-if="isOpen" @close="isOpen = false">
|
||||
<div class="modal-content tilt-right-slight">
|
||||
<p class="image is-16by9">
|
||||
<img :src="image" />
|
||||
</p>
|
||||
<p class="has-text-centered">
|
||||
<span class="font-splatoon2">
|
||||
{{ stage.name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
export default {
|
||||
components: { Modal },
|
||||
props: ['stage'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user