From b4ece300cf2413b55c3cb50470209a4463283590 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 13 Aug 2018 14:07:46 +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_SCSS_in_the_OPAC_and_staff_client). 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. Signed-off-by: Claire Gravely Signed-off-by: Katrin Fischer --- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 5 ++ koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 53 ++++++++++++++++++++++ .../opac-tmpl/bootstrap/en/includes/masthead.inc | 3 +- 3 files changed, 59 insertions(+), 2 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 832bbf3..321691d 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -424,6 +424,11 @@ border-bottom: 1px solid #D8D8D8; border-radius: 7px 7px 0 0; } + + #loginModal { + margin: 0; + width: auto; + } } @media only screen and ( max-width: 800px ) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 1f13274..69387d7 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2377,6 +2377,59 @@ button.closebtn { padding: 0; } +.modal { + form { + margin: 0; + } +} + +#loginModal { + margin-left: -200px; + width: 400px; + + input { + box-sizing: border-box; + display: block; + font-size: 150%; + height: auto; + padding: .4em; + width: 100%; + + &[type='submit'] { + background: #006DCC none; + font-size: 100%; + padding: .5em; + transition: background-color .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; +} + .btn-group { label, select { diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 9d543b8..b832bb1 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -327,7 +327,7 @@ [% END %] [% IF Koha.Preference('OpacPasswordChange') && Koha.Preference('OpacResetPassword') %] [% END %] [% IF PatronSelfRegistration && PatronSelfRegistrationDefaultCategory %] @@ -339,7 +339,6 @@ -- 2.1.4