From e47a76d237fc897bbfceee78234ea6e5ff455000 Mon Sep 17 00:00:00 2001 From: Sam Pohlenz Date: Mon, 5 Jul 2021 11:15:11 +0930 Subject: [PATCH 1/8] Update userbox toggle for Bootstrap 5 --- app/views/trestle/auth/_userbox.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/trestle/auth/_userbox.html.erb b/app/views/trestle/auth/_userbox.html.erb index 4177730..637a281 100644 --- a/app/views/trestle/auth/_userbox.html.erb +++ b/app/views/trestle/auth/_userbox.html.erb @@ -10,7 +10,7 @@ <% end %> <% if show_dropdown %> - <%= link_to content, "#", data: { toggle: 'dropdown' } %> + <%= link_to content, "#", data: { bs_toggle: 'dropdown', bs_offset: "0,7" } %> <% else %> <%= content %> <% end %> From 216fa61d1bdc3105fc75c079c55c6d639617ac30 Mon Sep 17 00:00:00 2001 From: Sam Pohlenz Date: Sat, 25 Sep 2021 13:44:21 +0930 Subject: [PATCH 2/8] Update login form for Bootstrap 5 --- app/assets/bundle/trestle/auth/bundle.css | 2 +- .../trestle/auth/sessions/_form.html.erb | 16 +++++--------- frontend/_form.scss | 22 ++++++++----------- 3 files changed, 16 insertions(+), 24 deletions(-) diff --git a/app/assets/bundle/trestle/auth/bundle.css b/app/assets/bundle/trestle/auth/bundle.css index a6eea5c..09cdd06 100644 --- a/app/assets/bundle/trestle/auth/bundle.css +++ b/app/assets/bundle/trestle/auth/bundle.css @@ -1 +1 @@ -.auth-body{color:#fff;display:flex}.auth-body .container{margin:auto;width:320px}.auth-header{margin-bottom:20px;text-align:center}.auth-header h1{align-items:center;display:flex;font-size:1.75rem;font-weight:500;justify-content:center;padding:.75rem 1rem;text-shadow:rgba(0,0,0,.5) 0 1px 1px}.auth-header img{max-height:100%;max-width:80%}.auth-header span{margin-left:10px}.login-form .form-control,.login-form .input-group-text{background:hsla(0,0%,100%,.1);border:0}.login-form .form-control{color:#fff;font-size:1.1rem;padding:1.75rem .75rem}.login-form .form-control:focus{box-shadow:none;outline-color:transparent;outline-style:none}.login-form .form-control::-webkit-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-ms-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control::placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-webkit-autofill{-webkit-text-fill-color:#fff}.login-form .form-control:-webkit-autofill,.login-form .form-control:-webkit-autofill:active,.login-form .form-control:-webkit-autofill:focus,.login-form .form-control:-webkit-autofill:hover{-webkit-transition:background-color 9999999s ease-in-out 0s;transition:background-color 9999999s ease-in-out 0s}.login-form .input-group-prepend{margin-right:0}.login-form .input-group-text{color:hsla(0,0%,100%,.5);padding:.375rem .25rem .375rem 1rem}.login-form .btn-primary{box-shadow:0 0 2px rgba(0,0,0,.1);padding-bottom:.75rem;padding-top:.75rem}.login-form .alert-danger{background-color:hsla(2,62%,66%,.75)}.login-form .remember-me{font-size:.95rem;line-height:1.5;padding-left:0}.login-form .remember-me .custom-control-label{background:rgba(0,0,0,.075);border-radius:.25rem;color:hsla(0,0%,100%,.75);cursor:pointer;display:block;padding:.75em 1.5em .75em 3.25em}.login-form .remember-me .custom-control-label:hover{background:rgba(0,0,0,.125)}.login-form .remember-me .custom-control-label:after,.login-form .remember-me .custom-control-label:before{left:1.1em;top:.925em} \ No newline at end of file +.auth-body{color:#fff;display:flex}.auth-body .container{margin:auto;width:320px}.auth-header{margin-bottom:20px;text-align:center}.auth-header h1{align-items:center;display:flex;font-size:1.75rem;font-weight:500;justify-content:center;padding:.75rem 1rem;text-shadow:rgba(0,0,0,.5) 0 1px 1px}.auth-header img{max-height:100%;max-width:80%}.auth-header span{margin-left:10px}.login-form .input-group>*{background:hsla(0,0%,100%,.1);border:0;margin-left:0!important}.login-form .form-control{color:#fff;font-size:1.1rem;padding:1rem .75rem}.login-form .form-control:focus{box-shadow:none;outline-color:transparent;outline-style:none}.login-form .form-control::-webkit-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-ms-input-placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control::placeholder{color:hsla(0,0%,100%,.5)}.login-form .form-control:-webkit-autofill{-webkit-text-fill-color:#fff}.login-form .form-control:-webkit-autofill,.login-form .form-control:-webkit-autofill:active,.login-form .form-control:-webkit-autofill:focus,.login-form .form-control:-webkit-autofill:hover{-webkit-transition:background-color 9999999s ease-in-out 0s;transition:background-color 9999999s ease-in-out 0s}.login-form .input-group-text{color:hsla(0,0%,100%,.5);padding:.375rem .25rem .375rem 1rem}.login-form .btn-primary{box-shadow:0 0 2px rgba(0,0,0,.1);padding-bottom:.75rem;padding-top:.75rem}.login-form .alert-danger{background-color:hsla(2,62%,66%,.75)}.login-form .remember-me{font-size:.95rem;line-height:1.5;padding-left:0}.login-form .remember-me .form-check-input{margin-left:1em;margin-top:.825em}.login-form .remember-me .form-check-label{background:rgba(0,0,0,.075);border-radius:.25rem;color:hsla(0,0%,100%,.75);cursor:pointer;display:block;padding:.75em 1.5em .75em 3.25em}.login-form .remember-me .form-check-label:hover{background:rgba(0,0,0,.125)} \ No newline at end of file diff --git a/app/views/trestle/auth/sessions/_form.html.erb b/app/views/trestle/auth/sessions/_form.html.erb index 421e550..e64af8b 100644 --- a/app/views/trestle/auth/sessions/_form.html.erb +++ b/app/views/trestle/auth/sessions/_form.html.erb @@ -1,17 +1,13 @@
-
- -
+ <%= f.text_field Trestle.config.auth.authenticate_with, placeholder: Trestle.config.auth.human_attribute_name(Trestle.config.auth.authenticate_with), class: "form-control" %>
-
- -
+ <%= f.password_field :password, placeholder: Trestle.config.auth.human_attribute_name(:password), class: "form-control" %>
@@ -20,13 +16,13 @@ <% if Trestle.config.auth.remember.enabled %>
-
- <%= f.check_box :remember_me, class: "custom-control-input", include_hidden: false %> - <%= f.label :remember_me, t("admin.auth.remember_me", default: "Remember me"), class: "custom-control-label" %> +
+ <%= f.check_box :remember_me, class: "form-check-input", include_hidden: false %> + <%= f.label :remember_me, t("admin.auth.remember_me", default: "Remember me"), class: "form-check-label" %>
<% end %>
- <%= f.submit t("admin.auth.login", default: "Login"), class: "btn btn-primary btn-block btn-lg" %> + <%= f.submit t("admin.auth.login", default: "Login"), class: "btn btn-primary btn-lg d-block w-100" %>
diff --git a/frontend/_form.scss b/frontend/_form.scss index be7a49d..be58abf 100644 --- a/frontend/_form.scss +++ b/frontend/_form.scss @@ -1,14 +1,15 @@ .login-form { - .form-control, .input-group-text { + .input-group > * { background: $auth-form-control-bg; border: $auth-form-control-border; + margin-left: 0 !important; } .form-control { color: $auth-form-control-color; font-size: 1.1rem; - padding: 1.75rem 0.75rem; + padding: 1rem 0.75rem; &:focus { outline-color: transparent; @@ -29,10 +30,6 @@ } } - .input-group-prepend { - margin-right: 0; - } - .input-group-text { color: $auth-form-control-icon-color; padding: 0.375rem 0.25rem 0.375rem 1rem; @@ -55,7 +52,12 @@ padding-left: 0; - .custom-control-label { + .form-check-input { + margin-left: 1em; + margin-top: 0.825em; + } + + .form-check-label { display: block; cursor: pointer; @@ -68,12 +70,6 @@ &:hover { background: opacify($auth-remember-me-bg, 0.05); } - - &::before, - &::after { - top: 0.175em + 0.75em; - left: 1.1em; - } } } } From c504c17ab9a24f1dc3e82124bf7b7d5d9917ce53 Mon Sep 17 00:00:00 2001 From: Sam Pohlenz Date: Mon, 21 Aug 2023 16:05:42 +0930 Subject: [PATCH 3/8] Use new theme settings partial instead of old external stylesheet --- app/views/layouts/trestle/auth.html.erb | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/views/layouts/trestle/auth.html.erb b/app/views/layouts/trestle/auth.html.erb index 725cd25..3f23646 100644 --- a/app/views/layouts/trestle/auth.html.erb +++ b/app/views/layouts/trestle/auth.html.erb @@ -14,17 +14,16 @@ <%= Trestle.config.site_title %> <%= stylesheet_link_tag "trestle/admin", 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag "trestle/theme", 'data-turbolinks-track': 'reload' if Trestle.config.theme %> <%= stylesheet_link_tag "trestle/custom", 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag "trestle/auth", 'data-turbolinks-track': 'reload' %> - <%= javascript_include_tag "turbolinks" if Trestle.config.turbolinks %> + <%= render "trestle/theme" %> <%= hook "auth.head" %> - +
<%= yield %>
From a6e2e8f0662cb681e95ec7ecd9976c879ab4b671 Mon Sep 17 00:00:00 2001 From: Sam Pohlenz Date: Mon, 21 Aug 2023 16:05:52 +0930 Subject: [PATCH 4/8] Fix Bootstrap class on userbox dropdown --- app/views/trestle/auth/_userbox.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/trestle/auth/_userbox.html.erb b/app/views/trestle/auth/_userbox.html.erb index 637a281..3ee2dac 100644 --- a/app/views/trestle/auth/_userbox.html.erb +++ b/app/views/trestle/auth/_userbox.html.erb @@ -16,7 +16,7 @@ <% end %> <% if show_dropdown -%> -