From debcf3f2d12d65ea7b29eaa0037b85f1245827df Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 20 Dec 2016 18:17:50 +0000
Subject: [PATCH] Bug 16239 [CSS Follow-up] Upgrade Bootstrap in the staff
 client

This followup tweaks some CSS and markup in order to correct conflicts
between default Bootstrap styles and the expected (previous) style of
the staff client. Included:

- Corrections to the widths of some modals.
- Corrections to the style of the <pre> tag, seen often in MARC preview
  modals.
- Corrections to the default active and hover states for dropdown menus.

To test, apply the patch and view various pages which use Bootstrap
modals, confirming that they look correct.

- Add order from staged file MARC preview
- Add order from external source MARC preview
- Cataloging record merge MARC preview
- Batch record modification MARC preview
- Authorities Z39.50 search MARC preview

Signed-off-by: Claire Gravely <claire_gravely@hotmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
---
 .../intranet-tmpl/prog/css/staff-global.css   | 84 +++++++++++++++----
 .../prog/en/modules/acqui/addorderiso2709.tt  |  2 +-
 .../prog/en/modules/acqui/edifactmsgs.tt      |  2 +-
 .../prog/en/modules/acqui/parcel.tt           |  2 +-
 .../prog/en/modules/acqui/z3950_search.tt     |  2 +-
 .../prog/en/modules/cataloguing/merge.tt      |  2 +-
 .../modules/cataloguing/z3950_auth_search.tt  |  2 +-
 .../tools/batch_record_modification.tt        | 24 +++---
 8 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index c2e05e30fd..41c9f9cffe 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -126,8 +126,10 @@ input[type="checkbox"], input[type="radio"] {
 }
 
 label, .label {
+    display: inline;
     font-weight: normal;
     font-size: inherit;
+    max-width: inherit;
     padding: 0;
     color: black;
     margin-bottom: 0;
@@ -1068,7 +1070,6 @@ div.first fieldset {
 }
 
 .dialog {
-	-moz-border-radius : 2px;
 	border-radius : 2px;
 	padding : .5em;
 	margin : 1em auto;
@@ -1307,9 +1308,7 @@ div#menu li a {
      background: -o-linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* IE10+ */
        background: linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* W3C */
-	-moz-border-top-left-radius: 5px;
 	border-top-left-radius: 5px;
-	-moz-border-bottom-left-radius: 5px;
 	border-bottom-left-radius: 5px;
     border:1px solid #b9d8d9;
 	font-size: 111%;
@@ -1614,7 +1613,6 @@ input[type=submit], input[type=reset], input[type=button], input.submit, button,
 	border: 1px outset #999999;
 	border-top-color: #666;
 	border-left-color: #666;
-	-moz-border-radius : 2px;
 	padding: 0.25em;
 	background: #ffffff; /* Old browsers */
 	background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 35%, #e0e0e0 100%); /* FF3.6+ */
@@ -1748,13 +1746,12 @@ span.permissiondesc {
 #marcPreview th { background-color : #FFF; border: 0; white-space: nowrap; text-align:left; vertical-align: top; padding: 2px; }
 #marcPreview td { border: 0; padding : 2px; vertical-align: top; }
 #marcPreview tbody tr:nth-child(2n+1) td { background-color: #FFF; }
+#marcPreview .modal-dialog { width: 80%; }
 @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
 
 #cartDetails {
 	background-color : #FFF;
 	border: 1px solid #739acf;
-	 -moz-box-shadow: 1px 1px 3px 0 #666;
-	 -webkit-box-shadow: 1px 1px 3px 0 #666;
 	 box-shadow: 1px 1px 3px 0 #666;
 	color : black;
 	display : none;
@@ -1815,7 +1812,6 @@ ul.budget_hierarchy li:first-child:after {
 	border : 1px solid #a4bedd;
 	background-color : #e4ecf5;
 	font-weight : bold;
-	-moz-border-radius: 4px;
 	border-radius: 4px;
 	padding : .1em .4em;
 	text-decoration : none;
@@ -1918,7 +1914,6 @@ fieldset.rows+h3 {clear:both;padding-top:.5em;}
 
 #clearscreen a {
     display:block;
-    -moz-border-radius: 0 0 0 5px;
     border-radius: 0 0 0 5px;
     padding : 0 .7em .2em .7em;
     background-color : #EEE;
@@ -1935,7 +1930,6 @@ fieldset.rows+h3 {clear:both;padding-top:.5em;}
 div.pager {
 	background-color : #E8E8E8;
 	border : 1px solid #BCBCBC;
-	-moz-border-radius : 5px;
     border-radius : 5px;
 	display : inline-block;
 	font-size : 85%;
@@ -2022,8 +2016,6 @@ div#acqui_order_supplierlist > div.supplier > div.baskets {
 .ui-autocomplete {
     position: absolute;
     cursor: default;
-    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
-    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.3);
     box-shadow: 2px 2px 2px rgba(0,0,0,.3);
 }
 .ui-autocomplete.ui-widget-content .ui-state-hover {
@@ -2306,6 +2298,7 @@ div.authorizedheading {
     margin: 0 1em 1em 0;
 }
 .pluginname {
+    cursor: move;
     margin: 0.3em;
     padding-bottom: 4px;
     padding-left: 0.2em;
@@ -2348,8 +2341,6 @@ div.authorizedheading {
     margin : 0 3px;
 }
 .ui-datepicker {
-    -moz-box-shadow: 1px 1px 3px 0 #666;
-    -webkit-box-shadow: 1px 1px 3px 0 #666;
     box-shadow: 1px 1px 3px 0 #666;
 }
 
@@ -2395,6 +2386,11 @@ button,
     font-family: arial,helvetica,clean,sans-serif;
 }
 
+.btn-xs, .btn-group-xs > .btn {
+    font-size: 10.5px;
+    padding: 3px 5px;
+}
+
 .btn.btn-link {
     border : 0;
 }
@@ -2412,13 +2408,32 @@ a.btn-link:hover {
     color : #538200;
 }
 
+.dropdown-menu {
+    font-size: 12px;
+}
+
 .dropdown-menu li {
     list-style: none outside none;
 }
+
 a.dropdown-toggle {
     white-space: nowrap;
 }
 
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+    text-decoration: none;
+    color: #ffffff;
+    background-color: #0081c2;
+    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+}
+
 a.disabled {
     color : #999999;
 }
@@ -2540,6 +2555,7 @@ a.disabled {
     float : none;
     font-size: inherit;
     font-weight: normal;
+    line-height: 1.5;
     opacity: inherit;
     text-shadow: none;
 }
@@ -2555,13 +2571,28 @@ a.close:hover {
     color: #538200;
 }
 
+.radio label, .checkbox label {
+    margin-left: 20px;
+    padding-left: 0;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+    position: relative;
+    margin-left: 0;
+}
+
 /* Redefine a new style for Bootstrap's class "close" since we use that already */
 /* Use <a class="closebtn" href="#">&times;</a> */
 .alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
-.modal-header .closebtn{margin-top:-2px;}
+.modal-header .closebtn{margin-top: 4px;}
 .closebtn{float: right;font-size: 21px;font-weight: bold;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;filter: alpha(opacity=20);opacity: .2;}.closebtn:hover,.closebtn:focus{color:#000;text-decoration:none;cursor:pointer;opacity:0.5;filter:alpha(opacity=50);}
 button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
 
+.modal-body {
+    overflow-y: auto;
+}
+
 .btn-group label,
 .btn-group select {
     font-size: 13px;
@@ -2571,6 +2602,28 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit
     white-space:pre-wrap;
 }
 
+pre {
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+}
+
+code {
+    background-color: transparent;
+    border-radius: 0;
+    font-size: inherit;
+    color: inherit;
+    padding: 0;
+}
+
 /* End Bootstrap overrides */
 
 .waiting {
@@ -2606,7 +2659,7 @@ progress {
 }
 
 #selections { width : 100%; white-space : normal; }
-#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
+#selections span { margin:3px;padding:3px;background-color:#EBF3FF;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
 #selections span.selected { background-color : #CCE0FC; }
 #selections input { vertical-align:middle;margin:0 2px; }
 
@@ -2620,7 +2673,6 @@ progress {
 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
 
 .floating {
-    -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, .5);
     box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, .5);
 }
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/addorderiso2709.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/addorderiso2709.tt
index 05ef57d2ed..aab8a4a167 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/addorderiso2709.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/addorderiso2709.tt
@@ -8,7 +8,7 @@
 [% END %]
 </title>
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
-<style type="text/css">#dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }</style>
+<style type="text/css">#dataPreview { width : 80%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }</style>
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'datatables.inc' %]
 <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edifactmsgs.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edifactmsgs.tt
index fae4d0144a..80affbee80 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edifactmsgs.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/edifactmsgs.tt
@@ -37,7 +37,7 @@ $(document).ready(function() {
 });
 </script>
 <style type="text/css">
-#EDI_modal { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #EDI_modal { margin: 0; width : auto; } }
+#EDI_modal { width : 80%; } @media (max-width: 767px) { #EDI_modal { margin: 0; width : auto; } }
 </style>
 </head>
 <body id="acq_edifactmsgs" class="acq">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/parcel.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/parcel.tt
index b0a15bf146..82bca90301 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/parcel.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/parcel.tt
@@ -10,7 +10,7 @@
 [% INCLUDE 'datatables.inc' %]
 <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.dataTables.columnFilter.js"></script>
 <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.cookie.min.js"></script>
-<style type="text/css">#dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }</style>
+<style type="text/css">#dataPreview { width : 80%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }</style>
 <script type="text/javascript">
 //<![CDATA[
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
index d6a9f103e3..8d54bf7755 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/z3950_search.tt
@@ -44,7 +44,7 @@
 .linktools { background-color:#FFF;border-top:1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #666; border-bottom:1px solid #666;display: none; white-space: nowrap;}
 .linktools a { font-size : 85%; text-decoration:none; padding:.3em;;background-color:#FFF; display:block;float:left;border-right:1px solid #DDD;}
 .linktools a:hover { background-color:#EEE;color:#CC3300;border-right:1px solid #CCC;}
-tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent !important; } #dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
+tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent !important; } #dataPreview { width : 80%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
 </style>
 </head>
 <body id="acq_z3950_search" class="acq">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
index e4c8809acc..464d763e34 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt
@@ -9,7 +9,7 @@
 div.record ul, div.record li { float:none; display:block; }
 div#result { margin-top: 1em; }
 /* We use this style "against" the li ui-tabs-nav style automatically applied */
-#dataPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
+#dataPreview { width : 80%; } @media (max-width: 767px) { #dataPreview { margin: 0; width : auto; } }
 </style>
 <script type="text/javascript">
 //<![CDATA[
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_auth_search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_auth_search.tt
index f7a440db25..066df230e1 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_auth_search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/z3950_auth_search.tt
@@ -44,7 +44,7 @@ $(document).ready(function(){
 .linktools { background-color:#FFF;border-top:1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #666; border-bottom:1px solid #666;display: none; white-space: nowrap;}
 .linktools a { font-size : 85%; text-decoration:none; padding:.3em;;background-color:#FFF; display:block;float:left;border-right:1px solid #DDD;}
 .linktools a:hover { background-color:#EEE;color:#CC3300;border-right:1px solid #CCC;}
-tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent; } #marcPreview { width : 90%; margin-left : -45%; top: 5%; } .modal-body { max-height: 380px; } .modal-header { padding: 0 14px; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
+tr.selected { background-color : #FFFFCC; } tr.selected td { background-color : transparent; } #marcPreview { width : 90%; top: 5%; } .modal-body { max-height: 380px; } .modal-header { padding: 0 14px; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
 </style>
 
     [% IF ( opsearch ) %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
index 6cdd30cd3f..32034a5428 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
@@ -187,18 +187,18 @@ $(document).ready(function() {
         </select>
         <div id="marcPreview" class="modal" tabindex="-1" role="dialog" aria-labelledby="marcPreviewLabel" aria-hidden="true">
             <div class="modal-dialog">
-            <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
-                <h3 id="marcPreviewLabel">MARC preview</h3>
-            </div>
-            <div class="modal-body">
-                <div id="loading"> <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /> Loading </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
-            </div>
-            </div>
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 id="marcPreviewLabel">MARC preview</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div id="loading"> <img src="[% interface %]/[% theme %]/img/loading-small.gif" alt="" /> Loading </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+                    </div>
+                </div>
             </div>
         </div>
         [% IF recordtype == 'biblio' %]
-- 
2.39.5