From 26d547ae02731eb940e6caa4b86281cdfa645dac Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Apr 2017 15:42:35 +0200 Subject: [PATCH] so many form tweaks - new native select style - progressively enhanced select styles via select.js - new textarea autogrow functionality - start isolating all the forms, load only when needed --- _src/_assets/javascripts/bigchain.js | 11 +- _src/_assets/javascripts/bigchain/forms.js | 16 ++ _src/_assets/javascripts/page-cla.js | 2 +- _src/_assets/javascripts/page-community.js | 4 +- _src/_assets/javascripts/page-contact.js | 8 + _src/_assets/javascripts/page-usecases.js | 10 + _src/_assets/styles/_page-enterprise.scss | 12 ++ _src/_assets/styles/bigchain.scss | 1 + _src/_assets/styles/bigchain/_forms.scss | 40 +++- _src/_assets/styles/bigchain/_newsletter.scss | 1 + .../bigchain/_select-theme-bigchaindb.scss | 181 ++++++++++++++++++ _src/_assets/styles/bigchain/_variables.scss | 2 +- _src/_includes/form-enterprise.html | 118 +++++++----- _src/contact.html | 2 + _src/enterprise.html | 4 +- package.json | 2 + 16 files changed, 344 insertions(+), 70 deletions(-) create mode 100644 _src/_assets/javascripts/page-contact.js create mode 100644 _src/_assets/styles/bigchain/_select-theme-bigchaindb.scss diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index c1f7725..e00328c 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_src/_assets/javascripts/bigchain.js @@ -3,21 +3,16 @@ //=include jquery/dist/jquery.js //=include bigchain/analytics.js -//=include bigchain/forms.js //=include bigchain/dnt.js -//=include bigchain/form-contact.js -//=include bigchain/newsletter.js - +//=include bigchain/forms.js jQuery(function($) { // - // init modules + // init global modules // - Forms.init(); - FormContact.init(); - Newsletter.init(); + Forms.init() if (!_dntEnabled()) { GoogleAnalytics.init(); diff --git a/_src/_assets/javascripts/bigchain/forms.js b/_src/_assets/javascripts/bigchain/forms.js index 1d4b084..2e63c7a 100644 --- a/_src/_assets/javascripts/bigchain/forms.js +++ b/_src/_assets/javascripts/bigchain/forms.js @@ -1,5 +1,8 @@ //=include parsleyjs/dist/parsley.js +//=include ../../../../node_modules/textarea-autogrow/textarea-autogrow.js +//=include ../../../../node_modules/tether/dist/js/tether.js +//=include ../../../../node_modules/tether-select/dist/js/select.js var Forms = (function(w, d, $) { @@ -37,6 +40,17 @@ var Forms = (function(w, d, $) { } }) }) + }, + initAutogrow: function() { + if (_config.form.find('textarea').length) { + var textarea = document.querySelector('textarea') + var growingTextarea = new Autogrow(textarea) + } + }, + initSelect: function(el) { + Select.init({ + className: 'select-theme-bigchaindb' + }) } } @@ -44,6 +58,8 @@ var Forms = (function(w, d, $) { init: function() { _private.formValidation() _private.formEmptyValidation() + _private.initAutogrow() + _private.initSelect() } } diff --git a/_src/_assets/javascripts/page-cla.js b/_src/_assets/javascripts/page-cla.js index aad73fc..1a26819 100644 --- a/_src/_assets/javascripts/page-cla.js +++ b/_src/_assets/javascripts/page-cla.js @@ -5,5 +5,5 @@ jQuery(function($) { // init form - FormCla.init(); + FormCla.init() }); diff --git a/_src/_assets/javascripts/page-community.js b/_src/_assets/javascripts/page-community.js index 92b2473..d27315c 100644 --- a/_src/_assets/javascripts/page-community.js +++ b/_src/_assets/javascripts/page-community.js @@ -1,10 +1,12 @@ //=include is-in-viewport/lib/isInViewport.js //=include bigchain/testimonials.js +//=include bigchain/newsletter.js jQuery(function($) { - Testimonials.init(); + Newsletter.init() + Testimonials.init() var wrigley = $('#wrigley'), wrigleyArm = wrigley.find('#arm'), diff --git a/_src/_assets/javascripts/page-contact.js b/_src/_assets/javascripts/page-contact.js new file mode 100644 index 0000000..330ad64 --- /dev/null +++ b/_src/_assets/javascripts/page-contact.js @@ -0,0 +1,8 @@ + +//=include bigchain/form-contact.js + +jQuery(function($) { + + // init form + FormContact.init() +}); diff --git a/_src/_assets/javascripts/page-usecases.js b/_src/_assets/javascripts/page-usecases.js index 4160dcb..95167de 100644 --- a/_src/_assets/javascripts/page-usecases.js +++ b/_src/_assets/javascripts/page-usecases.js @@ -1 +1,11 @@ //=include bigchain/smoothscroll.js +//=include bigchain/newsletter.js + +jQuery(function($) { + + // + // init modules + // + Newsletter.init() + +}); diff --git a/_src/_assets/styles/_page-enterprise.scss b/_src/_assets/styles/_page-enterprise.scss index 6b7745f..4d7232e 100644 --- a/_src/_assets/styles/_page-enterprise.scss +++ b/_src/_assets/styles/_page-enterprise.scss @@ -37,4 +37,16 @@ .form--enterprise { padding: $spacer ($spacer * 2); background: $gray-dark; + border-radius: $border-radius; + + .grid { + @media ($screen-sm) { + justify-content: space-between; + } + } + .grid__col { + @media ($screen-sm) { + flex-basis: 48%; + } + } } diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 2fc3c4d..e22795c 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -19,6 +19,7 @@ @import 'bigchain/buttons'; @import 'bigchain/forms'; @import 'bigchain/input-group'; +@import 'bigchain/select-theme-bigchaindb'; @import 'bigchain/logo'; @import 'bigchain/icons'; @import 'bigchain/grid'; diff --git a/_src/_assets/styles/bigchain/_forms.scss b/_src/_assets/styles/bigchain/_forms.scss index 899573d..344d192 100644 --- a/_src/_assets/styles/bigchain/_forms.scss +++ b/_src/_assets/styles/bigchain/_forms.scss @@ -11,9 +11,8 @@ appearance: none; padding: $input-padding-x $input-padding-y; font-family: $input-font; - font-weight: $font-weight-bold; + font-weight: $input-font-weight; font-size: $font-size-base; - line-height: $line-height; color: $input-color; background: none; border: none; @@ -75,6 +74,11 @@ color: $input-color-placeholder; transform-origin: left; + // hide on selects + select + & { + visibility: hidden; + } + .background--photo & { color: rgba(#fff, .5); } @@ -87,7 +91,7 @@ &:invalid:not(.is-empty) ~ .form-label, //&.parsley-error ~ .form-label, &.parsley-success ~ .form-label { - transform: translate3d(0, -(($spacer / 1.5) + $input-padding-x), 0) scale(.7); + transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7); color: $input-border-focus; } } @@ -110,6 +114,32 @@ } + +// +// Text areas +// +textarea.form-control { + // Leave resizing to js + // https://github.com/CodingAspect/Textarea-Autogrow#usage + resize: none; + box-sizing: content-box; +} + + +// +// Selects +// +select.form-control { + color: $input-color-placeholder; + font-weight: $input-font-weight; + + &:focus::-ms-value { + color: $input-color; + background-color: $input-bg; + } +} + + // // Checkboxes and radios // @@ -223,7 +253,7 @@ input[type="checkbox"] { .form-control { // Success style - &:valid:not(.is-empty), + &:valid:not(.is-empty):not(select), &.parsley-success { &, &:focus { @@ -254,7 +284,7 @@ input[type="checkbox"] { position: absolute; left: 0; bottom: 0; - font-size: $font-size-sm; + font-size: $font-size-xs; &, li { color: $brand-danger; } diff --git a/_src/_assets/styles/bigchain/_newsletter.scss b/_src/_assets/styles/bigchain/_newsletter.scss index 2851212..cf3dc91 100644 --- a/_src/_assets/styles/bigchain/_newsletter.scss +++ b/_src/_assets/styles/bigchain/_newsletter.scss @@ -44,6 +44,7 @@ .newsletter__title { @extend .h5; margin-top: 0; + margin-bottom: $spacer / 4; } .newsletter__title, diff --git a/_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss b/_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss new file mode 100644 index 0000000..61132ce --- /dev/null +++ b/_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss @@ -0,0 +1,181 @@ +// +// Position basics +// +.select-select { + display: none; + pointer-events: none; + position: absolute; + opacity: 0; +} + +.select-element { + position: absolute; + display: none; + + *, + *:before, + *:after { + box-sizing: border-box; + } + + &.select-open { + display: block; + } +} + + +// +// Actual theme +// +.select-theme-bigchaindb { + user-select: none; + box-shadow: none; + + .select-content { + border-radius: $border-radius; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + background: $gray-dark; + color: $input-color; + font-family: inherit; + overflow: auto; + max-width: 20rem; + min-width: 20rem; + max-height: 20rem; + -webkit-overflow-scrolling: touch; + + @media (max-width: 27rem), (max-height: 27rem) { + max-width: 11.25rem; + max-height: 11.25rem; + } + } + + .select-options { + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + margin: 0; + padding: 0; + } + + .select-option { + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + position: relative; + list-style: none; + margin: 0; + line-height: 1; + padding: $input-padding-x 1em $input-padding-x 2.5em; + display: block; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.select-option-selected:before { + content: url("data:image/svg+xml;utf8,"); + position: absolute; + left: 1em; + top: 0; + bottom: 0.2em; + height: 1em; + width: 1em; + margin: auto; + } + + &.select-option-highlight, + &:hover { + background: $component-active-bg; + color: $component-active-color; + + // the checkmark + &.select-option-selected:before { + content: url("data:image/svg+xml;utf8,"); + } + } + + &:first-child { + border-radius: $border-radius $border-radius 0 0; + + // assume first item is always the placeholder + color: $input-color-placeholder; + border-bottom: 1px solid $gray; + pointer-events: none; + + &:before { + display: none !important; + } + + &.select-option-highlight, + &:hover { + background: inherit !important; + color: inherit !important; + } + } + + &:last-child { + border-radius: 0 0 $border-radius $border-radius; + } + } + + &.select-target { + display: block; + vertical-align: middle; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + position: relative; + padding: $input-padding-x 3em $input-padding-x 0; + background: transparent; + border-bottom: 2px solid $input-border-color; + cursor: pointer; + color: $input-color-placeholder; + text-decoration: none; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + + &.select-target-focused, + &.select-target-focused:focus { + color: $input-color; + border-color: $input-border-focus; + outline: none; + } + + // dropdown indicator + b { + position: absolute; + right: .25em; + top: 0; + bottom: 0; + margin: auto; + height: 1.25rem; + width: 2em; + + &:before, + &:after { + content: ""; + display: block; + position: absolute; + margin: auto; + right: 0; + height: 0; + width: 0; + border: 0.263em solid transparent; + } + + &:before { + top: 0; + border-bottom-color: inherit; + } + + &:after { + bottom: 0; + border-top-color: inherit; + } + } + } + + + .form-label { + visibility: hidden; + } +} diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 98807bf..6c29135 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -100,7 +100,7 @@ $border-radius-lg: .2rem !default; $border-radius-sm: .1rem !default; $border-radius-xs: .1rem !default; -$component-active-color: #fff !default; +$component-active-color: $brand-main-blue !default; $component-active-bg: $brand-primary !default; diff --git a/_src/_includes/form-enterprise.html b/_src/_includes/form-enterprise.html index 7842dfd..349c57c 100644 --- a/_src/_includes/form-enterprise.html +++ b/_src/_includes/form-enterprise.html @@ -3,61 +3,75 @@
-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

