Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 22399: Improve responsive behavior of the basic marc editor

Browse source 
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
Bootstrap grid markup to 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.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2019-02-22 17:29:36 +00:00 committed by Nick Clemens
parent ef231b4111
commit b5a742c62f
2 changed files with 30 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
View file

@ -40,24 +40,21 @@ a.expandfield {
.tag {
border-bottom: 2px solid #D5E6E9;
clear: both;
padding: .7em 0;
}
.tag .row {
margin-left: 0;
margin-right: 0;
}
div.subfield_line {
padding-bottom: .3em;
float: left;
clear: left;
width: 100%;
}
div.subfield_line label {
font-size:89%;
float: left;
padding-right : .4em;
width: 16em;
text-align: left;
clear:left;
}
.subfieldcode img {
@ -86,23 +83,12 @@ a.tagnum {
.subfield {
color : #00698a;
float: left;
width: 10em;
text-align:right;
}
.subfieldcode {
display: block;
float: left;
}
.labelsubfield {
float:left;
}
.input_marceditor {
float:left;
width:30em;
float:left;
width: 70%;
}
.indicator {
@ -263,29 +249,9 @@ tbody tr.active td {
}
@media (min-width: 768px) {
div.subfield_line label {
width: 20em;
}
.input_marceditor {
width: 50em;
}
.subfield {
width: 14em;
}
}
@media (min-width: 1200px) {
div.subfield_line label {
width: 25em;
}
.input_marceditor {
width: 60em;
}
.subfield {
width: 16em;
}
}

38
koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
View file

@ -422,7 +422,9 @@ function Changefwk() {
[% INCLUDE 'select2.inc' %]
<script>
$(document).ready(function() {
$('.subfield_line select').select2();
$('.subfield_line select').select2({
width: "70%"
});
});
</script>
@ -630,8 +632,9 @@ function Changefwk() {
[% END %]
[% FOREACH innerloo IN BIG_LOO.innerloop %]
[% IF ( innerloo.tag ) %]
<div class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
<div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
<div class="tag" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
<div class="row">
<div class="tag_title col-sm-12" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
[% IF advancedMARCEditor %]
<a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to Expand this Tag" onclick="ExpandField('tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]'); return false;">[% innerloo.tag | html %]</a>
[% ELSE %]
@ -686,18 +689,22 @@ function Changefwk() {
</a>
</span>
</div>
</div> <!-- /.tag_title col-sm-12 -->
</div> <!-- /.row -->
[% FOREACH subfield_loo IN innerloo.subfield_loop %]
<!-- One line on the marc editor -->
<div class="row">
<div class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
[% UNLESS advancedMARCEditor %]
<div class="col-sm-4">
[% UNLESS advasmedMARCEditor %]
[% IF ( subfield_loo.fixedfield ) %]<label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
[% ELSE %]<label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
[% END %]
[% END %]
</label>
<span class="subfieldcode">
[% IF ( subfield_loo.fixedfield ) %]
<img class="buttonUp" style="display:none;" src="[% interface | html %]/[% theme | html %]/img/up.png" onclick="upSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]')" alt="Move Up" title="Move Up" />
@ -720,21 +727,21 @@ function Changefwk() {
[% subfield_loo.marc_lib | $raw %]
[% IF ( subfield_loo.mandatory ) %]<span class="mandatory_marker" title="This field is mandatory">*</span>[% END %]
</span>
</label>
[% END %]
</div> <!-- /.col-sm-4 -->
<div class="col-sm-8">
[% SET mv = subfield_loo.marc_value %]
[% IF ( mv.type == 'text' ) %]
[% IF ( mv.readonly == 1 ) %]
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
[% ELSE %]
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" maxlength="[%- mv.maxlength | html -%]" />
[% END %]
[% IF ( mv.authtype ) %]
<span class="subfield_controls"><a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a></span>
[% END %]
[% ELSIF ( mv.type == 'text_complex' ) %]
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
<input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" maxlength="[%- mv.maxlength | html -%]" />
<span class="subfield_controls">
[% IF mv.noclick %]
<a href="#" class="buttonDot tag_editor disabled" tabindex="-1" title="No popup"></a>
@ -744,7 +751,7 @@ function Changefwk() {
</span>
[% mv.javascript | $raw %]
[% ELSIF ( mv.type == 'hidden' ) %]
<input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
<input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
[% ELSIF ( mv.type == 'textarea' ) %]
<textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
[% ELSIF ( mv.type == 'select' ) %]
@ -769,12 +776,13 @@ function Changefwk() {
</a>
[% END %]
</span>
</div>
</div> <!-- /.col-sm-8 -->
</div> <!-- /.subfield_line -->
</div> <!-- /.row -->
<!-- End of the line -->
[% END %]
</div>
</div> <!-- /.tag -->
[% END %]<!-- if innerloo.tag -->
[% END %]<!-- BIG_LOO.innerloop -->
</div>