From 20abe30c7bda8bb9133174132396a7dd958f6845 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../bootstrap/css/src/_responsive.scss        |  5 ++
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 53 +++++++++++++++++++
 .../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 832bbf3594..321691d0fc 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 1f13274c75..69387d7694 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 9d543b8985..b832bb1aa5 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') %]
                         <div id="forgotpassword-modal" class="forgotpassword">
-                            <p><a href="/cgi-bin/koha/opac-password-recovery.pl">Forgot your password?</a></p>
+                            <a href="/cgi-bin/koha/opac-password-recovery.pl">Forgot your password?</a>
                         </div>
                     [% END %]
                     [% IF PatronSelfRegistration && PatronSelfRegistrationDefaultCategory %]
@@ -339,7 +339,6 @@
             </div>
             <div class="modal-footer">
                 <input type="submit" class="btn btn-primary" value="Log in" />
-                <a href="#" data-dismiss="modal" aria-hidden="true" class="cancel">Cancel</a>
             </div>
         </form> <!-- /#auth -->
     </div>  <!-- /#modalAuth  -->
-- 
2.39.2