-

- - -

- -

- - -

- +
+

+ + +

+
+
+

+ + +

+
+
+

+ + +

+
+
+

+ + +

+
+
+

+ + +

+
+
+

+ + +

+
+
+

+ + +

+

- +

diff --git a/_src/contact.html b/_src/contact.html index a86051f..1a93311 100644 --- a/_src/contact.html +++ b/_src/contact.html @@ -3,6 +3,8 @@ layout: page title: Contact tagline: Get In Touch + +js: page-contact.min.js ---

diff --git a/_src/enterprise.html b/_src/enterprise.html index 9f4f414..420ea9a 100644 --- a/_src/enterprise.html +++ b/_src/enterprise.html @@ -12,8 +12,8 @@ js: page-enterprise.min.js
-

Get unicorns and golden kittens by using BigchainDB in your enterprise.

-

A paragraph explaining the main value proposition with its messaging targeted towards decision makers in enterprise.

+

Take your enterprise to the next level with blockchain technology that scales.

+

From ideation to production, BigchainDB has the team and technology to deploy enterprise-grade applications and platforms for businesses looking to build the tools of tomorrow.

Get in touch Download one-pager
diff --git a/package.json b/package.json index dbbac82..7b50b27 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "normalize-opentype.css": ">=0.2.4", "parsleyjs": "^2.0.7", "svg4everybody": "^2.0.0", + "tether-select": "^1.1.0", + "textarea-autogrow": "^1.0.0", "vivus": "^0.4.0", "whatwg-fetch": "^2.0.3" },