From 60b314622ec9527c4f53ef1b2137db56eacee35c Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 14 Jul 2020 12:35:57 +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). --- koha-tmpl/intranet-tmpl/prog/css/addbiblio.css | 137 ++++++++------------- .../prog/en/modules/cataloguing/addbiblio.tt | 132 ++++++++++---------- koha-tmpl/intranet-tmpl/prog/js/cataloging.js | 74 +++++------ 3 files changed, 162 insertions(+), 181 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css index 1b642eced3..5897f75e3c 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css +++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css @@ -71,26 +71,26 @@ ul li.tag li.subfield_line.ui-sortable-helper::before { } .buttonPlus { - font-weight : bold; - text-decoration : none; + font-weight: bold; + text-decoration: none; } .buttonMinus { - font-weight : bold; - text-decoration : none; + font-weight: bold; + text-decoration: none; } a.expandfield { - text-decoration : none; + text-decoration: none; } #authoritytabs { - margin-top : 1em; - margin-bottom : 1em; + margin-top: 1em; + margin-bottom: 1em; } .toptabs .ui-tabs-nav li a { - padding : .2em 1.2em; + padding: .2em 1.2em; } .tag { @@ -101,18 +101,7 @@ a.expandfield { li.subfield_line { padding-bottom: .3em; - float: left; - clear: left; - width: 100%; -} -li.subfield_line label { - font-size:89%; - float: left; - padding-right : .4em; - width: 16em; - text-align: left; - clear:left; } .subfieldcode img { @@ -120,48 +109,45 @@ li.subfield_line label { } .tag_title { - font-size : 90%; - padding : .2em 0; + font-size: 90%; + padding: .2em 0; } .tagnum { - font-size : 130%; - font-weight : bold; - color : #000; - padding : .1em .3em .1em 0; + font-size: 130%; + font-weight: bold; + color: #000; + padding: .1em .3em .1em 0; } a.tagnum { - font-size : 110%; - font-weight : bold; - color : #000; - padding : .1em .3em .1em 0; - text-decoration : none; + font-size: 110%; + font-weight: bold; + color: #000; + padding: .1em .3em .1em 0; + text-decoration: none; } .subfield { - color : #00698a; - float: left; - width: 10em; - text-align:right; + padding: .25em .5em; + text-align:right; + width: 10em; } -.subfield.subfield_mandatory { - color: #C00; +.subfield label { + color: #00698a; } -.subfieldcode { - display: block; - float: left; +.subfield.subfield_mandatory { + color: #C00; } .labelsubfield { - float:left; + font-size: 90%; } .input_marceditor { - float:left; - width:30em; + width: 100%; } .indicator { @@ -170,40 +156,30 @@ a.tagnum { } #cataloguing_additem_newitem fieldset.rows label, #cataloguing_additem_newitem fieldset.rows span.label { - font-size : 100%; - width : 25%; -} + font-size: 100%; -#cataloguing_additem_newitem fieldset.rows li { - padding-bottom : 3px; -} -#cataloguing_additem_newitem .input_marceditor { - width : auto; } -#cataloguing_additem_newitem textarea.input_marceditor { - width : 31em; +#cataloguing_additem_newitem fieldset.rows li { + padding-bottom: 3px; } .mandatory_marker { color: red; } .linktools { display: block; white-space: nowrap; } -.linktools a { font-size : 75%; display:block;text-decoration:none;} +.linktools a { font-size: 75%; display:block;text-decoration:none;} .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; } -#cataloguing_additem_itemlist { - margin-bottom : 1em; -} -.yui-gf div.first { - width : 19%; +.subfield_controls { + margin: 0 .5em; + min-width: 3em; } -.yui-gf .yui-u { - width: 79.2%; +#cataloguing_additem_itemlist { + margin-bottom: 1em; } tbody tr.active:nth-child(2n+1) td, @@ -223,13 +199,13 @@ tbody tr.active td { z-index: 1000; } #loading div { - background : transparent url(../img/loading.gif) top left no-repeat; - font-size : 175%; + background: transparent url(../img/loading.gif) top left no-repeat; + font-size: 175%; font-weight: bold; height: 2em; left: 50%; margin: -1em 0 0 -2.5em; - padding-left : 50px; + padding-left: 50px; position: absolute; top: 50%; width: 15em; @@ -322,30 +298,23 @@ tbody tr.active td { display: inline-block; } -@media (min-width: 768px) { - li.subfield_line label { - width: 20em; - } +.subfield_line { + display: flex; +} + +.field_marceditor { + flex-grow: 1; + padding: .25em .5em; +} + +.subfield_loop_mandatory { + padding: .25em .5em; +} - .input_marceditor { - width: 50em; - } +@media (min-width: 768px) { - .subfield { - width: 14em; - } } @media (min-width: 1200px) { - li.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 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