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

Tweak Twitter image layouts to fit in the timeline view without cropping

Browse Source
This commit is contained in:
Matt Isenhower
2021-03-09 12:57:43 -08:00
parent a106353616
commit 0367405ede
7 changed files with 86 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/screenshots/screenshots.js
View File

@@ -5,8 +5,10 @@ const ecstatic = require('ecstatic');
const puppeteer = require('puppeteer');
const viewport = {
width: 1012, // Twitter's in-stream image width is 506px, 506*2 = 1012
height: 600,
// Using a 16:9 ratio here by default to match Twitter's image card dimensions
// 1216 was chosen as the width because of Bulma's "widescreen" breakpoint
width: 1216,
height: 684,
deviceScaleFactor: 2,
};
@@ -57,15 +59,13 @@ async function captureScreenshot(options) {
function captureScheduleScreenshot(now, splatfestBattle = false) {
let hash = `/schedules/${now}`;
let viewport = (splatfestBattle) ? { height: 800 } : undefined;
return captureScreenshot({ hash, viewport });
return captureScreenshot({ hash });
}
function captureGearScreenshot(now) {
let hash = `/splatNetGear/${now}`;
return captureScreenshot({ hash, viewport: { height: 700 } });
return captureScreenshot({ hash });
}
function captureSalmonRunScreenshot(now, mode) {

29
src/web/assets/css/screenshots.scss
View File

@@ -4,7 +4,7 @@
#screenshots {
.main-schedule-box {
border-radius: 20px;
mask-size: 800px 1280px; // Original value: 500px 800px
mask-size: 900px 1440px; // Original value: 500px 800px
padding-top: 50px;
.stage-image:not(:last-child) {
@@ -12,7 +12,7 @@
}
.stage-title {
font-size: 1.35rem;
font-size: 1.65rem;
}
}
@@ -27,7 +27,7 @@
}
.featured-merchandise {
transform: scale(1.85) rotate(-1.4deg);
transform: scale(1.9) rotate(-1.4deg);
min-width: 173px;
.info-overlay {
@@ -41,8 +41,21 @@
}
}
.still-available-merchandise {
transform: scale(0.9);
margin: -60px 0;
.merchandise-box {
font-size: 1.25rem;
}
.remaining-time {
font-size: 1.25rem !important;
}
}
.salmon-run {
transform: scale(1.5) rotate(-1.4deg);
transform: scale(1.85) rotate(-1.4deg);
}
.salmon-run-gear .merchandise-box {
@@ -74,7 +87,13 @@
.splatfest-results {
width: 275px;
transform: scale(1.35);
transform: scale(1.65);
}
.splatfest-screenshot {
.splatfest {
transform: scale(1.25) rotate(-1.4deg);
}
}
.twitter-logo {

41
src/web/components/screenshots/Wrapper.vue
View File

@@ -11,27 +11,39 @@
<div class="level">
<div class="level-left">
<div class="level-item">
<div>
<h1 class="title is-4 font-splatoon2">{{ title }}</h1>
<div class="font-splatoon2 is-size-7 has-text-grey-light">
<div class="image is-24x24 twitter-logo">
<img src="~@/web/assets/img/twitter-white.png" />
</div>
@splatoon2inkbot
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
splatoon2.ink
<div class="image is-32x32">
<img src="~@/web/assets/img/favicon.svg" />
</div>
</div>
<div class="level-item">
<h1 class="title is-4 font-splatoon2">{{ title }}</h1>
</div>
<div class="level-item">&nbsp;</div>
<div class="level-item">
<div class="font-splatoon2 is-size-7 has-text-grey-light">
<div class="image is-24x24 twitter-logo">
<img src="~@/web/assets/img/twitter-white.png" />
</div>
@splatoon2inkbot
</div>
</div>
<div class="level-item">&nbsp;</div>
<div class="level-item">
<div class="font-splatoon2 is-size-7 has-text-grey-light">
splatoon2.ink
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="font-splatoon2 is-size-6 has-text-white">
{{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
</div>
</div>
<div class="level-item" v-if="!hideLocalTimes">
<div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
<table>
<tr>
<td colspan="3" class="is-size-6 has-text-white">{{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}</td>
</tr>
<tr>
<td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
<td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
@@ -55,7 +67,10 @@ import { mapGetters } from 'vuex';
import moment from 'moment-timezone';
export default {
props: ['title'],
props: {
title: null,
hideLocalTimes: Boolean,
},
filters: {
dateTime(value, locale, timeZone, format = 'LLL z') {
let date = moment.unix(value).tz(timeZone);

29
src/web/components/screenshots/schedules/ScheduleBox.vue
View File

@@ -1,12 +1,12 @@
<template>
<div v-if="schedule" :class="mode">
<h3 class="title is-3 font-splatoon1 has-text-centered">
<h3 class="title is-2 font-splatoon1 has-text-centered">
<template v-if="splatfestBattle">{{ $t('splatfest.battle') }}</template>
<template v-else>{{ schedule.game_mode.name }}</template>
</h3>
<h5 class="subtitle is-4 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
<div class="image is-32x32" style="margin-bottom: -8px; display: inline-block">
<h5 class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
<div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
<img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
<img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
<img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
@@ -15,9 +15,26 @@
{{ schedule.rule.name }}
</h5>
<Stage :stage="schedule.stage_a" />
<Stage :stage="schedule.stage_b" />
<Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
<div v-if="splatfestBattle && currentSplatfest">
<div class="columns">
<div class="column">
<Stage :stage="schedule.stage_a" />
</div>
<div class="column">
<Stage :stage="schedule.stage_b" />
</div>
</div>
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
</div>
</div>
</div>
<div v-else>
<Stage :stage="schedule.stage_a" />
<Stage :stage="schedule.stage_b" />
</div>
</div>
</template>

6
src/web/components/screenshots/schedules/Schedules.vue
View File

@@ -13,7 +13,7 @@
<ScheduleBox class="main-schedule-box tilt-left" mode="league" />
</div>
</div>
<div class="columns is-gapless font-splatoon2" v-else>
<div class="columns font-splatoon2" v-else>
<div class="column" style="display: flex">
<div class="splatfest">
<div class="hook-box">
@@ -44,8 +44,8 @@
</template>
</div>
</div>
<div class="column is-5">
<ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: 335px; margin-right: 20px" />
<div class="column">
<ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
</div>
</div>
</Wrapper>

2
src/web/components/screenshots/splatfest/Splatfest.vue
View File

@@ -1,5 +1,5 @@
<template>
<Wrapper :title="title" v-if="festival">
<Wrapper :title="title" class="splatfest-screenshot" v-if="festival" hide-local-times>
<div class="level">
<div class="level-item">
<div class="splatfest tilt-left">

11
src/web/components/screenshots/splatnetgear/SplatNetGear.vue
View File

@@ -1,14 +1,5 @@
<template>
<Wrapper title="SplatNet Gear" v-if="merchandises">
<div class="columns">
<div class="column is-5">
<h1 class="title is-3 font-splatoon2 has-text-centered">New Gear</h1>
</div>
<div class="column" style="display: flex; align-items: center; justify-content: center;">
<h1 class="title is-4 font-splatoon2 has-text-centered">Still Available</h1>
</div>
</div>
<div class="columns">
<div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
<MerchandiseBox
@@ -18,7 +9,7 @@
</div>
<div class="column" style="display: flex; align-items: center; justify-content: center;">
<div class="columns is-multiline is-centered">
<div class="still-available-merchandise columns is-multiline is-centered">
<div class="column is-one-third" v-for="(merchandise, index) in otherMerchandises" :key="index">
<MerchandiseBox
:merchandise="merchandise"