Merge pull request #88 from casper-network/collectionteaser-improvements

MODIFIED: added new styling capabilities
casper-network · Mar 27, 2024 · cbe723a · cbe723a
2 parents bae2f46 + 4e7f577
commit cbe723a
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 81 deletions.
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
@@ -12,13 +12,13 @@ html, body {
   padding: 0;
   box-sizing: border-box;
   background-color: var(--color-lighthouse);
+  overflow-x: hidden;
 
   &.no-scroll {
     overflow: hidden;
   }
 
   &.hide-x {
-    overflow-x: hidden;
   }
 }
 

diff --git a/src/components/collections/CSPRCollection.vue b/src/components/collections/CSPRCollection.vue
@@ -1,19 +1,22 @@
 <template>
-  <div class="container">
-    <div class="collection-head">
-      <h2 v-if="title" v-html="title" class="h1"/>
-    </div>
-    <div class="collection-items">
-      <a class="item" v-for="(item, i) in items" :key="`item-${i}`" :href="item.url" target="_blank">
-        <img :src="`${API_URL}/assets/${item.image}`" :alt="item.name"/>
-        <div class="overlay">
-          <Button class="secondary link" icon="link">
-            <a :href="item.url" target="_blank">
-              <span>{{ item.name }}</span>
-            </a>
-          </Button>
-        </div>
-      </a>
+  <div class="text-component" :class="[ variation ]" :style="computedStyles">
+    <div class="container" >
+      <div class="collection-head" v-if="title">
+        <h2 v-html="title" class="h1"/>
+        <p v-if="content" v-html="content"></p>
+      </div>
+      <div class="collection-items">
+        <a class="item" v-for="(item, i) in items" :key="`item-${i}`" :href="item.url" target="_blank">
+          <img :src="`${API_URL}/assets/${item.image}`" :alt="item.name"/>
+          <div class="overlay">
+            <Button class="secondary link" icon="link">
+              <a :href="item.url" target="_blank">
+                <span>{{ item.name }}</span>
+              </a>
+            </Button>
+          </div>
+        </a>
+      </div>
     </div>
   </div>
 </template>
