Bug 16220 - The view tabs on opac-detail.pl are not responsive

When looking at the detail page for a bibliographic record, there are
tabs linking to the "Normal," "MARC," and "ISBD" views. These tabs need
to be styled responsively so that they work well at all browser widths.

This patch makes some slight markup changes to the templates and updates
the LESS files to add responsive styling.

This patch does not include the compiled CSS file, so the follow-up is
required to test the visual changes.

Signed-off-by: Marc Véron <veron@veron.ch>

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

Signed-off-by: Brendan Gallagher <brendan@bywatersolutions.com>
(cherry picked from commit 0fcbf1efe10a4269e3705dce10ef632e1739dbb1)
Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>
(cherry picked from commit c760866e237b758bd34d3a6cb6283592bf7c3416)
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
index 3c47566..108b9bf 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
@@ -19,7 +19,7 @@
                     <div id="usermarcdetail">
                         <div id="catalogue_detail_biblio">
                             <div id="views">
-                                <span class="view"><a id="Normalview" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber %]">Normal view</a></span> <span class="view"><a id="MARCview" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber %]">MARC view</a></span> <span class="view"><span id="ISBDview">ISBD view</span></span></div>
+                                <span class="view"><a id="Normalview" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber %]">Normal view</a></span> <span class="view"><a id="MARCview" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber %]">MARC view</a></span> <span class="view current-view"><span id="ISBDview">ISBD view</span></span></div>
 
                                 <div id="isbdcontents">[% ISBD %]</div>
 

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
index 4774ba8..2848ade 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
@@ -21,7 +21,7 @@
 
                             <div id="views">
                                 <span class="view"><a id="Normalview" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber %]">Normal view</a></span>
-                                <span class="view"><span id="MARCview">MARC view</span></span>
+                                <span class="view current-view"><span id="MARCview">MARC view</span></span>
                                 [% IF ( ISBD ) %]<span class="view"><a id="ISBDview"  href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber %]">ISBD view</a></span>[% END %]
                             </div>
                             <h1 class="title">[% bibliotitle %] (Record no. [% biblionumber %])</h1>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
index 6fb22d6..14a41cf 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
@@ -107,7 +107,7 @@
                     [% END %]
 
                     <div id="views">
-                        <span class="view"><span id="Normalview">Normal view</span></span>
+                        <span class="view current-view"><span id="Normalview">Normal view</span></span>
                         <span class="view"><a id="MARCview" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber %]">MARC view</a></span>
                         [% IF ( ISBD ) %]<span class="view"><a id="ISBDview" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber %]">ISBD view</a></span>[% END %]
                     </div>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
index 7c79c7d..43c5092 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
+++ b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
@@ -1059,14 +1059,17 @@ div.rows {
 }
 
 #views {
-    border-bottom : 1px solid #D6D6D6;
     margin-bottom : .5em;
     padding : 0 2em 0.2em 0.2em;
-    white-space : nowrap;
 }
 
 .view {
-    padding : 0.2em .2em 2px .2em;
+    background-color : #F3F3F3;
+    border: 1px solid #C9C9C9;
+    border-radius: 4px;
+    display: inline-block;
+    padding: 0.2em 0.5em;
+    white-space: nowrap;
 }
 
 #bibliodescriptions,
@@ -1081,40 +1084,30 @@ div.rows {
         background-image: url("../images/sprite.png");
         background-repeat : no-repeat;
         font-size : 87%;
-        font-weight : normal;
-        padding: 0.4em 0.7em 5px 26px;
+        padding-left: 15px;
         text-decoration: none;
     }
 }
 
-span#MARCview,
-span#ISBDview,
-span#Normalview,
-span#Fullhistory,
-span#Briefhistory {
-    font-weight: bold;
+.view {
+    a {
+        font-weight : normal;
+    }
 }
 
-a#MARCview,
-span#MARCview {
-    background-position: -3px -23px;
-}
-a#MARCviewPop,
-span#MARCviewPop {
-    background-position: -3px -23px;
+.current-view {
+    background-color: #fff;
+    font-weight: bold;
 }
-a#ISBDview,
-span#ISBDview {
-    background-position: -3px -52px;
+
+#MARCview {
+    background-position: -9px -27px;
 }
-a#Normalview,
-span#Normalview {
-    background-position: -1px 6px;
+#ISBDview {
+    background-position: -10px -56px;
 }
-
-.view a {
-    background-color : #F3F3F3;
-    border-left : 1px solid #C9C9C9;
+#Normalview {
+    background-position: -8px 3px;
 }
 
 #bookcover {

diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less
index e3772b1..6fc7358 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less
+++ b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less
@@ -21,21 +21,6 @@
     .statictabs li a {
         padding: .1em .5em;
     }
-    #views {
-        border : 0;
-        padding : 0;
-        margin : 0;
-    }
-    .view {
-        padding : 0;
-        a,
-        span {
-            border : 1px solid #C9C9C9;
-            .border-radius-all(4px);
-            font-size : 80%;
-            padding : 0.3em 0.4em 4px 26px
-        }
-    }
     .input-fluid {
         width : 90%;
     }
@@ -283,6 +268,28 @@
     }
 }
 
+@media only screen and (min-width: 608px) {
+    #views {
+        border-bottom : 1px solid #D6D6D6;
+        margin: 0;
+        padding: 0;
+        white-space : nowrap;
+    }
+    .view {
+        border-radius: 0;
+        border-right-width: 0;
+        border-top-width: 0;
+        border-bottom-width: 0;
+    }
+
+    .current-view {
+        border: 0;
+        -webkit-box-shadow: none;
+        -moz-box-shadow:    none;
+        box-shadow:         none;
+    }
+}
+
 @media only screen and (min-width: 608px) and (max-width: 767px) {
     /* Screens between 608 and 767 pixels wide */
     #oh:after {