From 6c48fe58c8587fcdf8f3ad814c7959c906ebbe41 Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 25 Jan 2022 17:19:06 +1100 Subject: [PATCH] In /my_account/sign_up/index.html.jst add icons to every button --- _svg/fa_arrow-circle-left.svg | 1 + _svg/fa_envelope.svg | 1 + _svg/fa_redo.svg | 1 + _svg/fa_user-plus.svg | 1 + css/bootstrap/_buttons.scss | 9 ++++--- css/bootstrap/_variables.scss | 16 ++++++------ css/bootstrap/mixins/_buttons.scss | 6 +++-- my_account/sign_up/index.html.jst | 41 +++++++++++++++++++++++++----- 8 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 _svg/fa_arrow-circle-left.svg create mode 100644 _svg/fa_envelope.svg create mode 100644 _svg/fa_redo.svg create mode 100644 _svg/fa_user-plus.svg diff --git a/_svg/fa_arrow-circle-left.svg b/_svg/fa_arrow-circle-left.svg new file mode 100644 index 0000000..1f21c63 --- /dev/null +++ b/_svg/fa_arrow-circle-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_svg/fa_envelope.svg b/_svg/fa_envelope.svg new file mode 100644 index 0000000..2da8a00 --- /dev/null +++ b/_svg/fa_envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_svg/fa_redo.svg b/_svg/fa_redo.svg new file mode 100644 index 0000000..fd68111 --- /dev/null +++ b/_svg/fa_redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_svg/fa_user-plus.svg b/_svg/fa_user-plus.svg new file mode 100644 index 0000000..4c79099 --- /dev/null +++ b/_svg/fa_user-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/bootstrap/_buttons.scss b/css/bootstrap/_buttons.scss index 6ee24ba..e8effb2 100644 --- a/css/bootstrap/_buttons.scss +++ b/css/bootstrap/_buttons.scss @@ -16,7 +16,8 @@ user-select: none; background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + //@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-yt, $btn-padding-yb, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); // Nick @include transition($btn-transition); @include hover() { @@ -110,11 +111,13 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + //@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-yt-lg, $btn-padding-yb-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); // Nick } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + //@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-yb-sm, $btn-padding-yt-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss index a6ba2ed..095c5bc 100644 --- a/css/bootstrap/_variables.scss +++ b/css/bootstrap/_variables.scss @@ -414,6 +414,8 @@ $input-btn-border-width: $border-width !default; // For each of Bootstrap's buttons, define text, background, and border color. $btn-padding-y: $input-btn-padding-y !default; +$btn-padding-yt: $btn-padding-y * 1.1 !default; // Nick +$btn-padding-yb: $btn-padding-y * .9 !default; // Nick $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; $btn-font-size: $input-btn-font-size !default; @@ -421,11 +423,15 @@ $btn-line-height: $input-btn-line-height !default; $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping $btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-yt-sm: $btn-padding-y-sm * 1.1 !default; // Nick +$btn-padding-yb-sm: $btn-padding-y-sm * .9 !default; // Nick $btn-padding-x-sm: $input-btn-padding-x-sm !default; $btn-font-size-sm: $input-btn-font-size-sm !default; $btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-yt-lg: $btn-padding-y-lg * 1.1 !default; // Nick +$btn-padding-yb-lg: $btn-padding-y-lg * .9 !default; // Nick $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $input-btn-line-height-lg !default; @@ -840,15 +846,9 @@ $jumbotron-bg: $gray-200 !default; // Cards -// Nick -// the card header/footer looks slightly wonky because the centring is -// applied after room for ascender and descender, but don't want room -// for descender, therefore set the bottom spacing to be slightly less; -// try to allow enough room overall for a 32px icon to show and hide -$card-spacer-yt: .8rem !default; -$card-spacer-yb: .7rem !default; - $card-spacer-y: .75rem !default; +$card-spacer-yt: $card-spacer-y * 1.05 !default; // Nick +$card-spacer-yb: $card-spacer-y * .95 !default; // Nick $card-spacer-x: 1.25rem !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; diff --git a/css/bootstrap/mixins/_buttons.scss b/css/bootstrap/mixins/_buttons.scss index d6235aa..4e03ce0 100644 --- a/css/bootstrap/mixins/_buttons.scss +++ b/css/bootstrap/mixins/_buttons.scss @@ -101,8 +101,10 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { - padding: $padding-y $padding-x; +// Nick $padding-y changes to $padding-yt, $padding-yb +@mixin button-size($padding-yt, $padding-yb, $padding-x, $font-size, $line-height, $border-radius) { + //padding: $padding-y $padding-x; + padding: $padding-yt $padding-x $padding-yb $padding-x; @include font-size($font-size); line-height: $line-height; // Manually declare to provide an override to the browser default diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index e9e29ca..006d9a7 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -1,5 +1,9 @@ return async env => { let breadcrumbs = await _require('/_lib/breadcrumbs.jst') + let fa_arrow_circle_left = await env.site.get_min_svg('/_svg/fa_arrow-circle-left.svg') + let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg') + let fa_redo = await env.site.get_min_svg('/_svg/fa_redo.svg') + let fa_user_plus = await env.site.get_min_svg('/_svg/fa_user-plus.svg') let get_placeholder = await _require('/_lib/get_placeholder.jst') let get_session = await _require('/_lib/get_session.jst') let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg') @@ -118,11 +122,26 @@ return async env => { } } - button.btn.btn-outline-secondary#'card-1-new-code'(type="button") {'New code'} + button.btn.btn-outline-secondary#'card-1-new-code'(type="button") { + div.icon24-outer.mr-2 { + div.icon24-inner {_out.push(fa_redo)} + } + 'New code' + } if (sign_up_draft !== null) - button.btn.btn-success.ml-3#card-1-create-account(type="button") {'Create account'} - else - button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) {'Create account'} + button.btn.btn-success.ml-3#card-1-create-account(type="button") { + div.icon24-outer.mr-2 { + div.icon24-inner {_out.push(fa_user_plus)} + } + 'Create account' + } + else + button.btn.btn-success.ml-3#card-1-create-account(type="button" disabled) { + div.icon24-outer.rm-2 { + div.icon24-inner {_out.push(fa_user_plus)} + } + 'Create account' + } p.'mt-3'.mb-0#card-1-message(hidden) {} } @@ -147,8 +166,18 @@ return async env => { } div#card-2-collapse.collapse(role="tabpanel" aria-labelledby="card-2-heading" data-parent="#accordion") { div.card-body { - button.btn.btn-outline-secondary#card-2-back(type="button") {'Back'} - button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) {'Re-send email'} + button.btn.btn-outline-secondary#card-2-back(type="button") { + div.icon24-outer.mr-2 { + div.icon24-inner {_out.push(fa_arrow_circle_left)} + } + 'Back' + } + button.btn.btn-outline-secondary.ml-3#card-2-resend-email(type="button" disabled) { + div.icon24-outer.mr-2 { + div.icon24-inner {_out.push(fa_envelope)} + } + 'Re-send email' + } p.'mt-3'.mb-0#card-2-message(hidden) {} } -- 2.34.1