From 32f9f258b76984ffc3a57dce03d74825f619beff Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Wed, 3 Apr 2019 16:47:37 -0300 Subject: [PATCH] (add) become candidate modal --- apps/block_scout_web/assets/css/_mixins.scss | 12 +++- apps/block_scout_web/assets/css/app.scss | 2 + .../assets/css/components/_form.scss | 32 ++++++++++ .../assets/css/components/_modal.scss | 63 +++++++++++++++++++ .../assets/css/components/_stakes.scss | 4 +- apps/block_scout_web/assets/js/app.js | 1 + apps/block_scout_web/assets/js/lib/modals.js | 7 +++ .../_stakes_modal_become_candidate.html.eex | 37 +++++++++++ .../templates/stakes/_stakes_top.html.eex | 1 + 9 files changed, 155 insertions(+), 4 deletions(-) create mode 100644 apps/block_scout_web/assets/css/components/_form.scss create mode 100644 apps/block_scout_web/assets/css/components/_modal.scss create mode 100644 apps/block_scout_web/assets/js/lib/modals.js create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index d5a9f2eef8..c1926ecd90 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -75,7 +75,7 @@ cursor: pointer; display: flex; height: 36px; - justify-content: space-between; + justify-content: center; padding: 0 15px; transition: all 0.25s; width: fit-content; @@ -95,6 +95,10 @@ path { fill: $text-color; } + + &.full-width { + width: 100%; + } } @mixin btn-line($bg-color: #fff, $text-color: $secondary) { @@ -105,7 +109,7 @@ cursor: pointer; display: flex; height: 36px; - justify-content: space-between; + justify-content: center; padding: 0 15px; transition: all 0.25s; width: fit-content; @@ -125,4 +129,8 @@ path { fill: $text-color; } + + &.full-width { + width: 100%; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index 43ad720cf9..e7202646d2 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -101,6 +101,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/progress_from_to"; @import "components/stakes_empty_content"; @import "components/stakes_btn_remove_pool"; +@import "components/modal"; +@import "components/form"; :export { primary: $primary; diff --git a/apps/block_scout_web/assets/css/components/_form.scss b/apps/block_scout_web/assets/css/components/_form.scss new file mode 100644 index 0000000000..f5fa84eab5 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_form.scss @@ -0,0 +1,32 @@ +$form-control-border-color: #e2e5ec !default; + +.form-control { + border-color: $form-control-border-color; + border-radius: 0; + font-size: 14px; + + &.n-b-r { + border-right: none; + } +} + +.form-p { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.5; + + .text-dark { + color: #333; + } +} + +.input-group-prepend.last { + .input-group-text { + background: none; + border-color: $form-control-border-color; + border-left: none; + color: #a3a9b5; + font-size: 14px; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss new file mode 100644 index 0000000000..cba1a7f36a --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal.scss @@ -0,0 +1,63 @@ +$modal-overlay-color: rgba($secondary, 0.9) !default; +$modal-horizontal-padding: 30px !default; +$modal-vertical-padding: 25px !default; +$modal-border-radius: 10px !default; + +.modal-backdrop { + background-color: $modal-overlay-color; + + &.show { + opacity: 1; + } +} + +.modal-header { + border-bottom: none; + padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding }; + + .close.close-modal { + margin: -70px -70px 0 0; + opacity: 1; + } +} + +.modal-body { + padding: 0 #{ $modal-horizontal-padding } #{ $modal-vertical-padding }; +} + +.modal-title { + color: #333; + font-size: 18px; + font-weight: normal; + text-align: left; +} + +.modal-content { + border-radius: $modal-border-radius; +} + +.modal-bottom-disclaimer { + background-color: #f6f7f9; + border-bottom-left-radius: $modal-border-radius; + border-bottom-right-radius: $modal-border-radius; + color: #a3a9b5; + display: flex; + font-size: 12px; + font-weight: normal; + line-height: 1.67; + padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding }; + text-align: left; + + .modal-bottom-disclaimer-graphic { + flex-shrink: 0; + padding-right: 15px; + } + + .modal-bottom-disclaimer-text { + flex-grow: 1; + } +} + +.modal-become-candidate { + width: 280px; +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_stakes.scss b/apps/block_scout_web/assets/css/components/_stakes.scss index dd34f91980..d0179bf6eb 100644 --- a/apps/block_scout_web/assets/css/components/_stakes.scss +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -37,7 +37,7 @@ $stakes-banned-background: #fff3f7!default; } } - @include media-breakpoint-down(md) { + @include media-breakpoint-down(sm) { grid-column-start: auto !important; grid-row-start: auto !important; } @@ -131,7 +131,7 @@ $stakes-banned-background: #fff3f7!default; justify-self: end; } - @include media-breakpoint-down(md) { + @include media-breakpoint-down(sm) { grid-column-start: auto !important; grid-row-start: auto !important; justify-self: center; diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 4c9ac868d9..47946673a4 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -51,4 +51,5 @@ import './lib/token_transfers_toggle' import './lib/transaction_input_dropdown' import './lib/async_listing_load' import './lib/tooltip' +import './lib/modals' import './lib/try_api' diff --git a/apps/block_scout_web/assets/js/lib/modals.js b/apps/block_scout_web/assets/js/lib/modals.js new file mode 100644 index 0000000000..c8e746f0e5 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/modals.js @@ -0,0 +1,7 @@ +import $ from 'jquery' + +$(function () { + $('.js-become-candidate').on('click', function () { + $('#becomeCandidateModal').modal() + }) +}) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex new file mode 100644 index 0000000000..b5d58ea019 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex @@ -0,0 +1,37 @@ + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex index 6c3711e69c..53b0d4ecde 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex @@ -13,3 +13,4 @@ +<%= render BlockScoutWeb.StakesView, "_stakes_modal_become_candidate.html" %> \ No newline at end of file