bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00
Code Releases Activity

so many form tweaks

Browse Source 
- new native select style
- progressively enhanced select styles via select.js
- new textarea autogrow functionality
- start isolating all the forms, load only when needed
This commit is contained in:
Matthias Kretschmann 2017-04-12 15:42:35 +02:00
parent addf4eb7ef
commit 26d547ae02
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
16 changed files with 344 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_src/_assets/javascripts/bigchain.js
View File

@ -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();

16
_src/_assets/javascripts/bigchain/forms.js
View File

@ -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()
}
}

2
_src/_assets/javascripts/page-cla.js
View File

@ -5,5 +5,5 @@
jQuery(function($) {
// init form
FormCla.init();
FormCla.init()
});

4
_src/_assets/javascripts/page-community.js
View File

@ -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'),

8
_src/_assets/javascripts/page-contact.js Normal file
View File

@ -0,0 +1,8 @@
//=include bigchain/form-contact.js
jQuery(function($) {
// init form
FormContact.init()
});

10
_src/_assets/javascripts/page-usecases.js
View File

@ -1 +1,11 @@
//=include bigchain/smoothscroll.js
//=include bigchain/newsletter.js
jQuery(function($) {
//
// init modules
//
Newsletter.init()
});

12
_src/_assets/styles/_page-enterprise.scss
View File

@ -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%;
}
}
}

1
_src/_assets/styles/bigchain.scss
View File

@ -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';

40
_src/_assets/styles/bigchain/_forms.scss
View File

@ -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; }

1
_src/_assets/styles/bigchain/_newsletter.scss
View File

@ -44,6 +44,7 @@
.newsletter__title {
@extend .h5;
margin-top: 0;
margin-bottom: $spacer / 4;
}
.newsletter__title,

181
_src/_assets/styles/bigchain/_select-theme-bigchaindb.scss Normal file
View File

@ -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,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$input-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$input-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
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,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#{$component-active-color}' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
}
}
&: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;
}
}

2
_src/_assets/styles/bigchain/_variables.scss
View File

@ -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;

118
_src/_includes/form-enterprise.html
View File

@ -3,61 +3,75 @@
<div class="grid grid--full grid-small--half">
<p class="form-group grid__col">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Name</label>
</p>
<p class="form-group grid__col">
<input class="form-control" type="text" id="company" name="company" required>
<label class="form-label" for="company">Company</label>
</p>
<p class="form-group grid__col">
<input class="form-control" type="email" id="email" name="_replyto" required>
<label class="form-label" for="email">Email</label>
</p>
<p class="form-group grid__col">
<input class="form-control" type="tel" id="phone" name="phone" required>
<label class="form-label" for="phone">Phone</label>
</p>
<p class="form-group grid__col">
<input class="form-control" type="text" id="country" name="country" required>
<label class="form-label" for="country">Country</label>
</p>
<p class="form-group grid__col">
<select class="form-control" id="industry" name="industry">
<option>Automotive</option>
<option>Banking</option>
<option>Consulting</option>
<option>Data</option>
<option>Energy</option>
<option>Government</option>
<option>Healthcare</option>
<option>Identity &amp; Security</option>
<option>Insurance</option>
<option>Information Technology</option>
<option>Logistics &amp; Shipping</option>
<option>Manufacturing</option>
<option>Media &amp; Content</option>
<option>Other</option>
</select>
<label class="form-label" for="industry">Industry</label>
</p>
<p class="form-group grid__col">
<select class="form-control" id="interest" name="interest">
<option>Education</option>
<option>Partnership</option>
<option>Proof-of-Concept / Prototype / Pilot</option>
<option>Implementation</option>
<option>BigchainDB Enterprise Subscription</option>
</select>
<label class="form-label" for="interest">Interested in</label>
</p>
<div class="grid__col">
<p class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Name</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<input class="form-control" type="text" id="company" name="company" required>
<label class="form-label" for="company">Company</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<input class="form-control" type="email" id="email" name="_replyto" required>
<label class="form-label" for="email">Email</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<input class="form-control" type="tel" id="phone" name="phone" required>
<label class="form-label" for="phone">Phone</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<input class="form-control" type="text" id="country" name="country" required>
<label class="form-label" for="country">Country</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<select class="form-control" id="industry" name="industry" required data-required="true">
<option value="">Industry</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Consulting">Consulting</option>
<option value="Data">Data</option>
<option value="Energy">Energy</option>
<option value="Government">Government</option>
<option value="Healthcare">Healthcare</option>
<option value="Identity">Identity &amp; Security</option>
<option value="Insurance">Insurance</option>
<option value="Information Technology">Information Technology</option>
<option value="Logistics">Logistics &amp; Shipping</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Media">Media &amp; Content</option>
<option value="other">Other</option>
</select>
<label class="form-label" for="industry">Industry</label>
</p>
</div>
<div class="grid__col">
<p class="form-group">
<select class="form-control" id="interest" name="interest" required data-required="true">
<option value="">Interested in</option>
<option value="Education">Education</option>
<option value="Partnership">Partnership</option>
<option value="Prototype">Proof-of-Concept / Prototype / Pilot</option>
<option value="Implementation">Implementation</option>
<option value="BigchainDB Enterprise Edition">BigchainDB Enterprise Subscription</option>
</select>
<label class="form-label" for="interest">Interested in</label>
</p>
</div>
</div>
<p class="form-group">
<textarea class="form-control" id="comment" name="comment" rows="4" required></textarea>
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
<label class="form-label" for="comment">Comments</label>
</p>
<p class="form-group">

2
_src/contact.html
View File

@ -3,6 +3,8 @@ layout: page
title: Contact
tagline: Get In Touch
js: page-contact.min.js
---
<section class="section section-contactform">

4
_src/enterprise.html
View File

@ -12,8 +12,8 @@ js: page-enterprise.min.js
<div class="hero__content row row--wide">
<hgroup>
<h1 class="section-title">Get unicorns and golden kittens by using BigchainDB in your enterprise.</h1>
<p class="section-description">A paragraph explaining the main value proposition with its messaging targeted towards decision makers in enterprise.</p>
<h1 class="section-title">Take your enterprise to the next level with blockchain technology that scales.</h1>
<p class="section-description">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.</p>
<a href="#" class="btn btn-primary">Get in touch</a> <a href="#" class="btn btn-secondary">Download one-pager</a>
</hgroup>
</div>

2
package.json
View File

@ -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"
},