Bugzilla – Attachment 109855 Details for
Bug 22399
Improve responsive behavior of the basic marc editor
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 22399: Improve responsive behavior of the basic marc editor
Bug-22399-Improve-responsive-behavior-of-the-basic.patch (text/plain), 27.42 KB, created by
Owen Leonard
on 2020-09-10 17:50:46 UTC
(
hide
)
Description:
Bug 22399: Improve responsive behavior of the basic marc editor
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2020-09-10 17:50:46 UTC
Size:
27.42 KB
patch
obsolete
>From f1ac82b0b92935839e1a5434d836c506fce80238 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Tue, 14 Jul 2020 18:46:19 +0000 >Subject: [PATCH] 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 >flexbox styling to elements of 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. >- Test that the markup changes haven't broken the JavaScript-driven > features in the editor: > - Clone tags > - Delete tags > - Expand and collapse tags > - Clone subfields > - Delete subfields > - Re-order subfields > - Cataloging plugins: > - Focus-driven plugins like on tag 000 > - Popup plugins like 008 or authority-linked tags > - Select2-styled dropdowns (e.g. 942$c Item type). >- Test the add/edit items form to confirm that it is still styled as it > was before. >--- > koha-tmpl/intranet-tmpl/prog/css/addbiblio.css | 60 +++++++--- > .../prog/en/modules/cataloguing/addbiblio.tt | 133 +++++++++++---------- > koha-tmpl/intranet-tmpl/prog/js/cataloging.js | 70 +++++------ > 3 files changed, 149 insertions(+), 114 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >index 1b642eced3..9775f1196a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >@@ -109,8 +109,8 @@ li.subfield_line { > li.subfield_line label { > font-size:89%; > float: left; >- padding-right : .4em; >- width: 16em; >+ padding-right: .4em; >+ width: 10em; > text-align: left; > clear:left; > } >@@ -151,12 +151,30 @@ a.tagnum { > } > > .subfieldcode { >- display: block; >- float: left; >+ display: block; >+ float: left; > } > > .labelsubfield { >- float:left; >+ float: left; >+} >+ >+#cat_addbiblio .subfieldcode { >+ float: none; >+} >+ >+#cat_addbiblio .labelsubfield { >+ font-size: 90%; >+ float: none; >+} >+ >+#cat_addbiblio .subfield { >+ float: none; >+ padding: .25em .5em; >+} >+ >+#cat_addbiblio .subfield label { >+ color: #00698a; > } > > .input_marceditor { >@@ -164,6 +182,24 @@ a.tagnum { > width:30em; > } > >+#cat_addbiblio .input_marceditor { >+ float: none; >+ width: 100%; >+} >+ >+#cat_addbiblio .subfield_line { >+ display: flex; >+} >+ >+#cat_addbiblio .field_marceditor { >+ flex-grow: 1; >+ padding: .25em .5em; >+} >+ >+#cat_addbiblio .subfield_loop_mandatory { >+ padding: .25em .5em; >+} >+ > .indicator { > width: 1em; > box-sizing: content-box; >@@ -177,12 +213,13 @@ a.tagnum { > #cataloguing_additem_newitem fieldset.rows li { > padding-bottom : 3px; > } >+ > #cataloguing_additem_newitem .input_marceditor { >- width : auto; >+ width: auto; > } > > #cataloguing_additem_newitem textarea.input_marceditor { >- width : 31em; >+ width: 31em; > } > > .mandatory_marker { >@@ -193,18 +230,11 @@ a.tagnum { > .linktools a {margin:0 2px;padding:2px;background-color:#FFF;text-align:center; } > .linktools a:first-child { border-bottom: 1px solid #DDD; } > .linktools a:hover { background-color: #FFC; } >-.subfield_controls { margin : 0 .5em; } >+.subfield_controls { margin: 0 .5em; } > > #cataloguing_additem_itemlist { > margin-bottom : 1em; > } >-.yui-gf div.first { >- width : 19%; >-} >- >-.yui-gf .yui-u { >- width: 79.2%; >-} > > tbody tr.active:nth-child(2n+1) td, > tbody tr.active td { >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 70dbd7e5a9..94aea60e07 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt >@@ -485,7 +485,6 @@ > > </script> > [% Asset.css("css/addbiblio.css") | $raw %] >- > </head> > <body id="cat_addbiblio" class="cat"> > >@@ -790,89 +789,93 @@ > [% FOREACH subfield_loo IN innerloo.subfield_loop %] > <!-- One line on the marc editor --> > <li class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]"> >+ <div class="subfieldcode"> >+ <input type="text" >+ title="[% subfield_loo.marc_lib | $raw %]" >+ style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;" >+ name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" >+ value="[% subfield_loo.subfield | html %]" >+ size="1" >+ maxlength="1" >+ class="flat" >+ tabindex="0" /> >+ </div> > [% UNLESS advancedMARCEditor %] >- [% 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"> >+ [% IF ( subfield_loo.mandatory ) %] >+ <div class="subfield subfield_mandatory"> >+ [% ELSIF ( subfield_loo.important ) %] >+ <div class="subfield subfield_important"> > [% ELSE %] >- <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield"> >+ <div class="subfield"> > [% END %] >- [% END %] >- >- <span class="subfieldcode"> >- <input type="text" >- title="[% subfield_loo.marc_lib | $raw %]" >- style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;" >- name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" >- value="[% subfield_loo.subfield | html %]" >- size="1" >- maxlength="1" >- class="flat" >- tabindex="0" /> >- </span> >- >- [% UNLESS advancedMARCEditor %] >- [% IF ( subfield_loo.mandatory ) %] >- <span class="subfield subfield_mandatory"> >- [% ELSIF ( subfield_loo.important ) %] >- <span class="subfield subfield_important"> >+ [% 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 %] >- <span class="subfield"> >+ <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield"> > [% END %] > [% subfield_loo.marc_lib | $raw %] >- </span> >- </label> >+ </label> >+ </div> > [% END %] > > [% 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" /> >- [% 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 -%]" /> >- [% 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 -%]" /> >- <span class="subfield_controls"> >- [% IF mv.noclick %] >- <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span> >+ <div id="field_marceditor[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]" class="field_marceditor"> >+ [% 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" /> > [% ELSE %] >- [% IF mv.plugin == "upload.pl" %] >- <a href="#" id="buttonDot_[% mv.id | html %]" class="tag_editor upload framework_plugin" tabindex="1"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a> >- [% ELSE %] >- <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a> >- [% END %] >+ <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 -%]" /> > [% END %] >- </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 -%]" /> >- [% 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' ) %] >+ >+ [% 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 -%]" /> >+ [% 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 -%]" /> >+ [% 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' ) %] > [% IF mv.category AND CAN_user_parameters_manage_auth_values %] > <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]" data-category="[% mv.category | html %]"> > [% ELSE %] > <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor select2" id="[%- mv.id | html -%]"> > [% END %] >- [% FOREACH aval IN mv.values %] >- [% IF aval == mv.default %] >- <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option> >- [% ELSE %] >- <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option> >+ [% FOREACH aval IN mv.values %] >+ [% IF aval == mv.default %] >+ <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option> >+ [% ELSE %] >+ <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option> >+ [% END %] > [% END %] >- [% END %] >- </select> >- [% END # /IF (mv.type...) %] >+ </select> >+ [% END # /IF (mv.type...) %] >+ </div> > [% IF ( subfield_loo.mandatory ) %] >- <span class="required">Required</span> >+ <div class="subfield_loop_mandatory"> >+ <span class="required">Required</span> >+ </div> > [% ELSIF ( subfield_loo.important ) %] >- <span class="important">Important</span> >+ <div class="subfield_loop_mandatory"> >+ <span class="important">Important</span> >+ </div> > [% END %] >- <span class="subfield_controls"> >+ <div class="subfield_controls"> >+ [% IF ( mv.type == 'text' ) %] >+ [% IF ( mv.authtype ) %] >+ <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> >+ [% END %] >+ [% ELSIF ( mv.type == 'text_complex' ) %] >+ [% IF mv.noclick %] >+ <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span> >+ [% ELSE %] >+ [% IF mv.plugin == "upload.pl" %] >+ <a href="#" id="buttonDot_[% mv.id | html %]" class="tag_editor upload framework_plugin" tabindex="1"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a> >+ [% ELSE %] >+ <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a> >+ [% END %] >+ [% END %] >+ </span> >+ [% END %] > [% IF ( subfield_loo.repeatable ) %] > <a href="#" class="buttonPlus" tabindex="1" onclick="CloneSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]','[% advancedMARCEditor | html %]'); return false;"> > <img src="[% interface | html %]/[% theme | html %]/img/clone-subfield.png" alt="Clone" title="Clone this subfield" /> >@@ -881,7 +884,7 @@ > <img src="[% interface | html %]/[% theme | html %]/img/delete-subfield.png" alt="Delete" title="Delete this subfield" /> > </a> > [% END %] >- </span> >+ </div> > </li> <!-- /.subfield_line --> > <!-- End of the line --> > [% END # /FOREACH subfield_loop %] >diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js >index 417a78ec6d..6cfccd2539 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js >@@ -65,10 +65,10 @@ function ExpandField(index) { > if(lis[i].getAttribute('id').match(/^subfield/)){ // if it s a subfield > if (!lis[i].style.display) { > // first time => show all subfields >- lis[i].style.display = 'block'; >+ lis[i].style.display = 'flex'; > } else if (lis[i].style.display == 'none') { > // show >- lis[i].style.display = 'block'; >+ lis[i].style.display = 'flex'; > } else { > // hide > lis[i].style.display = 'none'; >@@ -174,7 +174,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) { > // settings all subfields > var divslen = divs.length; > for( i=0; i < divslen ; i++ ){ // foreach div/li >- if(divs[i].getAttribute("id").match(/^subfield/)){ // if it s a subfield >+ if( divs[i].getAttribute("id") && divs[i].getAttribute("id").match(/^subfield/)){ // if it s a subfield > > // set the attribute for the new 'li' subfields > divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key); >@@ -195,38 +195,38 @@ function CloneField(index, hideMarc, advancedMARCEditor) { > textareas[j].value = ""; > } > } >+ if( inputs.length > 0 ){ >+ inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key); >+ inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key); > >- inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key); >- inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key); >- >- try { >- id_input = inputs[1].getAttribute('id')+new_key; >- inputs[1].setAttribute('id',id_input); >- inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key); >- } catch(e) { >- try{ // it s a select if it is not an input >- var selects = divs[i].getElementsByTagName('select'); >- id_input = selects[0].getAttribute('id')+new_key; >- selects[0].setAttribute('id',id_input); >- selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key); >- }catch(e2){ // it is a textarea if it s not a select or an input >- var textaeras = divs[i].getElementsByTagName('textarea'); >- id_input = textaeras[0].getAttribute('id')+new_key; >- textaeras[0].setAttribute('id',id_input); >- textaeras[0].setAttribute('name',textaeras[0].getAttribute('name')+new_key); >+ try { >+ id_input = inputs[1].getAttribute('id')+new_key; >+ inputs[1].setAttribute('id',id_input); >+ inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key); >+ } catch(e) { >+ try{ // it s a select if it is not an input >+ var selects = divs[i].getElementsByTagName('select'); >+ id_input = selects[0].getAttribute('id')+new_key; >+ selects[0].setAttribute('id',id_input); >+ selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key); >+ }catch(e2){ // it is a textarea if it s not a select or an input >+ var textareas = divs[i].getElementsByTagName('textarea'); >+ if( textareas.length > 0 ){ >+ id_input = textareas[0].getAttribute('id')+new_key; >+ textareas[0].setAttribute('id',id_input); >+ textareas[0].setAttribute('name',textareas[0].getAttribute('name')+new_key); >+ } >+ } >+ } >+ if( $(inputs[1]).hasClass('framework_plugin') ) { >+ olddiv= original.getElementsByTagName('li')[i]; >+ oldcontrol= olddiv.getElementsByTagName('input')[1]; >+ AddEventHandlers( oldcontrol,inputs[1],id_input ); > } > } >- if( $(inputs[1]).hasClass('framework_plugin') ) { >- olddiv= original.getElementsByTagName('li')[i]; >- oldcontrol= olddiv.getElementsByTagName('input')[1]; >- AddEventHandlers( oldcontrol,inputs[1],id_input ); >- } >- >- if (advancedMARCEditor == '0') { >- // when cloning a subfield, re set its label too. >- var labels = divs[i].getElementsByTagName('label'); >- labels[0].setAttribute('for',id_input); >- } >+ // when cloning a subfield, re set its label too. >+ var labels = divs[i].getElementsByTagName('label'); >+ labels[0].setAttribute('for', id_input); > > // setting its '+' and '-' buttons > try { >@@ -277,7 +277,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) { > } > > } else { // it's a indicator div >- if(divs[i].getAttribute('id').match(/^div_indicator/)){ >+ if ( divs[i].getAttribute("id") && divs[i].getAttribute('id').match(/^div_indicator/)) { > > // setting a new id for the indicator div > divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key); >@@ -381,7 +381,9 @@ function CloneSubfield(index, advancedMARCEditor){ > if(advancedMARCEditor == '0') { > // when cloning a subfield, reset its label too. > var label = clone.getElementsByTagName('label')[0]; >- label.setAttribute('for',id_input); >+ if( label ){ >+ label.setAttribute('for',id_input); >+ } > } > > // setting a new id for the parent div >-- >2.11.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 22399
:
85569
|
85570
|
85572
|
85621
|
85666
|
106877
|
106878
|
109855
|
112045
|
112390
|
112446