From a6680dcdb87ac55e19f16564b76b4dd6a2798d2f Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 3 Aug 2018 16:49:50 +0000 Subject: [PATCH] Bug 21157: Improve style of OPAC login modal This patch revises the style of the OPAC's login form modal view. The goal is simply to make it look nicer. To test, apply the patch and regenerate the OPAC's CSS (https://wiki.koha-community.org/wiki/Working_with_Bootstrap_OPAC_LESS_files). In the OPAC, click the "Log in to your account" link at the top of the page. It should trigger the login modal. While the modal is displayed, resize the browser width to confirm that the form handles different widths well. Sign off if you think this is an improvement. --- .../opac-tmpl/bootstrap/en/includes/masthead.inc | 3 +- koha-tmpl/opac-tmpl/bootstrap/less/opac.less | 53 ++++++++++++++++++++++ koha-tmpl/opac-tmpl/bootstrap/less/responsive.less | 4 ++ 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 15d185f..7156e10 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -326,7 +326,7 @@ [% END %] [% IF Koha.Preference('OpacPasswordChange') && Koha.Preference('OpacResetPassword') %]
-

Forgot your password?

+ Forgot your password?
[% END %] [% IF PatronSelfRegistration && PatronSelfRegistrationDefaultCategory %] @@ -338,7 +338,6 @@ diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less index 92e6e03..27a2074 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less +++ b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less @@ -2060,6 +2060,59 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit font-size: 13px; } +.modal { + form { + margin: 0; + } +} + +#loginModal { + width: 400px; + margin-left: -200px; + + input { + display: block; + box-sizing: border-box; + font-size: 150%; + height: auto; + padding: .4em; + width: 100%; + + &[type='submit'] { + background: #006dcc none; + font-size: 100%; + padding: .5em; + transition: background-color 0.5s ease; + + &:hover { + background: #0088cc none; + } + } + } + + .closebtn { + color: #C00; + opacity: 1; + + &:hover { + opacity: .4; + } + } + + .modal-header, + .modal-body, + .modal-footer { + font-size: 120%; + padding: 1em 2em; + } +} + +.nologininstructions, +.forgotpassword, +.patronregistration { + padding-top: 1em; +} + .span2 select { width: 100%; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less index 2df6bf5..46d4a96 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less +++ b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less @@ -389,6 +389,10 @@ border-radius: 7px 7px 0 0; border-bottom: 1px solid #D8D8D8; } + #loginModal { + margin: 0; + width: auto; + } } @media only screen and (max-width: 800px) { -- 2.1.4