From dde8bd82acde83cc6cf58c11d2b5e6b068e3b444 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 7 Apr 2016 12:11:58 -0400 Subject: [PATCH] Bug 16220 - The view tabs on opac-detail.pl are not responsive MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit 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 Signed-off-by: Jonathan Druart Signed-off-by: Brendan Gallagher (cherry picked from commit 0fcbf1efe10a4269e3705dce10ef632e1739dbb1) Signed-off-by: Julian Maurice (cherry picked from commit c760866e237b758bd34d3a6cb6283592bf7c3416) Signed-off-by: Chris Cormack --- .../bootstrap/en/modules/opac-ISBDdetail.tt | 2 +- .../bootstrap/en/modules/opac-MARCdetail.tt | 2 +- .../bootstrap/en/modules/opac-detail.tt | 2 +- koha-tmpl/opac-tmpl/bootstrap/less/opac.less | 49 ++++++++----------- .../opac-tmpl/bootstrap/less/responsive.less | 37 ++++++++------ 5 files changed, 46 insertions(+), 46 deletions(-) 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 3c47566308..108b9bfba0 100644 --- 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 @@
- Normal view MARC view ISBD view
+ Normal view MARC view ISBD view
[% ISBD %]
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 4774ba872d..2848ade2d9 100644 --- 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 @@
Normal view - MARC view + MARC view [% IF ( ISBD ) %]ISBD view[% END %]

[% bibliotitle %] (Record no. [% biblionumber %])

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 6fb22d652b..14a41cf79d 100644 --- 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 %]
- Normal view + Normal view MARC view [% IF ( ISBD ) %]ISBD view[% END %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less index 7c79c7d61d..43c5092970 100644 --- 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 e3772b1ff1..6fc735856e 100644 --- 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 { -- 2.39.5