From 0367405ede78dea6a6e18eccc48fe5fed56763cd Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Tue, 9 Mar 2021 12:57:43 -0800
Subject: [PATCH] Tweak Twitter image layouts to fit in the timeline view
 without cropping

---
 src/app/screenshots/screenshots.js            | 12 +++---
 src/web/assets/css/screenshots.scss           | 29 ++++++++++---
 src/web/components/screenshots/Wrapper.vue    | 41 +++++++++++++------
 .../screenshots/schedules/ScheduleBox.vue     | 29 ++++++++++---
 .../screenshots/schedules/Schedules.vue       |  6 +--
 .../screenshots/splatfest/Splatfest.vue       |  2 +-
 .../screenshots/splatnetgear/SplatNetGear.vue | 11 +----
 7 files changed, 86 insertions(+), 44 deletions(-)

diff --git a/src/app/screenshots/screenshots.js b/src/app/screenshots/screenshots.js
index 7f64623..29e0f37 100644
--- a/src/app/screenshots/screenshots.js
+++ b/src/app/screenshots/screenshots.js
@@ -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) {
diff --git a/src/web/assets/css/screenshots.scss b/src/web/assets/css/screenshots.scss
index 0ddbbc1..66900e3 100644
--- a/src/web/assets/css/screenshots.scss
+++ b/src/web/assets/css/screenshots.scss
@@ -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 {
diff --git a/src/web/components/screenshots/Wrapper.vue b/src/web/components/screenshots/Wrapper.vue
index dc69eb8..95b6beb 100644
--- a/src/web/components/screenshots/Wrapper.vue
+++ b/src/web/components/screenshots/Wrapper.vue
@@ -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);
diff --git a/src/web/components/screenshots/schedules/ScheduleBox.vue b/src/web/components/screenshots/schedules/ScheduleBox.vue
index 18233f2..8d8e7fe 100644
--- a/src/web/components/screenshots/schedules/ScheduleBox.vue
+++ b/src/web/components/screenshots/schedules/ScheduleBox.vue
@@ -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>
 
diff --git a/src/web/components/screenshots/schedules/Schedules.vue b/src/web/components/screenshots/schedules/Schedules.vue
index f2cf0d5..3bee7c9 100644
--- a/src/web/components/screenshots/schedules/Schedules.vue
+++ b/src/web/components/screenshots/schedules/Schedules.vue
@@ -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>
diff --git a/src/web/components/screenshots/splatfest/Splatfest.vue b/src/web/components/screenshots/splatfest/Splatfest.vue
index a20d6eb..1e6c189 100644
--- a/src/web/components/screenshots/splatfest/Splatfest.vue
+++ b/src/web/components/screenshots/splatfest/Splatfest.vue
@@ -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">
diff --git a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
index b536d12..01c3ee9 100644
--- a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
+++ b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
@@ -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"