Merge from Stg To Main (#459)

* Merge from Dev to Stg (#436) * feat(SNW-24): Adjust styling on save my spot button (#413) * feat(SNW-26): Fix secret nfts page (#412) * feat(SNW-25): Adjust width and style in Countdown (#411) * feat(SNW-8): Implement Hero section (#416) * feat(SNW-10): Implement Banner section (#418) * feat(SNW-9): Implement Description Section (#417) * Remove unnecessary query fields * feat(SNW-11): Implement speakers section (#419) * feat(SNW-13): Implement announcement section (#421) * feat(SNW-12): Implement Sponsors section (#420) * feat(SNW-14): Implement About Secret and CTAs section (#422) * feat(SNW-17): Implement event started state (#423) * feat(SNW-16): Implement Summit Agenda page (#425) * feat(SNW-16): Implement Summit Agenda page * fix: Adjust fixes from Strapi to make site work * fix: Remove unnecesary user img * feat: Adjust time formats * feat(SNW-18): Integrate chat and live stream (#426) * feat(SNW-31): Adjust footer (#429) * feat(SNW-31): Adjust footer * feat: fix: Adjust first letter in text to uppercase * feat(SNW-29): Adjust breadcrumb with content in mobile (#428) * feat(SNW-28): Adjust color in UTC word (#427) * feat(SNW-36): Fix problem when sponsor image empty (#431) * feat(SNW-40): Adjust time column on Summit Agenda page (#434) * feat(SNW-35): Hide moderator cell if empty (#430) * feat(SNW-34): Adjust speaker image size on Speakers section (#435) * feat(SNW-33): Adjust styles in all buttons (#432) * feat(SNW-32): Add missing column headers on agenda table on mobile (#433) * Merge from Dev to Stg (#439) * feat(SNW-24): Adjust styling on save my spot button (#413) * feat(SNW-26): Fix secret nfts page (#412) * feat(SNW-25): Adjust width and style in Countdown (#411) * feat(SNW-8): Implement Hero section (#416) * feat(SNW-10): Implement Banner section (#418) * feat(SNW-9): Implement Description Section (#417) * Remove unnecessary query fields * feat(SNW-11): Implement speakers section (#419) * feat(SNW-13): Implement announcement section (#421) * feat(SNW-12): Implement Sponsors section (#420) * feat(SNW-14): Implement About Secret and CTAs section (#422) * feat(SNW-17): Implement event started state (#423) * feat(SNW-16): Implement Summit Agenda page (#425) * feat(SNW-16): Implement Summit Agenda page * fix: Adjust fixes from Strapi to make site work * fix: Remove unnecesary user img * feat: Adjust time formats * feat(SNW-18): Integrate chat and live stream (#426) * feat(SNW-31): Adjust footer (#429) * feat(SNW-31): Adjust footer * feat: fix: Adjust first letter in text to uppercase * feat(SNW-29): Adjust breadcrumb with content in mobile (#428) * feat(SNW-28): Adjust color in UTC word (#427) * feat(SNW-36): Fix problem when sponsor image empty (#431) * feat(SNW-40): Adjust time column on Summit Agenda page (#434) * feat(SNW-35): Hide moderator cell if empty (#430) * feat(SNW-34): Adjust speaker image size on Speakers section (#435) * feat(SNW-33): Adjust styles in all buttons (#432) * feat(SNW-32): Add missing column headers on agenda table on mobile (#433) * feat(SNW-42): Implement new Save my spot button (#438) * feat(SNW-42): Implement new Save my spot button * fix: Adjust script * fix: Adjust event script in Summit page * fix: Change script order * fix: Move script to function * feat: Add client only component * feat: Remove no script tag * Merge from Dev to Stg (#442) * feat(SNW-24): Adjust styling on save my spot button (#413) * feat(SNW-26): Fix secret nfts page (#412) * feat(SNW-25): Adjust width and style in Countdown (#411) * feat(SNW-8): Implement Hero section (#416) * feat(SNW-10): Implement Banner section (#418) * feat(SNW-9): Implement Description Section (#417) * Remove unnecessary query fields * feat(SNW-11): Implement speakers section (#419) * feat(SNW-13): Implement announcement section (#421) * feat(SNW-12): Implement Sponsors section (#420) * feat(SNW-14): Implement About Secret and CTAs section (#422) * feat(SNW-17): Implement event started state (#423) * feat(SNW-16): Implement Summit Agenda page (#425) * feat(SNW-16): Implement Summit Agenda page * fix: Adjust fixes from Strapi to make site work * fix: Remove unnecesary user img * feat: Adjust time formats * feat(SNW-18): Integrate chat and live stream (#426) * feat(SNW-31): Adjust footer (#429) * feat(SNW-31): Adjust footer * feat: fix: Adjust first letter in text to uppercase * feat(SNW-29): Adjust breadcrumb with content in mobile (#428) * feat(SNW-28): Adjust color in UTC word (#427) * feat(SNW-36): Fix problem when sponsor image empty (#431) * feat(SNW-40): Adjust time column on Summit Agenda page (#434) * feat(SNW-35): Hide moderator cell if empty (#430) * feat(SNW-34): Adjust speaker image size on Speakers section (#435) * feat(SNW-33): Adjust styles in all buttons (#432) * feat(SNW-32): Add missing column headers on agenda table on mobile (#433) * feat(SNW-42): Implement new Save my spot button (#438) * feat(SNW-42): Implement new Save my spot button * fix: Adjust script * fix: Adjust event script in Summit page * fix: Change script order * fix: Move script to function * feat: Add client only component * feat: Remove no script tag * feat: Adjust Homepage Summit button * Merge from Dev to Stg (#444) * feat: Remove icons from Summit buttons * Merge from Dev to Stg (#446) * feat: Adjust button execution for Summit buttons * Merge from Dev to Stg (#458) * feat: Adjust button execution for Summit buttons * feat(SNW-45): Adjust Text Column Single component (#447) * feat(SNW-45): Adjust Text Column Single component * fix(SNW-45): Adjust paddings * feat(SNW-46): Adjust Text Column Double component (#448) * feat(SNW-50): Adjust Text Image Column component (#449) * feat(SNW-53): Fix anchor menu in Learn Portal (#450) * feat(SNW-53): Fix anchor menu in Learn Portal * feat(SNW-53): Move Nav Menu to independent component * fix: Fix bug when changing page in Learn Portal * fix: Fix problem on build * fix(SNW-55): Fix Carousel component in Learn Portal (#451) * fix(SNW-55): Fix Carousel component in Learn Portal * fix: Show arrows on mobile in Carousel component * feat: Change arrows position on mobile * fix: Adjust column size * feat(SNW-56): Adjust headers font size (#453) * feat(SNW-6): Handle color in AlertBar from strapi (#452) * feat(SNW-58): Add message text in Summit Agenda page (#456) * feat(SNW-58): Add message text in Summit Agenda page * fix: Adjust message classname * feat(SNW-57): Add message text in Summit page (#455) * feat(SNW-59): Revert back button for Eventbrite (#454) * fix(SNW-41): Adjust styles in Summit page (#457) * fix(SNW-41): Adjust styles in summit page * fix: Adjust font size on title
stakeordie · Dec 14, 2022 · 743e35e · 743e35e
1 parent e68661f
commit 743e35e
Show file tree

Hide file tree

Showing 23 changed files with 1,275 additions and 820 deletions.
diff --git a/src/components/AlertBar.vue b/src/components/AlertBar.vue
@@ -1,40 +1,33 @@
 <template>
-  <div v-if="isAlertOpen" class="alert-bar" :style="alertStyles">
-    <vue-markdown v-if="isAlertOpen" class="alert-content" ref="msg">{{
-      alertMessage.text
-    }}</vue-markdown>
-    <a @click="closeAlert" href="" class="close-alert">
-      <img
-        src="../assets/icon-menu-close.svg"
-        width="24"
-        height="24"
-        alt="close"
-      />
-    </a>
+  <div v-if="isAlertOpen" class="alert-bar" :style="backgroundColor">
+    <vue-markdown
+      v-if="alertMessage.text"
+      :source="alertMessage.text"
+      class="alert-content"
+      :style="textColor"
+    />
+    <button @click="closeAlert" class="close-alert">
+      <img src="../assets/icon-menu-close.svg" alt="close" />
+    </button>
   </div>
 </template>
 
 <script>
 import { getLocaleData } from "@/utils";
 
 export default {
-  props: {
-    url: {
-      type: String,
-      required: false,
-    },
-  },
-  data: function () {
+  data() {
     return {
       isAlertOpen: true,
       alertHeight: "68px",
     };
   },
   methods: {
-    validateStatus() {
+    validateIsOpen() {
       if (process.isClient) {
         const localData = localStorage.getItem("alertMsg");
-        const message = this.$static.alertBar.edges[0].node.text;
+        const message = this.alertMessage.text;
+
         if (localData === message) {
           this.isAlertOpen = false;
         } else {
@@ -43,24 +36,17 @@ export default {
       }
     },
     closeAlert() {
-      const sneakPeek = document.querySelector(".landing-event-sneak-peek");
-
-      if (sneakPeek) {
-        sneakPeek.style.setProperty("--sum-heights", 68 + "px");
-      }
-
       this.isAlertOpen = false;
+      document.body.style.setProperty("--sum-heights", 68 + "px");
+
       if (process.isClient) {
-        const alertMsg = this.$static.alertBar.edges[0].node.text;
-        localStorage.setItem("alertMsg", alertMsg.toString());
+        const alertMsg = String(this.alertMessage.text);
+        localStorage.setItem("alertMsg", alertMsg);
       }
-      return this.$static.alertBar.edges[0].node.text;
     },
     alertStyles() {
-      const htmlEl = document.querySelector("html");
-      return this.isAlertOpen
-        ? htmlEl.setAttribute("style", `--ab-height:${this.alertHeight}`)
-        : htmlEl.setAttribute("style", `--ab-height:0px`);
+      const height = this.isAlertOpen ? this.alertHeight : "0px";
+      document.body.setAttribute("style", `--ab-height:${height}`);
     },
   },
   computed: {
@@ -71,9 +57,21 @@ export default {
         this.$context.text
       );
     },
+    textColor() {
+      const color = this.alertMessage.text_color
+        ? this.alertMessage.text_color
+        : "var(--theme-fg)";
+      return `--alert-text-color: ${color}`;
+    },
+    backgroundColor() {
+      const color = this.alertMessage.background_color
+        ? this.alertMessage.background_color
+        : "var(--theme-alert-bg-color)";
+      return `--alert-background-color: ${color}`;
+    },
   },
   mounted() {
-    this.validateStatus();
+    this.validateIsOpen();
     this.alertStyles();
   },
   updated() {
@@ -89,6 +87,8 @@ export default {
         node{
           text
           locale
+          text_color
+          background_color
         }
       }
     }
@@ -99,25 +99,21 @@ export default {
 @import "../sass/functions/theme";
 @import "@lkmx/flare/src/functions/respond-to";
 
-$accent-colors: (
-  "blue",
-  "turquoise",
-  "green",
-  "yellow",
-  "cream",
-  "orange",
-  "red",
-  "purple",
-  "gray"
-);
-
-// @each $name, $color in $accent-colors {
-// 	&.accent-#{$name} {
-// 		color: var(--accent-#{$name});
-// 	}
-// }
-
 .alert-bar {
+  background: var(--alert-background-color);
+  position: fixed;
+  z-index: 99999;
+  width: 100%;
+  left: 0;
+  top: 0;
+  text-align: center;
+  height: var(--alert-height-desktop);
+
+  @include respond-to("<=s") {
+    text-align: left;
+    height: var(--alert-height-mobile);
+  }
+
   + .mega-header {
     @include respond-to(">=m") {
       top: var(--alert-height-desktop);
@@ -145,20 +141,6 @@ $accent-colors: (
     }
   }
 
-  background: var(--theme-alert-bg-color);
-  position: fixed;
-  z-index: 99999;
-  width: 100%;
-  left: 0;
-  top: 0;
-  text-align: center;
-  height: var(--alert-height-desktop);
-
-  @include respond-to("<=s") {
-    text-align: left;
-    height: var(--alert-height-mobile);
-  }
-
   .alert-content {
     display: flex;
     justify-content: center;
@@ -177,7 +159,7 @@ $accent-colors: (
 
     p {
       margin: 0;
-      color: var(--theme-fg);
+      color: var(--alert-text-color);
 
       @include respond-to("<=s") {
         font-size: 14px;
@@ -191,16 +173,22 @@ $accent-colors: (
   }
 
   .close-alert {
+    border: none;
+    background-color: transparent;
     position: absolute;
-    top: 12px;
+    margin: 0;
+    padding: 0;
+    top: 13px;
+    right: var(--f-gutter);
 
     @include respond-to("<=s") {
       top: 22px;
     }
 
-    right: var(--f-gutter);
-
     img {
+      width: 24px;
+      height: 24px;
+
       @include theme(light light-colored) {
         filter: invert(1);
       }

diff --git a/src/components/dynamic/ArticleImage.vue b/src/components/dynamic/ArticleImage.vue
@@ -1,7 +1,7 @@
 <template>
   <figure class="article-image">
     <img :src="image.url" alt="" class="learn-post__img" />
-    <figcaption class="img-caption">
+    <figcaption class="img-caption" v-if="caption">
       {{ caption }}
     </figcaption>
   </figure>
@@ -11,7 +11,38 @@
 export default {
   props: {
     image: Object,
-    caption: String
-  }
+    caption: String,
+  },
 };
-</script>
+</script>
+
+<style lang="scss">
+@import "@lkmx/flare/src/functions/_respond-to.scss";
+
+.learn-article__content {
+  .article-image {
+    display: grid;
+    gap: 16px;
+    padding: 64px 16px;
+
+    @include respond-to(">=m") {
+      padding: 64px 0;
+    }
+
+    .img-caption {
+      font-size: 16px;
+      color: var(--color-analog-secondary-light-gray);
+
+      text-align: center;
+      max-width: 710px;
+      margin: auto;
+      line-height: 24px;
+
+      @include respond-to("<=m") {
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/dynamic/ArticleVideo.vue b/src/components/dynamic/ArticleVideo.vue
@@ -4,7 +4,7 @@
       <source :src="video.data.url" type="video/mp4" />
       Sorry, your browser doesn't support embedded videos.
     </video>
-    <figcaption class="img-caption">
+    <figcaption class="img-caption" v-if="caption">
       {{ caption }}
     </figcaption>
   </figure>
@@ -18,3 +18,41 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+@import "@lkmx/flare/src/functions/_respond-to.scss";
+
+.learn-article__content {
+  .article-video {
+    display: grid;
+    gap: 16px;
+    padding: 64px 16px;
+    justify-content: center;
+
+    @include respond-to(">=m") {
+      padding: 64px 0;
+    }
+
+    video {
+      width: 100%;
+      height: auto;
+      max-width: 710px;
+    }
+
+    .img-caption {
+      font-size: 16px;
+      color: var(--color-analog-secondary-light-gray);
+
+      text-align: center;
+      max-width: 710px;
+      margin: auto;
+      line-height: 24px;
+
+      @include respond-to("<=m") {
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>