Koha/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
Owen Leonard 872c4ba2dc
Bug 34114: Replace the use of jQueryUI sortable
This patch adds a replacement for jQueryUI sortable, a standalone
library called Sortable. The patch updates pages which previously used
jQueryUI for sorting.

The patch updates the style of most sortable elements to use the
"grip-vertical" Font Awesome icon.

To test, apply the patch and test the following pages, confirming that
sortable elements are sortable and that the newly sorted state is saved
correctly:

- Administration -> System prefernces -> I18N/L10N
  - With multiple languages installed, test that languages listed in the
    'language' and 'OPACLanguages' preferences can be sorted and that
    after saving your changes the interface relfects your changes: In
    the footer and header of the OPAC and in the footer of the staff
    interface.
- Administration -> MARC bibliographic framework -> MARC structure ->
  Edit subfields of a tag.
  - Test using a tag with multiple subfields, e.g. MARC21 245.
    - Test that you can click and drag to reorder the tabs in the
      subfield edit view.
    - Test that when you save your changes, including changes to the
      "New" tab position, that fields are ordered correctly both in the
       display on this page and in the basic MARC editor.
  - Perform the same tests on Authorities: Administration -> Authority
    types -> MARC structure -> Edit subfields of a tag.
- Authorities -> New (or edit) authority
  - Multiple subfields of a tag should be sortable.
  - Multiple copies of the same tag should be sortable relative to each
    other.
  - Confirm that your changes are saved correctly and that the detail
    view of your updated authority record is correct.
  - Perform the same tests on Cataloging -> New (or edit) record in the
    basic MARC editor.
- Enable the StockRotation system preference if necessary.
  - Go to Cataloging -> Stock rotation
    - If necessary, create a new rota and add multiple stages
      - In the "Manage stages" view you should be able to click and drag
        to reorder stages. The new position should be saved immediately
        via AJAX.

Signed-off-by: paul <paul.poulain@biblibre.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-09-22 13:00:00 -03:00

523 lines
8.3 KiB
CSS

