From 861f3f228412c7269b583691b67039c5fdbad445 Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Tue, 11 Jan 2022 01:44:58 -0800
Subject: [PATCH] Adds vertical advertisement to marathon page

Cleans up some layout issues that were just working by coincidence

Related to Issue #44
---
 pages/marathon/_marathon.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/pages/marathon/_marathon.vue b/pages/marathon/_marathon.vue
index 88c6686e..86f34239 100644
--- a/pages/marathon/_marathon.vue
+++ b/pages/marathon/_marathon.vue
@@ -2,6 +2,7 @@
   <div class="marathon-container" :class="{ collapsed }">
     <MarathonHeader class="marathon-header" :marathon-id="marathonId" :collapsed.sync="collapsed" />
     <MarathonSidebar v-show="!collapsed" class="marathon-sidebar" :marathon-id="marathonId" :collapsed.sync="collapsed" />
+    <WidgetAdvertisement :show-advertisement="!collapsed" is-vertical class="is-advertisement" />
     <NuxtChild class="marathon-view" />
   </div>
 </template>
@@ -71,10 +72,11 @@ export default Vue.extend({
   width: 100%;
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto 1fr;
   grid-template-areas:
-    'sidebar header'
-    'sidebar view';
+    'sidebar       header'
+    'sidebar       view'
+    'advertisement view';
   gap: var(--spacing);
 }
 
@@ -91,7 +93,10 @@ export default Vue.extend({
 .marathon-view {
   grid-area: view;
   width: 100%;
-  flex-grow: 5;
+}
+
+.is-advertisement {
+  grid-area: advertisement;
 }
 
 @media (max-width: 1023px) {
@@ -107,15 +112,27 @@ export default Vue.extend({
   .marathon-sidebar {
     width: 100%;
   }
+
+  .is-advertisement {
+    display: none;
+  }
 }
 
 .collapsed {
   &.marathon-container {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'header'
+      'view';
   }
 
   .marathon-sidebar {
-    width: 100%;
+    display: none;
+  }
+
+  .is-advertisement {
+    display: none;
   }
 }
 </style>