From f1ac82b0b92935839e1a5434d836c506fce80238 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. --- 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 @@ [% Asset.css("css/addbiblio.css") | $raw %] - @@ -790,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 -- 2.11.0