Bug 20044: (follow-up) Improve responsive behavior of MARC editor

This patch makes some changes to addbiblio.css in order to improve
responsive changes to the MARC editor.

Note: This patch does not make changes affecting narrow browser widths.
The changes are focused on adapting to larger layouts affected by the
switch to the Bootstrap grid.

To test, apply the patch and clear your cache if necessary. Open an
existing record for editing in the standard MARC editor. View the page
at various browser widths and confirm that it looks correct.

Note: Because of the way the floating toolbar is displayed it does not
dynamically resize when you resize the browser. Reload the page after
resizing the browser window to confirm that the toolbar adapts at
different widths.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
index f49eb61..01f975c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -4,6 +4,7 @@
 
 #addbibliotabs .ui-tabs-panel {
        float : left;
+    width: 100%;
 }
 
 .buttonPlus {
@@ -75,7 +76,6 @@ a.tagnum {
 
 .subfield {
        color : #00698a;
-       float: left;
        width: 10em;
        text-align:right;
 }
@@ -91,7 +91,7 @@ a.tagnum {
 
 .input_marceditor {
        float:left;
-       width:30em;
+    width: auto;
 }
 
 .indicator {
@@ -169,3 +169,32 @@ tbody tr.active td {
     top: 50%;
     width: 15em;
 }
+
+
+@media (min-width: 768px) {
+    div.subfield_line label {
+        width: 20em;
+    }
+
+    input.marceditor {
+        width: 50em;
+    }
+
+    .subfield {
+        width: 14em;
+    }
+}
+
+@media (min-width: 1200px) {
+    div.subfield_line label {
+        width: 25em;
+    }
+
+    input.marceditor {
+        width: 60em;
+    }
+
+    .subfield {
+        width: 16em;
+    }
+}
\ No newline at end of file