form {
display: block;
}
div#toolbar {
border: 0;
margin-bottom: 0;
padding-top: 5px;
}
.tab-content {
border: 0;
border-radius: 0;
padding: 0;
}
.tab-pane h3 {
font-size: 140%;
margin: .3em 0;
}
.tab-pane ul {
margin-bottom: 0;
padding-left: 0;
}
ul li.tag,
ul li.tag li.subfield_line {
list-style-type: none;
padding-left: 30px;
position: relative;
}
ul li.tag::before {
content: " ";
font-size: .8em;
left: 10px;
padding-top: 1.7em;
position: absolute;
top: 0;
}
ul li.tag.sortable_tag::before,
ul li.tag li.subfield_line::before {
color: #999;
content: "\f58e";
cursor: move;
font-family: "Font Awesome 6 Free";
font-size: .8em;
left: 10px;
position: absolute;
top: -3px;
}
ul li.tag li.subfield_line::before {
top: 3px;
}
li.sortable-ghost {
background-color: #E0E0E0;
border-radius: 4px;
max-height: 150px;
padding: 2px;
}
li.sortable-ghost ul li {
display: none !important;
}
.sortable_subfield .sortable-ghost input.flat {
background-color: transparent;
}
ul li.tag li.subfield_line.sortable-ghost::before {
top: 5px;
}
.buttonPlus {
font-weight: bold;
text-decoration: none;
}
.buttonMinus {
font-weight: bold;
text-decoration: none;
}
a.expandfield {
text-decoration: none;
}
#authoritytabs {
margin-bottom: 1em;
margin-top: 1em;
}
.toptabs {
margin-left: -5px;
margin-top: 0;
}
.toptabs .tab-pane {
padding: 1em;
}
.tag {
border-bottom: 2px solid #E4F2DA;
clear: both;
padding: .7em 0;
}
li.subfield_line {
clear: left;
float: left;
padding-bottom: .3em;
width: 100%;
}
li.subfield_line label {
clear: left;
float: left;
font-size: 89%;
padding-right: .4em;
text-align: left;
width: 10em;
}
.subfieldcode img {
cursor: pointer;
}
.tag_title {
font-size: 90%;
padding: .2em 0;
}
.tagnum {
color: #000;
font-size: 130%;
font-weight: bold;
padding: .1em .3em .1em 0;
}
a.tagnum {
color: #000;
font-size: 110%;
font-weight: bold;
padding: .1em .3em .1em 0;
text-decoration: none;
}
.subfield {
color: #00698A;
float: left;
text-align: right;
width: 10em;
}
.subfield.subfield_mandatory {
color: #C00;
}
.subfieldcode {
display: block;
float: left;
}
.labelsubfield {
float: left;
}
#cat_addbiblio .subfieldcode,
#authoritytabs .subfieldcode {
float: none;
}
#cat_addbiblio .labelsubfield,
#authoritytabs .labelsubfield {
float: none;
font-size: 90%;
}
#cat_addbiblio .subfield,
#authoritytabs .subfield {
float: none;
padding: .25em .5em;
}
#cat_addbiblio .subfield label,
#authoritytabs .subfield label {
color: #00698A;
}
.input_marceditor {
float: left;
width: 50%;
}
#cat_addbiblio .input_marceditor,
#authoritytabs .input_marceditor {
float: none;
width: 100%;
}
#cat_addbiblio .subfield_line,
#authoritytabs .subfield_line {
display: flex;
}
#cat_addbiblio .field_marceditor,
#authoritytabs .field_marceditor {
flex-grow: 1;
padding: .25em .5em;
}
#cat_addbiblio .subfield_loop_mandatory,
#authoritytabs .subfield_loop_mandatory {
padding: .25em 0;
}
.indicator {
box-sizing: content-box;
width: 1em;
}
.item_edit_form .subfield_line {
align-items: flex-start;
display: flex;
flex-basis: 100%;
}
div.item_edit_form ol li label,
div.item_edit_form ol li span.label {
flex-basis: 25%;
font-size: 100%;
margin-right: 1rem;
}
div.item_edit_form ol li {
padding-bottom: 3px;
}
.item_edit_form .input_marceditor {
flex-basis: 50%;
float: none;
}
.item_edit_form textarea.input_marceditor {
width: 31em;
}
div.item_edit_form ol li label:first-child,
fieldset.order_details ol li label:first-child,
div.item_edit_form ol li .label:first-child,
fieldset.order_details ol li .label:first-child {
flex-basis: 25%;
}
#cat_addbiblio .field_marceditor .flatpickr_wrapper {
display: none;
}
.mandatory_marker {
color: #C00;
}
.linktools {
display: block;
white-space: nowrap;
}
.linktools a {
background-color: #FFF;
display: block;
font-size: 75%;
margin: 0 2px;
padding: 2px;
text-align: center;
text-decoration: none;
}
.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;
}
tbody tr.active:nth-child( 2n+1 ) td,
tbody tr.active td {
background-color: #FFFFCC;
}
#loading {
background-color: #FFF;
cursor: wait;
height: 100%;
left: 0;
opacity: .7;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#loading div {
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;
position: absolute;
top: 50%;
width: 15em;
}
#toolbar {
padding: 5px 0;
}
.toolbar-tabs-container {
flex-basis: 100%;
margin-top: .5em;
}
.toolbar-tabs-container .nav-tabs {
background-color: #FFF;
clear: both;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 0;
padding-left: 0;
}
.toolbar-tabs-container .nav-tabs li {
background-color: #FFF;
display: flex;
flex-grow: 1;
justify-content: center;
margin-bottom: 0;
text-align: center;
}
.toolbar-tabs-container .nav-tabs li a {
background-color: #71B443;
border: 1px solid #71B443;
border-left: 0;
border-radius: 5px;
border-right: 1px solid #71B443;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
width: 100%;
}
.toolbar-tabs-container .nav-tabs li.selected a {
background-color: #418940;
border-bottom: 1px solid #418940;
border-right: 1px solid #418940;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
text-decoration: none;
width: 100%;
}
.toolbar-tabs-container .nav-tabs li.selected a:hover,
.toolbar-tabs-container .nav-tabs li.selected a:focus {
background-color: #418940;
border: 1px solid #418940;
border-left: 0;
}
.toolbar-tabs-container .nav-tabs li a:hover {
background-color: #418940;
border-bottom: 1px solid #418940;
border-right: 1px solid #418940;
color: #FFF;
display: block;
font-weight: bold;
margin: 5px;
padding: .3em 1.5em;
text-decoration: none;
width: 100%;
}
.tag_anchors_list {
background-color: #FFF;
clear: both;
display: block;
font-size: 95%;
margin-bottom: 0;
padding-left: 0;
}
.tag_anchor.selected {
font-weight: bold;
}
.tag_anchors {
display: none;
padding: .5em 0;
}
.tag_anchors a {
border-right: 1px solid #CCC;
display: inline-block;
padding: 0 .4em;
}
.tag_anchors.tab_selected {
display: inline-block;
}
.matching_authority {
color: #99FF99;
}
.no_matching_authority {
color: #FFAAAA;
}
.matching_authority_field {
background-color: #99FF99 !important;
}
.no_matching_authority_field {
background-color: #FFAAAA !important;
}
.show-errors {
background: #FFEC8C none;
border-color: #E0C726;
color: #000;
display: none;
text-shadow: none;
}
.floating .show-errors {
display: inline-block;
}
@media ( min-width: 768px ) {
li.subfield_line label {
width: 20em;
}
.input_marceditor {
width: 50em;
}
.subfield {
width: 14em;
}
}
@media ( min-width: 1200px ) {
li.subfield_line label {
width: 25em;
}
.input_marceditor {
width: 60em;
}
.subfield {
width: 16em;
}
}
#authoritiestabs .marc_field {
border-radius: 3px;
display: inline-block;
padding: .3em;
}
#authoritiestabs .marc_subfield {
color: #666;
font-weight: bold;
}
#authoritiestabs .marc_subfield_desc {
color: #00698A;
font-style: italic;
}
#authoritiestabs .auth_subfield {
display: flex;
}
#authoritiestabs .tag {
padding: .4em 0;
}
#authoritiestabs .tag_desc {
color: #026;
}
#authoritiestabs .tag_num {
color: #080;
}
#authoritiestabs .tag_title {
font-size: 100%;
font-weight: bold;
padding: 0;
}