Improve appearance of Salmon Run stages/weapons

src/css/_modifiers.scss

@@ -161,3 +161,13 @@
         padding-right: 0.4rem;
     }
 }
+
+.columns.is-slimmer {
+    margin-left: -0.2rem;
+    margin-right: -0.2rem;
+
+    .column {
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+    }
+}

src/css/main.scss

@@ -161,6 +161,14 @@ body.has-modal #main {
         }
     }
 
+    .weapon {
+        transition: transform 0.2s ease;
+
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+
     .calendar-attribution {
         background: rgba(0,0,0,0.5);
         font-family: $family-sans-serif;

src/js/components/splatoon/SalmonRunBox.vue

@@ -37,6 +37,7 @@
                         <div>
                             {{ currentSchedule.end_time - now | duration }} remaining
                         </div>
+
                         <SalmonRunDetailsBar :schedule="currentSchedule"></SalmonRunDetailsBar>
                     </div>
 
@@ -66,7 +67,7 @@
                                     </div>
                                 </div>
 
-                                <SalmonRunDetailsBar :schedule="event"></SalmonRunDetailsBar>
+                                <SalmonRunDetailsBar :schedule="event" :mini="true"></SalmonRunDetailsBar>
                             </div>
                         </div>
                     </div>

src/js/components/splatoon/SalmonRunDetailsBar.vue

@@ -1,19 +1,25 @@
 <template>
-    <div class="columns is-mobile">
-        <div class="column" v-if="schedule.stage" style="padding-top: 1rem">
-            <Stage :stage="schedule.stage"></Stage>
+    <div class="columns is-mobile is-slimmer" style="padding: 0.5rem 0" v-if="schedule.stage || schedule.weapons">
+        <div class="column" :class="mini ? 'is-3' : 'is-5'" v-if="schedule.stage">
+            <Stage :stage="schedule.stage" :showTitle="!mini"></Stage>
         </div>
-        <div class="column is-narrow" style="padding-top: 1rem">
-            <template v-if="schedule.weapons">
-                <div>Supplied Weapons</div>
-                <div class="columns is-gapless is-mobile">
+
+        <div class="column" style="display: flex; align-items: center;" v-if="mini && schedule.stage">
+            {{ schedule.stage.name }}
+        </div>
+
+        <div class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;" v-if="schedule.weapons">
+            <div style="width: 100%">
+                <div class="has-text-centered" v-if="!mini">Supplied Weapons</div>
+
+                <div class="columns is-mobile is-slimmer">
                     <div class="column" v-for="weapon in schedule.weapons">
-                        <div class="image is-48x48">
+                        <div class="image is-square weapon">
                             <img :src="weapon.image | localSplatNetImageUrl" :title="weapon.name" />
                         </div>
                     </div>
                 </div>
-            </template>
+            </div>
         </div>
     </div>
 </template>
@@ -23,6 +29,6 @@ import Stage from './Stage.vue';
 
 export default {
     components: { Stage },
-    props: ['schedule'],
+    props: ['schedule', 'mini'],
 }
 </script>

src/js/components/splatoon/Stage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="stage-image" :class="{ hand: clickable }" :style="style" @click="click" v-if="stageDetails">
         <figure class="image is-16by9"></figure>
-        <span class="stage-title">{{ stageDetails.name }}</span>
+        <span class="stage-title" v-if="showTitle">{{ stageDetails.name }}</span>
 
         <Modal v-if="isOpen" @close="isOpen = false">
             <div class="modal-content tilt-right-slight is-wide">
@@ -33,6 +33,7 @@ export default {
     components: { Modal },
     props: {
         stage: {},
+        showTitle: { default: true },
         clickable: { default: true },
     },
     data() {