web: Redesign desktop layout for instream and siderail

klicker/components/ui/b-card.vue

@@ -6,6 +6,7 @@
   >
     <div
       :class="{
+        'bg-background': elevation == -1,
         'bg-background/75': elevation == 0,
         'bg-contrast/[0.08]': elevation == 1,
         'bg-white/[.02]': elevation == 2,

klicker/components/ui/b-scroll-spy.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="rootContainer">
+  <div
+    ref="rootContainer"
+    class="overflow-y-auto hide-scrollbar"
+  >
     <nav
       ref="toc"
       class="relative"

klicker/components/ui/b-split-dashboard.vue

@@ -1,27 +1,37 @@
 <template>
   <div
-    class="grid grid-cols-1 gap-8"
+    class="grid grid-cols-1 gap-4"
     :class="{
-      'lg:grid-cols-[16rem,minmax(0,1fr)]': 'aside' in $slots,
+      'lg:grid-cols-[30rem,minmax(0,1fr),0]': ('aside-left' in $slots) && !('aside-right' in $slots),
+      'lg:grid-cols-[0,minmax(0,1fr),20rem]': !('aside-left' in $slots) && ('aside-right' in $slots),
+      'lg:grid-cols-[20rem,minmax(0,1fr)] 2xl:grid-cols-[30rem,minmax(0,1fr),20rem]': ('aside-left' in $slots) && ('aside-right' in $slots),
     }"
   >
-    <aside class="relative z-20">
-      <div class="lg:sticky lg:top-0 max-w-md">
-        <slot name="aside"></slot>
+    <aside class="order-1">
+      <div class="lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:flex lg:flex-col lg:items-end">
+        <slot name="aside-left"></slot>
       </div>
     </aside>
 
-    <div class="relative z-10">
+    <div class="order-3 lg:my-0 2xl:order-2 relative z-10">
       <slot></slot>
     </div>
+
+    <aside class="order-2 md:hidden 2xl:block 2xl:order-3 relative z-20">
+      <div class="lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:flex lg:flex-col lg:items-start">
+        <slot name="aside-right"></slot>
+      </div>
+    </aside>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 /**
- * Split design with a sticky aside on the left and the main content on the right
+ * Split design with a sticky aside left and right and the main content on the right
+ *
+ * The right aside should only contain supplementary information as it will not be visible on md/lg/xl
  */
 export default defineComponent({
 })

web/components.d.ts

@@ -8,11 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AbsoluteTime: typeof import('./components/absolute-time.vue')['default']
-    AccessoryTierList: typeof import('./components/accessory-tier-list.vue')['default']
+    AccessoryTierListPage: typeof import('./components/accessory-tier-list-page.vue')['default']
     Ad: typeof import('./components/ad.vue')['default']
     AdblockBait: typeof import('./components/adblock-bait.vue')['default']
     AdCell: typeof import('./components/ad-cell.vue')['default']
-    Adsense: typeof import('./components/adsense.vue')['default']
     AiReport1: typeof import('./components/ai-report-1.vue')['default']
     AiReport2: typeof import('./components/ai-report-2.vue')['default']
     AppBottomNav: typeof import('./components/app-bottom-nav.vue')['default']
