status-im
/
open-bounty
mirror of https://github.com/status-im/open-bounty.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #107 from noman-land/fix-email-input 

Add HubSpot form and style it to match
This commit is contained in:
Teemu Patja 2017-10-31 09:18:29 +02:00 committed by GitHub
parent a98da5fb2f 583c055d74
commit 7b42354be4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
static_langing_page/dest/css/main.css
View File

@ -795,9 +795,8 @@ li.social-link a {
text-align: center;
color: #ffffff; }
.action button {
width: 240px;
height: 45px;
.action button,
.hs_submit .hs-button {
object-fit: contain;
border-radius: 8px;
background-color: #1e3751;
@ -807,12 +806,14 @@ li.social-link a {
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
padding: 16px 32px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
transition: opacity .2s ease; }
.action button:hover {
.action button:hover,
.hs_submit .hs-button:hover {
opacity: 0.5;
cursor: pointer; }
@ -1521,7 +1522,6 @@ li.social-link a {
.email-form {
display: -ms-flexbox;
display: flex;
width: 460px;
position: relative; }
.email-form.email-form--error .email-form__inner {
@ -1589,23 +1589,21 @@ li.social-link a {
.email-form__inner {
display: -ms-flexbox;
display: flex;
width: 460px;
position: relative; }
.email-form__input {
height: 45px;
line-height: 45px; }
.email-form .hs_email.hs-form-field label {
display: none; }
.email-form__input--email {
.email-form__input--email,
.email-form .hs_email.hs-form-field input {
text-align: left;
background-color: #F2F6F8;
color: #49555F;
width: 240px;
padding: 0 15px;
background-color: #4c81b6;
color: #b6cbe1;
padding: 16px 15px 15px 15px;
margin: 0 0 0 0;
font-family: 'PostGrotesk-Book', sans-serif;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
border-radius: 8px;
transition: background-color .2s ease;
font-weight: 400;
font-size: 16px; }
@ -1617,25 +1615,31 @@ li.social-link a {
background-repeat: no-repeat;
background-position: right 10px center; }
.email-form__input--email::-webkit-input-placeholder {
color: #AEB5BA; }
.email-form__input--email::-moz-placeholder {
color: #AEB5BA; }
.email-form__input--email::-webkit-input-placeholder,
.email-form__input--email::-moz-placeholder,
.email-form__input--email:-ms-input-placeholder {
color: #AEB5BA; }
.email-form__input--email:-moz-placeholder {
color: rgba(255, 255, 255, 0.6); }
.email-form .hbspt-form {
width: 100%; }
.email-form .hbspt-form > .submitted-message {
color: #ffffff;
opacity: 0.6; }
.email-form .hbspt-form > form > div {
display: inline-block; }
.email-form .hbspt-form > form > div > div {
margin: 0; }
.email-form input[type="submit"] {
width: 220px;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-positive: 0;
flex-grow: 0;
border-radius: 0 8px 8px 0; }
margin-left: 1em;
border-radius: 8px; }
@media (max-width: 640px) {
.email-form, .email-form__inner {
@ -1645,13 +1649,6 @@ li.social-link a {
.email-form__inner {
-ms-flex-direction: column;
flex-direction: column; }
.email-form__input--email {
width: 240px;
border-radius: 8px;
margin: 0 0 16px 0; }
.email-form input[type="submit"] {
width: 240px;
border-radius: 8px; }
.email-form__responces {
width: 240px;
text-align: center;
@ -1781,8 +1778,7 @@ li.social-link a {
background-image: url(../img/new-site/icon_yt.svg); }
.footer-link--rt .footer-icon {
background-image: url(../img/new-site/icon_rt.svg);
}
background-image: url(../img/new-site/icon_rt.svg); }
.footer-link a {
color: white; }

1
static_langing_page/dest/img/new-site/icon_rt.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>icon_sl</title><g fill="#FFF"><path d="M12.632 3.316H7.893a2.365 2.365 0 0 0-2.368 2.369v11.821a2.365 2.365 0 0 0 2.368 2.369 2.366 2.366 0 0 0 2.369-2.369v-2.369h2.37c3.254 0 5.91-2.656 5.91-5.911 0-3.254-2.656-5.91-5.91-5.91z"/><path d="M7.905 19.277a1.771 1.771 0 0 1-1.771-1.771V5.673a1.77 1.77 0 0 1 1.759-1.772h4.739a5.336 5.336 0 0 1 5.325 5.325 5.334 5.334 0 0 1-5.325 5.324H9.676v2.956c0 .967-.794 1.771-1.771 1.771z"/><path d="M7.905 18.68a1.185 1.185 0 0 1-1.185-1.186V5.673c0-.645.517-1.173 1.161-1.185h4.751a4.734 4.734 0 0 1 4.726 4.727 4.74 4.74 0 0 1-4.726 4.726H9.09v3.541c0 .666-.529 1.198-1.185 1.198z"/><path d="M7.905 18.094a.596.596 0 0 1-.598-.6V5.673c0-.322.252-.587.574-.598h4.751a4.144 4.144 0 0 1 4.14 4.14 4.145 4.145 0 0 1-4.14 4.14h-4.13v4.139c0 .334-.264.6-.597.6z"/><path d="M7.905 12.768h4.727a3.556 3.556 0 0 0 3.554-3.552 3.55 3.55 0 0 0-3.554-3.554H7.905v7.106z"/><path d="M8.502 12.182V6.26h4.14a2.953 2.953 0 0 1 2.955 2.956 2.954 2.954 0 0 1-2.955 2.956h-4.14v.01z"/><path d="M9.09 11.595V6.857h3.542a2.366 2.366 0 0 1 2.369 2.369 2.366 2.366 0 0 1-2.369 2.369H9.09z"/><path d="M9.676 11.01V7.444h2.956a1.783 1.783 0 0 1 0 3.566H9.676z"/><path d="M10.262 10.411v-2.38h2.37c.654 0 1.195.53 1.195 1.195 0 .668-.528 1.196-1.195 1.196h-2.37v-.011z"/><path d="M10.861 9.825V8.617h1.771c.333 0 .599.265.599.599a.595.595 0 0 1-.599.598h-1.771v.011z"/><ellipse cx="7.827" cy="5.678" rx="2.369" ry="2.369"/><path d="M18.036 16.137a2.361 2.361 0 1 1-3.863 2.716l-3.542-5.062a2.362 2.362 0 0 1 3.865-2.713l3.54 5.059z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

35
static_langing_page/index.html
View File

@ -110,48 +110,21 @@
<p>
Post bounties, build your team and move your project forward today.
</p>
<div class="email-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
function signup() {
console.log("Signing up");
hbspt.forms.create({
css: '',
portalId: '3954379',
formId: '9a0a26a8-3163-45a8-a933-774de4853609'
formId: 'b6c83d22-0bcf-4cfa-b9df-88fbaa09dee7'
});
}
</script>
<!-- HACK(oskarth): Mailchimp - should probably be Hubspot but we can hack this with JS
Also adds ad hoc margin-left to action and border radius styles.
TODO Add background style.
-->
<div class="email-form">
<!-- XXX: Mailchimp -->
<form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&amp;id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate" _lpchecked="1">
<div class="email-form__inner">
<input type="email" value="" name="EMAIL" class="required email-input mce-EMAIL email-form__input email-form__input--email" placeholder="Enter your email" aria-required="true" style="border-bottom-right-radius: .5em; border-top-right-radius: .5em;">
<button style="margin-left: 1em;" onclick="signup()">Sign up for beta</button>
<!-- <input type="submit" value="GET EARLY ACCESS" name="subscribe" class="button email-form__input email-form__input--sumbit mc-embedded-subscribe button email-button">
-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
</div>
<div id="mce-responses" class="email-form__responces">
<div class="response email-form__error-message" id="mce-error-response"></div>
<div class="email-form__success-message response" id="mce-success-response"></div>
</div>
</form>
<!-- End Mailchimp -->
</div>
<!-- <button onclick="signup()">Sign up for beta</button> -->
</div>
</div>

9
static_langing_page/src/scss/actions.scss
View File

@ -57,9 +57,8 @@
color: #ffffff;
}
.action button {
width: 240px;
height: 45px;
.action button,
.hs_submit .hs-button {
object-fit: contain;
border-radius: 8px;
background-color: #1e3751;
@ -69,13 +68,15 @@
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
padding: 16px 32px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
transition: opacity .2s ease;
}
.action button:hover {
.action button:hover,
.hs_submit .hs-button:hover {
opacity: 0.5;
cursor: pointer;
}

61
static_langing_page/src/scss/email-form.scss
View File

@ -1,6 +1,5 @@
.email-form {
display: flex;
width: 460px;
position: relative;
}
@ -78,25 +77,23 @@
.email-form__inner {
display: flex;
width: 460px;
position: relative;
}
.email-form__input {
height: 45px;
line-height: 45px;
.email-form .hs_email.hs-form-field label {
display: none;
}
.email-form__input--email {
.email-form__input--email,
.email-form .hs_email.hs-form-field input {
text-align: left;
background-color: #F2F6F8;
color: #49555F;
width: 240px;
padding: 0 15px;
background-color: #4c81b6;
color: #b6cbe1;
padding: 16px 15px 15px 15px;
margin: 0 0 0 0;
font-family: 'PostGrotesk-Book', sans-serif;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
border-radius: 8px;
transition: background-color .2s ease;
font-weight: 400;
@ -121,14 +118,8 @@ input.email-form__input--email:disabled {
}
.email-form__input--email::-webkit-input-placeholder {
color: #AEB5BA;
}
.email-form__input--email::-moz-placeholder {
color: #AEB5BA;
}
.email-form__input--email::-webkit-input-placeholder,
.email-form__input--email::-moz-placeholder,
.email-form__input--email:-ms-input-placeholder {
color: #AEB5BA;
}
@ -137,11 +128,28 @@ input.email-form__input--email:disabled {
color: rgba(255, 255, 255, .6);
}
.email-form .hbspt-form {
width: 100%;
& > .submitted-message {
color: #ffffff;
opacity: 0.6;
}
& > form > div {
display: inline-block;
& > div {
margin: 0;
}
}
}
.email-form input[type="submit"] {
width: 220px;
flex-shrink: 0;
flex-grow: 0;
border-radius: 0 8px 8px 0;
margin-left: 1em;
border-radius: 8px;
}
.email-form input[type="submit"]:hover {
@ -170,17 +178,6 @@ input.email-form__input--email:disabled {
flex-direction: column;
}
.email-form__input--email {
width: 240px;
border-radius: 8px;
margin: 0 0 16px 0;
}
.email-form input[type="submit"] {
width: 240px;
border-radius: 8px;
}
.email-form__responces {
width: 240px;
text-align: center;