mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-22 01:36:55 +01:00
switch to select2, select.js is abandoned
This commit is contained in:
parent
793d86b5e8
commit
1e5c4fb14d
@ -7,7 +7,7 @@ echo " Installing dependencies "
|
||||
echo "============================================="
|
||||
echo "$(tput sgr0)" # reset
|
||||
|
||||
npm install gulpjs/gulp.git#4.0 bower -g
|
||||
npm install gulpjs/gulp.git#4.0 -g
|
||||
npm install
|
||||
|
||||
# Travis does that automatically after selecting ruby
|
||||
|
66
_src/_assets/javascripts/bigchain/form-enterprise.js
Normal file
66
_src/_assets/javascripts/bigchain/form-enterprise.js
Normal file
@ -0,0 +1,66 @@
|
||||
|
||||
var FormEnterprise = (function(w, d, $) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var app, _private, _config;
|
||||
|
||||
_config = {
|
||||
form: $('#form-enterprise'),
|
||||
formBtn: $('#form-enterprise').find('.btn'),
|
||||
formURL: $('#form-enterprise').attr('action'),
|
||||
formMethod: $('#form-enterprise').attr('method')
|
||||
};
|
||||
|
||||
_private = {
|
||||
formSubmit: function() {
|
||||
_config.form.submit(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if ( $(this).parsley().isValid() ) {
|
||||
$.ajax({
|
||||
url: _config.formURL,
|
||||
method: _config.formMethod,
|
||||
data: $(this).serialize(),
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
_config.formBtn
|
||||
.addClass('disabled')
|
||||
.attr('value', 'Sending...');
|
||||
},
|
||||
success: function(data) {
|
||||
_config.form.find('.form-group').addClass('hide');
|
||||
_config.form.find('.alert-success').removeClass('hide');
|
||||
_config.formBtn.removeClass('disabled');
|
||||
|
||||
// send GA event
|
||||
if (!_dntEnabled()) {
|
||||
//GoogleAnalytics.gaEventContactSuccess();
|
||||
}
|
||||
},
|
||||
error: function(err) {
|
||||
_config.form.find('.alert-danger').removeClass('hide');
|
||||
_config.formBtn
|
||||
.removeClass('disabled')
|
||||
.attr('value', 'Send');
|
||||
|
||||
// send GA event
|
||||
if (!_dntEnabled()) {
|
||||
//GoogleAnalytics.gaEventContactError();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
app = {
|
||||
init: function() {
|
||||
_private.formSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
return app;
|
||||
|
||||
})(window, document, jQuery);
|
@ -1,8 +1,7 @@
|
||||
|
||||
//=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
|
||||
//=include ../../../../node_modules/select2/dist/js/select2.js
|
||||
|
||||
var Forms = (function(w, d, $) {
|
||||
|
||||
@ -48,9 +47,10 @@ var Forms = (function(w, d, $) {
|
||||
}
|
||||
},
|
||||
initSelect: function(el) {
|
||||
Select.init({
|
||||
className: 'select-theme-bigchaindb'
|
||||
})
|
||||
_config.form.find('select').select2({
|
||||
minimumResultsForSearch: 15,
|
||||
theme: 'bigchaindb'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,7 @@
|
||||
//=include bigchain/smoothscroll.js
|
||||
//=include bigchain/form-enterprise.js
|
||||
|
||||
jQuery(function($) {
|
||||
|
||||
FormEnterprise.init();
|
||||
});
|
||||
|
@ -60,7 +60,7 @@
|
||||
&:required,
|
||||
&[required] {
|
||||
+ .form-label,
|
||||
+ .select-target + .form-label {
|
||||
+ .select2-container--bigchaindb + .form-label {
|
||||
&:after {
|
||||
content: "*";
|
||||
@extend .required;
|
||||
|
@ -0,0 +1,99 @@
|
||||
.select2-selection--multiple {
|
||||
@extend .form-control;
|
||||
height: auto;
|
||||
cursor: text;
|
||||
|
||||
.select2-selection__rendered {
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: #999;
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
background-color: #e4e4e4;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
|
||||
float: left;
|
||||
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
||||
margin-right: 2px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
.select2-selection--multiple {
|
||||
.select2-search--inline,
|
||||
.select2-selection__choice,
|
||||
.select2-selection__placeholder {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
margin-left: 5px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--focus {
|
||||
.select2-selection--multiple {
|
||||
border: solid black 1px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--disabled {
|
||||
.select2-selection--multiple {
|
||||
background-color: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
@ -0,0 +1,89 @@
|
||||
.select2-selection--single {
|
||||
@extend .form-control;
|
||||
height: auto;
|
||||
|
||||
.select2-selection__rendered {
|
||||
color: $input-color;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: $input-color-placeholder;
|
||||
}
|
||||
|
||||
// dropdown indicator
|
||||
.select2-selection__arrow {
|
||||
position: absolute;
|
||||
right: .15em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 1.25rem;
|
||||
width: 2em;
|
||||
color: $gray-light;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
b {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
.select2-selection--single {
|
||||
.select2-selection__clear {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
left: 1px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--disabled {
|
||||
.select2-selection--single {
|
||||
background-color: #eee;
|
||||
cursor: default;
|
||||
|
||||
.select2-selection__clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open {
|
||||
.select2-selection--single {
|
||||
.select2-selection__arrow {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
135
_src/_assets/styles/bigchain/_select2-bigchaindb/layout.scss
Normal file
135
_src/_assets/styles/bigchain/_select2-bigchaindb/layout.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@import '../../../../../node_modules/select2/src/scss/core.scss';
|
||||
|
||||
.select2-container--bigchaindb {
|
||||
@import 'single';
|
||||
@import 'multiple';
|
||||
|
||||
.select2-dropdown {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
|
||||
background: $gray-dark;
|
||||
color: $input-color;
|
||||
font-family: inherit;
|
||||
|
||||
// resets
|
||||
border: none;
|
||||
}
|
||||
|
||||
+ .form-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.select2-container--open.select2-container--above {
|
||||
.select2-selection--multiple,
|
||||
.select2-selection--single {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open.select2-container--below {
|
||||
.select2-selection--multiple,
|
||||
.select2-selection--single {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search--dropdown {
|
||||
.select2-search__field {
|
||||
@extend .form-control;
|
||||
border-bottom: 1px solid $input-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results > .select2-results__options {
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (max-width: 27rem), (max-height: 27rem) {
|
||||
max-height: 11.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
line-height: 1;
|
||||
padding: $input-padding-x 1em $input-padding-x 1em;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// assume first item is always the empty placeholder
|
||||
&:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[aria-disabled=true] {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&[aria-selected=true] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding-left: 1em;
|
||||
|
||||
.select2-results__group {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -1em;
|
||||
padding-left: 2em;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -2em;
|
||||
padding-left: 3em;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -3em;
|
||||
padding-left: 4em;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -4em;
|
||||
padding-left: 5em;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -5em;
|
||||
padding-left: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $component-active-bg;
|
||||
color: $component-active-color;
|
||||
}
|
||||
|
||||
.select2-results__group {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
@ -29,8 +29,8 @@
|
||||
"normalize-css": ">=2.3.1",
|
||||
"normalize-opentype.css": ">=0.2.4",
|
||||
"parsleyjs": "^2.0.7",
|
||||
"select2": "^4.0.3",
|
||||
"svg4everybody": "^2.0.0",
|
||||
"tether-select": "^1.1.0",
|
||||
"textarea-autogrow": "^1.0.0",
|
||||
"vivus": "^0.4.0",
|
||||
"whatwg-fetch": "^2.0.3"
|
||||
|
Loading…
Reference in New Issue
Block a user