From 562d917de59aafdceebb6bc456072dc3aec020c1 Mon Sep 17 00:00:00 2001 From: Denis Fadeev Date: Thu, 14 May 2020 17:53:08 +0500 Subject: [PATCH] Narrow screen WIP --- src/Icons/IconArrowRight.vue | 15 +++- src/NewsletterSignup/BackgroundStars.vue | 2 +- .../CosmosNewsletterSignup.vue | 48 +++++------ src/NewsletterSignup/DsButton.vue | 82 +++++++++++-------- .../NewsletterSignup.stories.js | 28 +++++++ 5 files changed, 110 insertions(+), 65 deletions(-) diff --git a/src/Icons/IconArrowRight.vue b/src/Icons/IconArrowRight.vue index 7939158a..418640b0 100644 --- a/src/Icons/IconArrowRight.vue +++ b/src/Icons/IconArrowRight.vue @@ -1,5 +1,14 @@ \ No newline at end of file + diff --git a/src/NewsletterSignup/BackgroundStars.vue b/src/NewsletterSignup/BackgroundStars.vue index caf33f0f..f49886eb 100644 --- a/src/NewsletterSignup/BackgroundStars.vue +++ b/src/NewsletterSignup/BackgroundStars.vue @@ -9,7 +9,7 @@ left: 0; right: 0; bottom: 0; - background: url("./stars.svg") repeat center, + background: url("./stars.svg") repeat center top, linear-gradient(145.11deg, #202854 9.49%, #171b39 91.06%); } diff --git a/src/NewsletterSignup/CosmosNewsletterSignup.vue b/src/NewsletterSignup/CosmosNewsletterSignup.vue index fbacb456..920ddaef 100644 --- a/src/NewsletterSignup/CosmosNewsletterSignup.vue +++ b/src/NewsletterSignup/CosmosNewsletterSignup.vue @@ -137,16 +137,18 @@ a { font-family: var(--ds-font-family, sans-serif); color: white; position: relative; + /* min-height: var(--page-min-height); + display: flex; + align-items: center; */ } .wrapper { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 1fr; - grid-template-areas: "image form"; align-items: center; + width: 100%; } .image { - grid-column-start: 1; width: 100%; height: 100%; position: relative; @@ -160,7 +162,7 @@ a { transform: translate(-85%, -50%); } .text { - grid-column-start: 2; + /* grid-column-start: 2; */ max-width: 36rem; position: relative; width: 100%; @@ -323,21 +325,27 @@ a { .fade-leave { opacity: 1; } -@media screen and (max-width: 800px) { +@media screen and (max-width: 720px) { .wrapper { - grid-template-columns: 25% 75%; + grid-template-columns: 1fr; } -} - -@media screen and (max-width: 600px) { - .wrapper { - padding-left: 1rem; + .page__container { + align-items: flex-start; } .image { - display: none; + height: 400px; + display: flex; + justify-content: center; + } + .image__img { + overflow-y: visible; + position: relative; + left: 0; + top: 0; + transform: translateY(-130px); } .text { - grid-column: 1/3; + max-width: initial; } } @@ -412,10 +420,7 @@ export default { email: null, selected: this.topics.map((t) => false), icons: [], - subscriptions: { - tools: false, - ecosystem: false, - }, + ready: false, iconHero: false, url: "https://zcs1.maillist-manage.com/campaigns/weboptin.zc", commonFormData: { @@ -430,16 +435,6 @@ export default { zctd: "", scriptless: "yes", }, - toolsFormData: { - lD: "16352f8832a25ec1", - zcld: "16352f8832a25ec1", - zc_formIx: "4ef47fbb86ab6668aa0d5017850d35fbf4ad4b279730a79d", - }, - ecosystemFormData: { - lD: "16352f8832a25f5b", - zcld: "16352f8832a25f5b", - zc_formIx: "4ef47fbb86ab6668aa0d5017850d35fbcd58b642c14f9e39", - }, }; }, async mounted() { @@ -447,6 +442,7 @@ export default { this.iconHero = (await axios.get(this.svg)).data; } this.setHeight(`step${this.step}`); + this.ready = true; this.topics.forEach(async (topic) => { let icon = false; try { diff --git a/src/NewsletterSignup/DsButton.vue b/src/NewsletterSignup/DsButton.vue index 7e574af0..0948ab5d 100644 --- a/src/NewsletterSignup/DsButton.vue +++ b/src/NewsletterSignup/DsButton.vue @@ -3,19 +3,27 @@
-
- +
+
- +
-
- +
+
@@ -28,11 +36,11 @@ font-family: var(--ds-font-family, sans-serif); font-size: initial; margin: 0; - border-radius: .35em; + border-radius: 0.35em; cursor: pointer; user-select: none; outline: none; - transition: all .25s; + transition: all 0.25s; text-align: center; text-transform: uppercase; font-weight: 600; @@ -41,7 +49,7 @@ padding: 0; } .button:disabled { - opacity: .5; + opacity: 0.5; cursor: not-allowed; } .button__content { @@ -51,25 +59,29 @@ align-items: center; } .button__text { - padding-left: .25rem; - padding-right: .25rem; + padding-left: 0.25rem; + padding-right: 0.25rem; +} +.button__icon { + display: flex; + align-items: center; } .button__type__text .button__text { padding-left: 0; padding-right: 0; } .button__size__s { - font-size: .8125rem; + font-size: 0.8125rem; line-height: 1rem; - padding-top: .5rem; - padding-bottom: .5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .button__size__s.button__type__contained { - padding-left: .75rem; - padding-right: .75rem; + padding-left: 0.75rem; + padding-right: 0.75rem; } .button__size__s .button__content { - gap: .25rem; + gap: 0.25rem; } .button__size__s .button__icon { width: 1rem; @@ -78,11 +90,11 @@ .button__size__m { font-size: 1rem; line-height: 1.5rem; - padding-top: .75rem; - padding-bottom: .75rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; } .button__size__m .button__content { - gap: .5rem; + gap: 0.5rem; } .button__size__m .button__icon { width: 1.5rem; @@ -99,7 +111,7 @@ padding-bottom: 1rem; } .button__size__l .button__content { - gap: .75rem; + gap: 0.75rem; } .button__size__l .button__icon { width: 2rem; @@ -116,56 +128,56 @@ export default { props: { size: { type: String, - default: "m" + default: "m", }, /** * disabled */ disabled: { type: Boolean, - default: false + default: false, }, backgroundColor: { type: String, - default: "#5064FB" + default: "#5064FB", }, color: { type: String, - default: "white" + default: "white", }, /** * type */ type: { type: String, - default: "contained" + default: "contained", }, /** * tag */ tag: { type: String, - default: "button" + default: "button", }, /** * href */ href: { type: String, - default: null + default: null, }, /** * target */ target: { type: String, - default: null - } + default: null, + }, }, methods: { click() { - this.$emit("click", true) - } - } -} - \ No newline at end of file + this.$emit("click", true); + }, + }, +}; + diff --git a/src/NewsletterSignup/NewsletterSignup.stories.js b/src/NewsletterSignup/NewsletterSignup.stories.js index 1dd3352d..36583626 100644 --- a/src/NewsletterSignup/NewsletterSignup.stories.js +++ b/src/NewsletterSignup/NewsletterSignup.stories.js @@ -79,3 +79,31 @@ export const ibc = () => ({
`, }); + +export const tools = () => ({ + props: { + fullscreen: { + default: boolean("fullscreen", false), + }, + }, + components: { + CosmosNewsletterSignup, + }, + data() { + return { + value: { + h1: "Get Cosmos tools & technology updates", + h2: + "Get engineering and development updates on Cosmos SDK, Tendermint Core, IBC and more - straight to your inbox.", + zcld: "16352f8832a25ec1", + zc_formIx: "4ef47fbb86ab6668aa0d5017850d35fbf4ad4b279730a79d", + svg: "/icon-terminal-window.svg", + }, + }; + }, + template: ` +
+ +
+ `, +});