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

Add a calendar dialog with links to the calendar feeds

Browse Source 
#14
This commit is contained in:
Matt Isenhower 2018-07-01 13:21:26 -07:00
parent 61a20d9a0d
commit 27620ba647
10 changed files with 225 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docker/nginx/conf.d/default.conf
View File

@ -24,6 +24,10 @@ server {
add_header Cache-Control no-cache;
}
location ~ \.ics$ {
add_header Content-Type text/calendar;
}
# CORS (for third-party integrations)
location /assets/ {
add_header Access-Control-Allow-Origin *;

2
package.json
View File

@ -20,6 +20,7 @@
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"bulma": "^0.6.1",
"bulma-tooltip": "^2.0.1",
"clean-webpack-plugin": "^0.1.16",
"console-stamp": "^0.2.5",
"copy-webpack-plugin": "^4.0.1",
@ -50,6 +51,7 @@
"twitter": "^1.7.1",
"v-click-outside": "^1.0.0",
"vue": "^2.4.2",
"vue-clipboard2": "^0.2.0",
"vue-loader": "^13.0.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.4.2",

34
src/css/main.scss
View File

@ -4,6 +4,7 @@
@import './modifiers';
@import './backgrounds';
@import './boxes';
@import '~bulma-tooltip';
html {
@extend .bg-squids;
@ -421,6 +422,39 @@ body.has-modal #main {
}
}
.calendar-box {
position: relative;
margin-top: 100px;
margin-bottom: 100px;
.hook-box, .hook-box:before {
background-color: $purple;
@extend .bg-stripes-gradient;
}
@include desktop {
.hook-box:before {
mask-position: calc(50% - 20px) top;
background-position-x: -20px !important;
}
.hook-box {
margin: 0 40px 0 0;
}
}
.hook-box {
padding: 25px;
overflow: visible;
}
.hero-image {
width: 300px;
height: 307px;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 20% 80%, 0 80%);
margin: -60px -55px 0 0;
}
}
.main-schedule {
background: rgba(0,0,0,0.7);
padding: 5px 10px 10px;

BIN
src/img/hero-char-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

83
src/js/components/CalendarDialog.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<Modal @close="$emit('close')">
<div class="modal-content tilt-left-slight">
<div class="calendar-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">
<img src="~@/img/hero-char-2.png" />
</div>
Calendar Feeds
</h3>
<div class="inner-content">
<p>
Add data from Splatoon2.ink to your calendar!
</p>
<h4 class="font-splatoon2 title is-4">
Salmon Run
</h4>
<p>
<CalendarLink
title="Salmon Run Schedules"
link="data/coop-schedules.ics"
google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
/>
</p>
<h4 class="font-splatoon2 title is-4">
Splatfests
</h4>
<p>
<CalendarLink
:title="$t('regions.na.name')"
link="data/festivals-na.ics"
google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
/>
<CalendarLink
:title="$t('regions.eu.name')"
link="data/festivals-eu.ics"
google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
/>
<CalendarLink
:title="$t('regions.jp.name')"
link="data/festivals-jp.ics"
google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
/>
</p>
</div>
</div>
</div>
</div>
</div>
</Modal>
</template>
<style scoped>
.modal-content {
max-height: 100vh;
}
.hero-image {
z-index: 1;
}
.inner-content {
position: relative;
z-index: 2;
}
</style>
<script>
import analytics from '@/js/analytics';
import Modal from './Modal.vue';
import CalendarLink from './CalendarLink.vue';
export default {
components: { Modal, CalendarLink },
mounted() {
analytics.event('About', 'Open');
},
}
</script>

57
src/js/components/CalendarLink.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="dropdown" :class="{ 'is-active': isOpen }">
<div class="dropdown-trigger">
<a :href="directLink" class="button is-link is-rounded" :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }" data-tooltip="Copied!" @click.prevent="isOpen = !isOpen" v-click-outside="hide">
<span class="font-splatoon2">{{ title }}</span>
<span class="icon is-small">
<span class="chevron bottom"></span>
</span>
</a>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content font-splatoon2 has-text-left">
<a :href="googleLink" target="_blank" class="dropdown-item">
Google Calendar
</a>
<a :href="webcalLink" target="_blank" class="dropdown-item">
Apple Calendar/Outlook
</a>
<a :href="directLink" target="_blank" class="dropdown-item" @click.prevent.stop="hide" v-clipboard:copy="directLink" v-clipboard:success="onCopy">
Copy ICS Link
</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['title', 'link', 'googleId'],
data() {
return {
isOpen: false,
showTooltip: false,
};
},
computed: {
googleLink() {
return `https://www.google.com/calendar/render?cid=${this.googleId}`;
},
webcalLink() {
return `webcal://splatoon2.ink/${this.link}`;
},
directLink() {
return `https://splatoon2.ink/${this.link}`;
},
},
methods: {
hide() {
this.isOpen = false;
this.showTooltip = false;
},
onCopy() {
this.showTooltip = true;
},
},
};
</script>

2
src/js/components/Main.vue
View File

@ -140,6 +140,8 @@
&ndash;
<router-link to="/about">{{ $t('ui.about') }}</router-link>
&ndash;
<router-link to="/calendars">Calendar Feeds</router-link>
&ndash;
<a href="https://twitter.com/Splatoon2inkbot" target="_blank">Twitter</a>
<template v-if="splatnet.festivals">
&ndash;

3
src/js/directives.js
View File

@ -4,6 +4,9 @@ import Vue from 'vue';
import vClickOutside from 'v-click-outside';
Vue.use(vClickOutside);
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
// Simple v-portal directive to push modal popups to the end of the DOM.
// This helps when launching a popup inside of an element with position: relative.
Vue.directive('portal', {

4
src/js/router.js
View File

@ -12,6 +12,10 @@ const routes = [
path: 'about',
component: require('./components/AboutDialog.vue').default,
},
{
path: 'calendars',
component: require('./components/CalendarDialog.vue').default,
},
{
path: 'splatnet',
},

36
yarn.lock
View File

@ -1096,6 +1096,10 @@ builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
bulma-tooltip@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/bulma-tooltip/-/bulma-tooltip-2.0.1.tgz#c268f990b7b88b86dbf95178275235c5475a1988"
bulma@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.1.tgz#5f21a77c0c06f7d80051c06628c23516081bd649"
@ -1269,6 +1273,14 @@ cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
clipboard@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -1799,6 +1811,10 @@ delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@ -2675,6 +2691,12 @@ globule@^1.0.0:
lodash "~4.17.4"
minimatch "~3.0.2"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
dependencies:
delegate "^3.1.2"
graceful-fs@^4.1.2, graceful-fs@^4.1.6:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@ -5367,6 +5389,10 @@ select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
selfsigned@^1.9.1:
version "1.10.1"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
@ -5926,6 +5952,10 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
tiny-emitter@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@ -6227,6 +6257,12 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue-clipboard2@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.2.0.tgz#7ed413bef09c25481f6b56301a1e618c37786d55"
dependencies:
clipboard "^2.0.0"
vue-hot-reload-api@^2.2.0:
version "2.2.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"