From 4245fd0f3ce6a9e410dfb9d65254f0c773242a54 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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. Edit: The Select2 plugin JavaScript file now accepts a variable to set the "width" configuration option. It still defaults to "element." --- koha-tmpl/intranet-tmpl/prog/css/addbiblio.css | 60 ++++-- .../authorities/blinddetail-biblio-search.tt | 214 ++++++++++----------- .../prog/en/modules/cataloguing/addbiblio.tt | 134 ++++++------- koha-tmpl/intranet-tmpl/prog/js/cataloging.js | 70 +++---- koha-tmpl/intranet-tmpl/prog/js/select2.js | 2 +- 5 files changed, 258 insertions(+), 222 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css index baf3f2138d..1344360d21 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/authorities/blinddetail-biblio-search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt index 083eda7c18..16360262f5 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt @@ -20,129 +20,129 @@ [% INCLUDE 'select2.inc' %] [% Asset.js("js/cataloging.js") | $raw %] @@ -484,7 +485,6 @@ [% Asset.css("css/addbiblio.css") | $raw %] - @@ -789,89 +789,93 @@ [% FOREACH subfield_loo IN innerloo.subfield_loop %]
  • +
    + +
    [% UNLESS advancedMARCEditor %] - [% IF ( subfield_loo.fixedfield ) %] -
    • [% 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 diff --git a/koha-tmpl/intranet-tmpl/prog/js/select2.js b/koha-tmpl/intranet-tmpl/prog/js/select2.js index 5ae8085c03..a5c07fe12a 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/select2.js +++ b/koha-tmpl/intranet-tmpl/prog/js/select2.js @@ -1,7 +1,7 @@ /* global __ */ $.fn.select2.defaults.set("allowClear", true); $.fn.select2.defaults.set("placeholder", ""); -$.fn.select2.defaults.set("width", "element"); +$.fn.select2.defaults.set("width", select2Width || "element" ); // Internationalization $.fn.select2.defaults.set("language", { -- 2.11.0