bind imgSrc to .container for bg overlay

tendermint · Mar 23, 2020 · 239f053 · 239f053
1 parent 7b8c784
commit 239f053
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 14 deletions.
diff --git a/public/goz.jpg b/public/goz.jpg
diff --git a/src/GozCard/GozCard.stories.js b/src/GozCard/GozCard.stories.js
@@ -1,4 +1,5 @@
 import GozCard from "./GozCard"
+import { text } from '@storybook/addon-knobs';
 
 export default {
   title: "GozCard",
@@ -7,7 +8,12 @@ export default {
 
 export const normal = () => ({
   components: { GozCard },
+  props: {
+    imgSrc: {
+      default: text("Image URL", "/goz.jpg")
+    },
+  },
   template: `
-    <goz-card/>
+    <goz-card v-bind="{ imgSrc }" />
   `
 })
diff --git a/src/GozCard/GozCard.vue b/src/GozCard/GozCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="wrapper">
-      <div class="container">
+      <div class="container" v-bind:style="{'background': `linear-gradient(180deg, rgba(14, 14, 86, 0.9) 0%, rgba(25, 52, 167, 0.9) 100%), url(${imgSrc})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'center center'}">
         <div class="h1">Join the discussion</div>
         <div class="p">Get involved in the Game of Zones chat room.</div>
         <div class="footer">
@@ -26,10 +26,6 @@
   font-family: var(--ds-font-family, sans-serif);
   padding: 4rem 1rem;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 2px 6px rgba(0, 0, 0, 0.05), 0px 1px 0px rgba(0, 0, 0, 0.05);
-  background: linear-gradient(180deg, rgba(14, 14, 86, 0.9) 0%, rgba(25, 52, 167, 0.9) 100%), url("https://cosmos.network/img/section-gameofzones.bc705fc3.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
   border-radius: 0.75rem;
   max-width: 75rem;
   margin-left: auto;
@@ -100,6 +96,12 @@ export default {
   components: {
     IconArrowRight,
     "text-button": Button
+  },
+  props: {
+    imgSrc: {
+      type: String,
+      default: "/goz.jpg"
+    }
   }
 }
 </script>
diff --git a/src/GozNewsletterSignup/GozNewsletterSignup.stories.js b/src/GozNewsletterSignup/GozNewsletterSignup.stories.js
@@ -1,4 +1,5 @@
 import GozNewsletterSignup from "./GozNewsletterSignup"
+import { text } from '@storybook/addon-knobs';
 
 export default {
   title: "GozNewsletterSignup",
@@ -7,7 +8,12 @@ export default {
 
 export const normal = () => ({
   components: { GozNewsletterSignup },
+  props: {
+    imgSrc: {
+      default: text("Image URL", "/pattern.png")
+    },
+  },
   template: `
-    <goz-newsletter-signup/>
+    <goz-newsletter-signup v-bind="{ imgSrc }" />
   `
 })
diff --git a/src/GozNewsletterSignup/GozNewsletterSignup.vue b/src/GozNewsletterSignup/GozNewsletterSignup.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="wrapper">
-      <div class="container">
+      <div class="container" v-bind:style="{'background': `linear-gradient(180deg, rgba(14, 14, 86, 0.9) 0%, rgba(25, 52, 167, 0.9) 100%), url(${imgSrc})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'center center'}">
         <div class="section">
           <transition name="fade" mode="out-in">
             <div v-if="state === 'success'" key="success">
@@ -83,10 +83,6 @@
   font-family: var(--ds-font-family, sans-serif);
   padding: 4rem 1rem;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 2px 6px rgba(0, 0, 0, 0.05), 0px 1px 0px rgba(0, 0, 0, 0.05);
-  background: linear-gradient(180deg, rgba(14, 14, 86, 0.9) 0%, rgba(25, 52, 167, 0.9) 100%), url("https://cosmos.network/img/section-gameofzones.bc705fc3.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
   border-radius: .75rem;
   max-width: 75rem;
   margin-left: auto;
@@ -281,6 +277,12 @@ export default {
     IconSpinner,
     "text-button": Button
   },
+  props: {
+    imgSrc: {
+      type: String,
+      default: "/goz.jpg"
+    }
+  },
   data: function() {
     return {
       email: null,

diff --git a/src/GozPage/GozPage.vue b/src/GozPage/GozPage.vue
@@ -21,7 +21,7 @@
         </template>
       </goz-section>
       <goz-milestones class="card__narrow"/>
-      <goz-newsletter-signup class="card"/>
+      <goz-newsletter-signup class="card" v-bind="{ imgSrc }" />
       <goz-section>
         <template v-slot:icon>
           <icon-cup/>
@@ -66,7 +66,7 @@
           An example of a server side IBC relayer to be used for Game of Zones and beyond.
         </template>
       </goz-row>
-      <goz-card class="card"/>
+      <goz-card class="card" v-bind="{ imgSrc }" />
     </div>
   </div>
 </template>
@@ -113,6 +113,12 @@ export default {
     IconCalendar,
     IconCup,
     IconIbc
+  },
+  props: {
+    imgSrc: {
+      type: String,
+      default: "/goz.jpg"
+    }
   }
 }
 </script>