From 6a5afddaca1fda1714f23f6f1a318c9fcd4bb2d8 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Sat, 11 Jul 2020 12:09:49 +0000
Subject: [PATCH] Bug 25906: Style corrections for OPAC serial pages

This patch makes some CSS changes to the OPAC SCSS and to the OPAC
"full serial issues" page to improve the style.

I've expanded the in-page CSS on the full serial issues page for
readability and added Template Toolkit's "collapse" filter to remove the
whitespace on rendering.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

- Locate a serial record in the OPAC.
- Click "More details" to view the issues page.
- Confirm that the "view" tabs look correct, with consistent padding.
- Click the "Full history" tab.
- In the sidebar, the filter should have full-width dropdowns and clear
  button.
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    |  7 +---
 .../en/modules/opac-full-serial-issues.tt          | 49 ++++++++++++++++++++--
 .../bootstrap/en/modules/opac-serial-issues.tt     |  9 +++-
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index c30901390e..66021a4656 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -1460,6 +1460,7 @@ div {
         font-size: 14px;
         line-height: 20px;
         text-align: center;
+        text-decoration: none;
         vertical-align: middle;
     }
 }
@@ -1475,12 +1476,6 @@ div {
     font-weight: bold;
 }
 
-#Fullhistory,
-#Briefhistory {
-    background:  transparent none;
-    padding-left: 0;
-}
-
 /* pagination */
 
 .pagination {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
index 42d63dd77a..b4f5aa574d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
@@ -5,9 +5,50 @@
 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo;  Full subscription history for [% bibliotitle | html %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% BLOCK cssinclude %]
+    [% FILTER collapse %]
     <style>
-        #search-facets fieldset { border: 0; margin: 0;padding:0;}#search-facets ol{padding:.3em;}#search-facets li {list-style-type:none;padding:4px 4px;}#search-facets label{font-weight:bold;display:block;margin:.2em 0;}#search-facets fieldset.action {padding-left:4px;margin:.3em;}div.tabsub { clear:both;}#subtabs a { display:block;float:left;border:1px solid #CCC;padding:.2em .4em;margin:.3em;text-decoration:none;font-size:115%;}#subtabs strong { display:block; float: left; font-size:115%;padding:.2em .4em; margin: 0.3em 0;}#subtabs { margin-top : 1em; }a.currentsubtab { background-color:#FFC;}
+        div.tabsub {
+            clear: both;
+        }
+        #filterform label {
+            font-weight: bold;
+        }
+        #filterform select {
+            width: 100%;
+        }
+        #subtabs a {
+            display: block;
+            float: left;
+            border: 1px solid #CCC;
+            padding: .2em .4em;
+            margin: .3em;
+            text-decoration: none;
+            font-size: 115%;
+        }
+
+        #subtabs strong {
+            display: block;
+            float: left;
+            font-size: 115%;
+            padding: .2em .4em;
+            margin: 0.3em 0;
+        }
+
+        #subtabs {
+            margin-top: 1em;
+        }
+        .action .btn {
+            font-size: 90%;
+            width: 100%;
+        }
+        .menu-collapse {
+            padding: .5em;
+        }
+        a.currentsubtab {
+            background-color: #FFC;
+        }
     </style>
+    [% END %]
 [% END %]
 </head>
 [% INCLUDE 'bodytag.inc' bodyid='opac-full-serial-issues' bodyclass='scrollto' %]
@@ -30,12 +71,12 @@
                             <ul class="menu-collapse">
                                 <li>
                                     <label for="libraryfilter">Library: </label>
-                                    <select id="libraryfilter" name="libraryfilter" style="width:10em;"></select>
+                                    <select id="libraryfilter" name="libraryfilter"></select>
                                     <label for="subscriptionidfilter">Subscription: </label>
-                                    <select id="subscriptionidfilter" name="subscriptionfilter" style="width:10em;" disabled="disabled"></select>
+                                    <select id="subscriptionidfilter" name="subscriptionfilter" disabled="disabled"></select>
                                 </li>
                                 <li class="action">
-                                    <input type="reset" id="reset" class="btn" value="Clear" />
+                                    <input type="reset" id="reset" class="btn btn-default" value="Clear" />
                                 </li>
                             </ul>
                             </form>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
index 4be2764a6b..27d5e1f756 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
@@ -2,7 +2,12 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo;  Issues for a subscription</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% BLOCK cssinclude %][% END %]
+[% BLOCK cssinclude %]
+    .subscriptionline {
+        border-bottom: 1px solid #EEE;
+        padding: 1em 0;
+    }
+[% END %]
 </head>
 [% INCLUDE 'bodytag.inc' bodyid='opac-serials-issues' %]
 [% INCLUDE 'masthead.inc' %]
@@ -37,7 +42,7 @@
                         </div>
                         <form method="post" name="f">
                             [% FOREACH subscription_LOO IN subscription_LOOP %]
-                                <div id="subscriptionline[% subscription_LOO.subscriptionid | html %]" style="border-bottom:1px solid #EEE;">
+                                <div id="subscriptionline[% subscription_LOO.subscriptionid | html %]" class="subscriptionline">
                                     <h3>Subscription information for [% subscription_LOO.bibliotitle | html %]</h3>
                                     <p>
                                         The current subscription began on [% subscription_LOO.startdate | html %] and is issued
-- 
2.11.0