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>
.tag {
border-bottom: 2px solid #D5E6E9;
.tag {
border-bottom: 2px solid #D5E6E9;
+.tag .row {
+ margin-left: 0;
+ margin-right: 0;
+}
+
div.subfield_line {
padding-bottom: .3em;
div.subfield_line {
padding-bottom: .3em;
- float: left;
- clear: left;
- width: 100%;
}
div.subfield_line label {
font-size:89%;
}
div.subfield_line label {
font-size:89%;
- float: left;
- padding-right : .4em;
- width: 16em;
.subfield {
color : #00698a;
.subfield {
color : #00698a;
- float: left;
- width: 10em;
-.subfieldcode {
- display: block;
- float: left;
-}
-
-.labelsubfield {
- float:left;
-}
-
- float:left;
- width:30em;
+ float:left;
+ width: 70%;
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
- div.subfield_line label {
- width: 20em;
- }
- .input_marceditor {
- width: 50em;
- }
-
- .subfield {
- width: 14em;
- }
}
@media (min-width: 1200px) {
}
@media (min-width: 1200px) {
- div.subfield_line label {
- width: 25em;
- }
-
- .input_marceditor {
- width: 60em;
- }
- .subfield {
- width: 16em;
- }
[% INCLUDE 'select2.inc' %]
<script>
$(document).ready(function() {
[% INCLUDE 'select2.inc' %]
<script>
$(document).ready(function() {
- $('.subfield_line select').select2();
+ $('.subfield_line select').select2({
+ width: "70%"
+ });
[% END %]
[% FOREACH innerloo IN BIG_LOO.innerloop %]
[% IF ( innerloo.tag ) %]
[% 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 %]
[% 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 %]
+ </div> <!-- /.tag_title col-sm-12 -->
+ </div> <!-- /.row -->
[% FOREACH subfield_loo IN innerloo.subfield_loop %]
<!-- One line on the marc editor -->
[% FOREACH subfield_loo IN innerloo.subfield_loop %]
<!-- One line on the marc editor -->
<div class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
<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 %]
[% 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 %]
<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" />
<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" />
[% subfield_loo.marc_lib | $raw %]
[% IF ( subfield_loo.mandatory ) %]<span class="mandatory_marker" title="This field is mandatory">*</span>[% END %]
</span>
[% subfield_loo.marc_lib | $raw %]
[% IF ( subfield_loo.mandatory ) %]<span class="mandatory_marker" title="This field is mandatory">*</span>[% END %]
</span>
+ </div> <!-- /.col-sm-4 -->
+ <div class="col-sm-8">
[% SET mv = subfield_loo.marc_value %]
[% IF ( mv.type == 'text' ) %]
[% IF ( mv.readonly == 1 ) %]
[% 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" />
- <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' ) %]
[% 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>
<span class="subfield_controls">
[% IF mv.noclick %]
<a href="#" class="buttonDot tag_editor disabled" tabindex="-1" title="No popup"></a>
</span>
[% mv.javascript | $raw %]
[% ELSIF ( mv.type == 'hidden' ) %]
</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' ) %]
[% 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' ) %]
+ </div> <!-- /.col-sm-8 -->
+ </div> <!-- /.subfield_line -->
+ </div> <!-- /.row -->
<!-- End of the line -->
[% END %]
<!-- End of the line -->
[% END %]
[% END %]<!-- if innerloo.tag -->
[% END %]<!-- BIG_LOO.innerloop -->
</div>
[% END %]<!-- if innerloo.tag -->
[% END %]<!-- BIG_LOO.innerloop -->
</div>