@@ -, +, @@ 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(-) --- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css +++ a/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; - } } --- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt +++ a/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 %] --- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js +++ a/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 --