@@ -47,6 +46,7 @@ declare module 'vue' {
     BrawlerVoicelines: typeof import('./components/brawler/brawler-voicelines.vue')['default']
     BrawlerWeaknessesCard: typeof import('./components/brawler/brawler-weaknesses-card.vue')['default']
     Breadcrumbs: typeof import('./components/breadcrumbs.vue')['default']
+    BTitle: typeof import('./components/b-title.vue')['default']
     ClubActivityTable: typeof import('./components/club/club-activity-table.vue')['default']
     ClubAside: typeof import('./components/club/club-aside.vue')['default']
     ClubMemberTable: typeof import('./components/club/club-member-table.vue')['default']
@@ -110,7 +110,6 @@ declare module 'vue' {
     PlayerTimeStatistics: typeof import('./components/player/player-time-statistics.vue')['default']
     PlayerTrophyStatistics: typeof import('./components/player/player-trophy-statistics.vue')['default']
     PlaywirePrivacy: typeof import('./components/playwire-privacy.vue')['default']
-    PlaywireRamp: typeof import('./components/playwire-ramp.vue')['default']
     ProdigyAd: typeof import('./components/prodigy-ad.vue')['default']
     QuizCard: typeof import('./components/quiz/quiz-card.vue')['default']
     QuizCtaCard: typeof import('./components/quiz/quiz-cta-card.vue')['default']
@@ -131,6 +130,7 @@ declare module 'vue' {
     SModeMap: typeof import('./components/klicker/s-mode-map.vue')['default']
     SPlayerName: typeof import('./components/klicker/s-player-name.vue')['default']
     SPlayerTag: typeof import('./components/klicker/s-player-tag.vue')['default']
+    SplitPage: typeof import('./components/split-page.vue')['default']
     SPower: typeof import('./components/klicker/s-power.vue')['default']
     SPowerplay: typeof import('./components/klicker/s-powerplay.vue')['default']
     SSeason: typeof import('./components/klicker/s-season.vue')['default']

web/components/accessory-tier-list.vue → web/components/accessory-tier-list-page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <split-page :title="$t(`tier-list.${singular}.title`)">
     <breadcrumbs
       id="breadcrumbs"
       :links="[{
@@ -71,7 +71,7 @@
         </template>
       </c-dashboard>
     </b-page-section>
-  </div>
+  </split-page>
 </template>
 
 <script lang="ts">

web/components/ad.vue

@@ -1,9 +1,38 @@
 <template>
   <template v-if="allowed">
     <div
-      v-if="banner"
+      v-if="takeover"
       v-bind="$attrs"
-      class="text-center -mx-4"
+      class="text-center"
+    >
+      <client-only>
+        <!-- hybrid-banner for takeover -->
+        <!-- Desktop - Multisize Leaderboard: 728x90, 970x90, 970x250 -->
+        <venatus-placement
+          v-if="desktop"
+          ad-id="65e6c8a054d81a72e65b58dd"
+          class="desktop-multileaderboard"
+          data-display-type="hybrid-banner"
+        ></venatus-placement>
+
+        <!-- Mobile - In-Content: 300x250, 336x280, 320x100, 300x100 -->
+        <venatus-placement
+          v-if="!desktop"
+          ad-id="65f94f6d767223575b4de5b3"
+          class="mobile-incontent"
+          data-display-type="hybrid-banner"
+        ></venatus-placement>
+
+        <template v-slot:placeholder>
+          <div class="placeholder-takeover"></div>
+        </template>
+      </client-only>
+    </div>
+
+    <div
+      v-else-if="banner"
+      v-bind="$attrs"
+      class="text-center"
     >
       <client-only>
         <!-- Desktop - Article: 728x90, 970x90 -->
@@ -21,22 +50,28 @@
         ></venatus-placement>
 
         <template v-slot:placeholder>
-          <div style="width: 100%; height: 100px;"></div>
+          <div class="placeholder-banner"></div>
         </template>
       </client-only>
     </div>
 
-    <!-- Desktop Side Rail: 300x250, 300x600, 160x600, 336x280 -->
-    <div
-      v-else-if="scraper"
-      v-bind="$attrs"
-    >
-      <venatus-placement
-        v-if="desktop && sideRailMaxWidth >= 160"
-        ad-id="65f94d27767223575b4de5af"
-        class="desktop-side-rail"
-      ></venatus-placement>
-    </div>
+    <template v-else-if="siderail">
+      <client-only>
+        <div
+          v-if="desktop"
+          v-bind="$attrs"
+          ref="ad"
+          class="text-center"
+        >
+          <!-- Desktop Side Rail: 300x250, 300x600, 160x600, 336x280 -->
+          <venatus-placement
+            v-if="visible"
+            ad-id="65f94d27767223575b4de5af"
+            class="desktop-side-rail"
+          ></venatus-placement>
+        </div>
+      </client-only>
+    </template>
 
     <template v-else-if="cell">
       <!-- placeholder and lazy-loading are handled by cell wrapper-->
@@ -48,14 +83,20 @@
       ></venatus-placement>
     </template>
 
-    <template v-else-if="instream">
+    <div
+      v-else-if="instream"
+      v-bind="$attrs"
+      ref="ad"
+      class="text-center -mx-4 w-[calc(100%+32px)] md:mx-0 md:w-full max-w-lg"
+    >
+      <!-- Instream - at least 410px wide, must be 16:9 -->
       <div
-        v-bind="$attrs"
+        v-if="visible"
         id="vm-av"
         data-format="isvideo"
         class="aspect-video vm-placement"
       ></div>
-    </template>
+    </div>
 
     <b-page-section
       v-else
@@ -79,16 +120,16 @@
         ></venatus-placement>
 
         <template v-slot:placeholder>
-          <div style="width: 100%; height: 280px;"></div>
+          <div class="placeholder-section"></div>
         </template>
       </client-only>
     </b-page-section>
   </template>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'
-import { useBreakpoints, useIntersectionObserver, useElementSize, useWindowSize } from '@vueuse/core'
+import { defineComponent, computed, ref, watch, nextTick } from 'vue'
+import { useBreakpoints, useIntersectionObserver } from '@vueuse/core'
 import { useIsApp } from '~/composables/app'
 import { useRoute } from 'vue-router'
 
@@ -103,11 +144,15 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    takeover: {
+      type: Boolean,
+      default: false
+    },
     banner: {
       type: Boolean,
       default: false
     },
-    scraper: {
+    siderail: {
       type: Boolean,
       default: false
     },
@@ -122,14 +167,17 @@ export default defineComponent({
   },
   setup(props) {
     const ad = ref<HTMLElement>()
-    const visible = ref(!props.lazy || props.first)
+    // always lazy-load siderail and instream, figure out whether they fit first
+    const visible = ref((!props.lazy || props.first) && !props.siderail && !props.instream)
     const { isApp } = useIsApp()
 
     const allowed = computed(() => props.first || isApp.value == undefined || isApp.value == false)
 
-    if (!import.meta.env.SSR) {
-      const { isSupported, stop } = useIntersectionObserver(ad, ([{ isIntersecting }]) => {
-        if (isIntersecting && allowed.value) {
+    if (!import.meta.env.SSR && !visible.value) {
+      const { isSupported, stop } = useIntersectionObserver(ad, ([{ isIntersecting, target }]) => {
+        const hidden = (target as HTMLElement)?.offsetParent === null
+
+        if (isIntersecting && allowed.value && !hidden) {
           visible.value = true
           stop()
         }
@@ -143,7 +191,7 @@ export default defineComponent({
     }
 
     const breakpoints = useBreakpoints({
-      desktop: 728,
+      desktop: 1028,
     })
     const desktop = breakpoints.greaterOrEqual('desktop')
 
@@ -176,6 +224,20 @@ export default defineComponent({
 </script>
 
 <style lang="postcss" scoped>
+.placeholder-takeover {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 336px;
+  height: 280px;
+}
+
+@media (min-width: 1028px) {
+  .placeholder-takeover {
+    max-width: 970px;
+    height: 250px;
+  }
+}
+
 .desktop-article {
   margin: 0 auto;
   width: 100%;
@@ -190,10 +252,37 @@ export default defineComponent({
   height: 100px;
 }
 
+.placeholder-banner {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 320px;
+  height: 100px;
+}
+
+@media (min-width: 1028px) {
+  .placeholder-banner {
+    max-width: 970px;
+    height: 90px;
+  }
+}
+
+.desktop-multileaderboard {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 970px;
+  height: 250px;
+}
+
 .desktop-side-rail {
+  width: 336px;
+  height: 600px;
+}
+
+.mobile-incontent {
+  margin: 0 auto;
   width: 100%;
   max-width: 336px;
-  height: 600px;
+  height: 280px;
 }
 
 .desktop-incontent {
@@ -203,10 +292,17 @@ export default defineComponent({
   height: 280px;
 }
 
-.mobile-incontent {
+.placeholder-section {
   margin: 0 auto;
   width: 100%;
   max-width: 336px;
   height: 280px;
 }
+
+@media (min-width: 1028px) {
+  .placeholder-section {
+    max-width: 728px;
+    height: 280px;
+  }
+}
 </style>