From 49e642f02034a6263d0610623816e75b7ee11e00 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 | 59 ++++++--- .../prog/en/modules/cataloguing/addbiblio.tt | 132 +++++++++++---------- koha-tmpl/intranet-tmpl/prog/js/cataloging.js | 74 ++++++------ 3 files changed, 153 insertions(+), 112 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css index 1b642eced3..df2ab3cf54 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,29 @@ 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%; +} + +#cat_addbiblio .subfield { + float: none; + padding: .25em .5em; +} + +#cat_addbiblio .subfield label { + color: #00698a; } .input_marceditor { @@ -164,6 +181,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 +212,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 +229,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 66d253e363..3497d570b1 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt @@ -479,7 +479,9 @@ [% INCLUDE 'select2.inc' %] @@ -787,81 +789,87 @@ [% 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 c74d953979..a74177ebc4 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'; @@ -91,7 +91,9 @@ var Select2Utils = { if ($.fn.select2) { var selects = element.getElementsByTagName('select'); for (var i=0; i < selects.length; i++) { - $(selects[i]).select2(); + $(selects[i]).select2({ + width: "100%" + }); } } } @@ -124,7 +126,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); @@ -145,38 +147,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 { @@ -227,7 +229,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); @@ -331,7 +333,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