Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
Bootstrap grid markup to the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor. Adjust your browser width and confirm that the form adjusts well
to various widths.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
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 03dd04b..15169af 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -40,24 +40,21 @@ a.expandfield {
 
 .tag {
     border-bottom: 2px solid #D5E6E9;
-    clear: both;
     padding: .7em 0;
 }
 
+.tag .row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 div.subfield_line {
     padding-bottom: .3em;
-    float: left;
-    clear: left;
-    width: 100%;
 }
 
 div.subfield_line label {
     font-size:89%;
-    float: left;
-        padding-right : .4em;
-    width: 16em;
     text-align: left;
-    clear:left;
 }
 
 .subfieldcode img {
@@ -86,23 +83,12 @@ a.tagnum {
 
 .subfield {
        color : #00698a;
-       float: left;
-       width: 10em;
        text-align:right;
 }
 
-.subfieldcode {
-       display: block;
-       float: left;
-}
-
-.labelsubfield {
-       float:left;
-}
-
 .input_marceditor {
-       float:left;
-       width:30em;
+    float:left;
+    width: 70%;
 }
 
 .indicator {
@@ -263,29 +249,9 @@ tbody tr.active td {
 }
 
 @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;
-    }
 }

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
index b62328d..4ce6d61 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
@@ -422,7 +422,9 @@ function Changefwk() {
 [% INCLUDE 'select2.inc' %]
 <script>
   $(document).ready(function() {
-    $('.subfield_line select').select2();
+    $('.subfield_line select').select2({
+        width: "70%"
+    });
   });
 </script>
 
@@ -630,8 +632,9 @@ function Changefwk() {
     [% END %]
     [% FOREACH innerloo IN BIG_LOO.innerloop %]
     [% IF ( innerloo.tag ) %]
-    <div class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
-        <div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+    <div class="tag" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+        <div class="row">
+        <div class="tag_title col-sm-12" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
             [% IF advancedMARCEditor %]
                 <a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to Expand this Tag" onclick="ExpandField('tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]'); return false;">[% innerloo.tag | html %]</a>
             [% ELSE %]
@@ -686,18 +689,22 @@ function Changefwk() {
                     </a>
                 </span>
 
-        </div>
-
+        </div> <!-- /.tag_title col-sm-12 -->
+        </div> <!-- /.row -->
         [% FOREACH subfield_loo IN innerloo.subfield_loop %]
             <!--  One line on the marc editor -->
+            <div class="row">
             <div class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
 
-                [% UNLESS advancedMARCEditor %]
+                <div class="col-sm-4">
+                [% UNLESS advasmedMARCEditor %]
                     [% IF ( subfield_loo.fixedfield ) %]<label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
                     [% ELSE %]<label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
                     [% END %]
                 [% END %]
 
+                    </label>
+
                 <span class="subfieldcode">
                     [% IF ( subfield_loo.fixedfield ) %]
                         <img class="buttonUp" style="display:none;" src="[% interface | html %]/[% theme | html %]/img/up.png" onclick="upSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]')" alt="Move Up" title="Move Up" />
@@ -720,21 +727,21 @@ function Changefwk() {
                         [% subfield_loo.marc_lib | $raw %]
                         [% IF ( subfield_loo.mandatory ) %]<span class="mandatory_marker" title="This field is mandatory">*</span>[% END %]
                     </span>
-                    </label>
                 [% END %]
-                
+                </div> <!-- /.col-sm-4 -->
+                <div class="col-sm-8">
                 [% SET mv = subfield_loo.marc_value %]
                 [% IF ( mv.type == 'text' ) %]
                     [% IF ( mv.readonly == 1 ) %]
-                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
+                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
                     [% ELSE %]
-                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
+                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" maxlength="[%- mv.maxlength | html -%]" />
                     [% END %]
                     [% IF ( mv.authtype ) %]
                     <span class="subfield_controls"><a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a></span>
                     [% END %]
                 [% ELSIF ( mv.type == 'text_complex' ) %]
-                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
+                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" maxlength="[%- mv.maxlength | html -%]" />
                     <span class="subfield_controls">
                         [% IF mv.noclick %]
                             <a href="#" class="buttonDot tag_editor disabled" tabindex="-1" title="No popup"></a>
@@ -744,7 +751,7 @@ function Changefwk() {
                     </span>
                     [% mv.javascript | $raw %]
                 [% ELSIF ( mv.type == 'hidden' ) %]
-                    <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
+                    <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
                 [% ELSIF ( mv.type == 'textarea' ) %]
                     <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
                 [% ELSIF ( mv.type == 'select' ) %]
@@ -769,12 +776,13 @@ function Changefwk() {
                     </a>
                 [% END %]
                 </span>
-                
-            </div>
+                </div> <!-- /.col-sm-8 -->
+            </div> <!-- /.subfield_line -->
+            </div> <!-- /.row -->
             <!-- End of the line -->
         [% END %]
 
-    </div>
+    </div> <!-- /.tag -->
     [% END %]<!-- if innerloo.tag -->
     [% END %]<!-- BIG_LOO.innerloop -->
     </div>