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.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index cf255ff..ea5a396 100644 (file)
--- 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 42d63dd..b4f5aa5 100644 (file)
--- 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 4be2764..27d5e1f 100644 (file)
--- 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