@@ -35,6 +38,10 @@ export default {
   //
   //---------------------------------------------------
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     blockData: {
       type: Object,
       default: () => ({}),
@@ -62,6 +69,35 @@ export default {
     title() {
       return this.blockData?.title || null;
     },
+    content() {
+      return this.blockData?.content || null;
+    },
+    variation() {
+      return this.blockData?.variation || null;
+    },
+    computedStyles() {
+      const {
+        bgcolor,
+        titlecolor,
+        txtcolor,
+        linkcolor,
+      } = this.blockData;
+
+      let out = '--hcolor:initial;';
+      if (titlecolor) {
+        out += `--hcolor:${titlecolor};`;
+      }
+      if (bgcolor) {
+        out += `background-color:${bgcolor};`;
+      }
+      if (txtcolor) {
+        out += `color:${txtcolor};`;
+      }
+      if (linkcolor) {
+        out += `--lcolor:${linkcolor};`;
+      }
+      return out;
+    },
   },
   //---------------------------------------------------
   //
@@ -92,6 +128,7 @@ export default {
   // render(h) { return h(); },
   async mounted() {
     this.items = await this.getData();
+    console.log(this.blockData);
   },
   // beforeUpdate() {},
   // updated() {},
@@ -134,97 +171,148 @@ export default {
 @import '~scss/mixins';
 @import '~scss/variables';
 
-div.container {
-  flex-direction: column;
-  padding-top: 160px;
-  padding-bottom: 100px;
+.text-component {
+  div.container {
+    flex-direction: column;
+    padding-top: 160px;
+    padding-bottom: 100px;
 
-  .collection-head {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
+    .collection-head {
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
 
-    @include breakpoint('sm') {
-      h2 { margin-bottom: 40px; }
-    }
-  }
+      p {
+        font-weight: 300;
 
-  .collection-items {
-    width: calc(100% + 32px);
-    margin-left: -16px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 16px;
-
-    & > .item {
-      position: relative;
-      background-color: white;
-      width: calc(20% - 52px);
-      box-shadow: 0 0 8px -2px rgba(0, 0, 0, .25);
-      padding: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        a {
+          font-family: inherit;
+          font-size: inherit;
+          color: var(--lcolor, var(--color-blue));
+          text-decoration: underline;
+        }
+
+        &:last-of-type {
+          margin-bottom: 32px;
+        }
+      }
 
       @include breakpoint('sm') {
-        width: calc(50% - 52px);
+        h2 {
+          margin-bottom: 40px;
+        }
       }
+    }
+
+    .collection-items {
+      width: 100%;
+      margin-left: 0;
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 16px;
 
-      img {
-        width: 100%;
-        height: auto;
-        aspect-ratio: 1;
-        object-fit: contain;
+      &:only-child {
+        margin-top: -64px;
       }
 
-      & > .overlay {
-        position: absolute;
-        inset: 0;
-        background-color: rgba(0, 0, 0, .65);
+      & > .item {
+        position: relative;
+        background-color: white;
+        width: calc(20% - 45px);
+        box-shadow: 0 0 8px -2px rgba(0, 0, 0, .25);
+        padding: 16px;
         display: flex;
         justify-content: center;
         align-items: center;
-        opacity: 0;
-        transition: opacity 0.16s linear;
-
-        & > .btn {
-          position: relative;
-          transform: translate(0, 10px);
-          transition: transform 0.12s linear;
-          flex-grow: 0;
-          flex-shrink: 0;
+
+        @include breakpoint('sm') {
+          width: calc(50% - 40px);
+        }
+
+        img {
+          width: 100%;
+          height: auto;
+          aspect-ratio: 1;
+          object-fit: contain;
+        }
+
+        & > .overlay {
+          position: absolute;
+          inset: 0;
+          background-color: rgba(0, 0, 0, .65);
           display: flex;
-          align-items: center;
           justify-content: center;
-          min-width: 156px;
-          border-color: black;
+          align-items: center;
+          opacity: 0;
+          transition: opacity 0.16s linear;
 
-          & > a {
+          & > .btn {
             position: relative;
-            top: 2px;
+            transform: translate(0, 10px);
+            transition: transform 0.12s linear;
+            flex-grow: 0;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 156px;
+            border-color: black;
+
+            & > a {
+              position: relative;
+              top: 2px;
+            }
           }
         }
-      }
 
-      &:hover > .overlay {
-        opacity: 1;
+        &:hover > .overlay {
+          opacity: 1;
+
+          & > .btn {
+            transform: translate(0, 0);
 
-        & > .btn {
-          transform: translate(0, 0);
-          &:hover {
-            border-color: var(--color-atomic-lime);
+            &:hover {
+              border-color: var(--color-atomic-lime);
+            }
           }
         }
       }
     }
+
+    ::v-deep {
+      .btn.secondary.link {
+        svg path {
+          fill: currentColor;
+        }
+      }
+    }
   }
 
-  ::v-deep {
-    .btn.secondary.link {
-      svg path {
-        fill: currentColor;
+  &.text-left {
+    & > div {
+      text-align: left;
+
+      .collection-items {
+        justify-content: flex-start;
+
+        @include breakpoint('sm') {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  &.text-right {
+    & > div {
+      text-align: right;
+
+      .collection-items {
+        justify-content: flex-end;
+
+        @include breakpoint('sm') {
+          justify-content: center;
+        }
       }
     }
   }

diff --git a/src/views/PageFactory.vue b/src/views/PageFactory.vue
@@ -141,6 +141,7 @@
       />
       <CSPRCollection
         v-if="block.blocktype === 'collectionteasers' && block.collection.collection === 'cspr_platforms'"
+        :is-first="blockIndex === 0"
         :block-data="block" />
       <NewsCollection
         v-if="block.blocktype === 'collectionteasers' && block.collection.collection === 'news'"