This patch adds a new class to toolbars in certain contexts: Where the
toolbar contains only text links (as opposed to Bootstrap-styled
controls). This lets us set some comfortable padding on the links.
To test, apply the patch and rebuild the staff interface CSS.
Test the following pages to confirm that the toolbar of selection links
("Select all," "Clear all," etc.) has legible spacing.
- Cataloging -> Batch item modification -> List of submitted barcodes
- Cataloging -> Batch item deletion -> List of submitted barcodes
- Cataloging -> Batch record modification -> List of submitted records
- Cataloging -> Batch record deletion -> List of submitted records
- Circulation -> Checkout notes
- Tools -> Batch extend due dates -> Preview results
- Tools -> Batch patron modification -> List of submitted patrons
- Tools -> OPAC problem reports
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch updates the breadcrumb style to use the old caret icon
instead of a slash.
I've left the italic because I think it works well to set the text off
from the normal text above, in the search bar, and below in the main
body of the page.
To test, apply the patch and rebuild the staff interface CSS. Look at
various pages in the staff interface and check the style of the
breadcrumbs menu.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch reimplements certain tabbed interfaces to use Bootstrap
markup. Previously these tabs required special CSS because they're
static, i.e. not JS-driven tabs for switching in-page. The tabs are
links to separate pages.
Note: This patch includes whitespace changes, so use diff accordingly.
To test, apply the patch and rebuild the staff interface CSS.
Test the following pages to confirm that the tabs look correct and still
link to the correct locations:
- Patron details
- Accounting
- Pay amount
- Transactions
- Create manual invoice
- Create manual credit
- Tools -> Comments
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds a reasonable width to the "specify due date" date field
on the circulation page.
To test, apply the patch and rebuild the staff interface CSS.
Check out to a patron and click the "setting" icon on the "Enter item
barcode" field.
In the checkout setting panel, confirm that the date field isn't
unreasonably wide.
Signed-off-by: Barbara Johnson <barbara.johnson@swbell.net>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
Test plan
1) Confirm the styling change for top level tabs on patron details or catalog
details pages.
2) Confirm the styling change is ok for a nested set of tabs (catalog
holds page is a good example).
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
https://bugs.koha-community.org/show_bug.cgi?id=31759
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds style to the staff client's global SCSS which adds
correct styling to buttons classed with .btn-danger.
This isn't the correct way to fix this, but it's the fast way.
Rebuilding Bootstrap with custom colors is the correct way, but
Bootstrap 3.x doesn't use SCSS. I consider this is a FIXME for an
upgrade of Bootstrap in the staff interface.
To test, apply the patch and rebuild the staff interface CSS. Test
instances where the .btn-danger class is used. Two examples:
Holds:
- Locate a bibliographic records with holds and view the holds.
- Click the "trash" icon to delete one of the holds.
- In the confirmation modal, check that the "Confirm cancellation"
button looks correct in its default, hover, and active ("clicked")
state.
Cataloging:
- Open a new blank record in the basic MARC editor.
- Click "Save" without filling any mandatory fields.
- You should see a warning about the empty fields.
- Scroll down until the warning is offscreen. An "Errors" button should
appear in the toolbar.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes a minor change to CSS controlling the appearance of the
dialog which appears on the checkout page when a confirmation is
required.
To test, apply the patch and rebuild the staff interface CSS.
Open a patron account for checkout, and submit the barcode of an item
which will require confirmation before the operation can be completed.
For example:
- Item on hold for another patron
- Item waiting for another patron
- Item is checked out to another patron.
The confirmation dialog should have a comfortable margin between it and
the checkout form.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes changes the button markup in Catalog
templates -- including the Cart -- so that all submit buttons and any
buttons that should should be styled as primary buttons have the
Bootstrap class "btn btn-primary."
Edit: This revised patch changes the button styles on the search history
page to make them more consistent with buttons in similar interfaces
(see catalog search results).
The patch also adds Bootstrap size classes to the item detail page and
removes some global CSS which targeted buttons on that page.
To test, apply the patch and view pages the catalog to confirm
that everything looks correct. In most cases there are no visible
changes.
- Advanced search: The main search button at the top
- Search results: The "Search within results" submit button
- Bibliographic detail page: This change is to a hidden button. This
section can be removed in a separate bug.
- Bibliographic detail page -> Items: Various "Update" and "Set status"
buttons. Note that the alignment of buttons has not changed in the
redesign.
- Item search: The main search button at the top
- Search history (from the logged-in user's menu in the top right):
"Delete" buttons in each section
- Catalog -- Current and previous sessions
- Authority -- Current and previous sessions
- In the Cart popup window, click "Send." In the resulting popup, the
"Send button.
- The template basket/downloadcart.tt has been modified but I think the
template might be unused.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes a slight change to the CSS controling the appearance of
floating toolbars. In some cases the lack of padding around the toolbar
elements made it look awkward.
To test, apply the patch and rebuild the staff interface CSS.
View various pages to confirm that the toolbar looks correct when you
scroll down and the toolbar "sticks" to the top of the browser viewport.
For example:
- Patrons -> Search results
- Patrons -> Add/edit patron
- Catalog -> Advanced search form
- Administration -> Preferences
- Authorities -> Add/edit authority
- Cataloging -> Add/edit MARC record
- Catalog -> Item search form
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch removes global font and padding settings which were
overriding the Bootstrap classes we use to change the size of Bootstrap
buttons. The font and padding settings are moved to the CSS which covers
button which are not styled as Bootstrap buttons.
To test, apply the patch and view pages where buttons are styled with
different Bootstrap size classes:
- Circulation -> Check out:
- The "Check out" button, the "Show checkouts" button, Renew buttons
in the footer.
- Patrons -> Patron details -> Edit buttons in each section.
- Patrons home -> Buttons in sidebar filter
- Catalog -> Bibliographic details -> Item details
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
I think the increased font size means we need slightly more padding
between items for good legibility.
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This alternate patch is different in a few ways:
- Add a hover background color only to items in dropdown menus.
- Use an SCSS variable for the background color
- Update the specificity of the hover CSS to more fully override
Bootstrap's default.
To test, apply the patch and rebuild the staff interface CSS.
- On any page in the staff interface, test the behavior of links in the
nav header.
- The always-visible links (Circulation, Patrons, etc) should keep the
same style as before: Underline on hover.
- In dropdown menus like "More" and the user menu in the upper right
corner, hovered links should have a green background.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This follow-up makes a couple other minor corrections to label
alignment. This allows for correct top-alignment of labels in forms but
lets labels in other contexts, especially checkbox or radio button
labels, to be aligned "middle."
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch adds a specific white-space property to header search labels
so that they do not wrap. The change made by Bug 31813 overrode the
white-space property incorrectly.
To test, apply the patch and rebuild the staff interface CSS.
- Go to Administration.
- The header search label "Search system preferences" should appear on
one line.
- Check that labels still wrap correctly on pages like the patron edit
screen and the staged MARC record detail view.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch sets a width on Flatpickr instances so that they better match
the typical width of a text input field.
The patch also corrects the "X" ("clear date") link color to return it
to the original red color. In doing this I've defined a new
$warning-text-color variable and replaced other instances of #CC0000
with this variable.
I've also tweaked the appearance of the Flatpickr shortcut links
("Today," "Tomorrow," etc) so that they match other links in Koha.
To test, apply the patch and rebuild the staff interface CSS.
- Go to patrons and locate a patron record.
- Edit the patron.
- In the patron entry form, confirm that the "Date of birth" field
matches the width of the text fields around it.
- The "X" should be red.
- Click the date of birth field to trigger the calendar popup.
- The "Yesterday" and "Today" links should be colored the default green
seen elsewhere in the staff interface.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
We currently have a mix of ways to style buttons, including some using
Bootstrap's btn-primary class and some with CSS targeting
input[type='submit']. This patch works to make these buttons more
consistent in their appearance and to improve the modularity of related
SCSS.
The patch also removes some unused CSS from login.css.
To test, apply the patch and rebuild the staff interface CSS.
Test various page to see if main submit buttons look correct in their
default, hover, and active states:
- The login page
- Circulation -> Checkouts -> Check out button (btn-primary)
- Circulation -> Set library (input[type='submit'])
- Cataloging -> Basic MARC editor (split button)
Also check "default" buttons:
- Patrons -> Sidebar filter (input[type='button'])
- Circulation -> Checkouts -> Show checkouts (btn-default)
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes some minor changes to the CSS controlling the way the
checkout settings panel displays, as well as the panel showing the last
checked-out item.
To test, apply the patch and rebuild the staff interface CSS.
- Go to Circulation and locate a patron to check out to.
- On the checkout page, click the "settings" icon in the barcode field.
- The checkout settings panel should display. Confirm that the spacing
looks good.
- Check out an item to the patron.
- Confirm that the panel showing the last checked out item information
looks correct: A green-bordered box with a white background, no
rounded corners.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes some changes to the suggestions template in order to
make the sidebar filter form and bulk action table footer forms more
usable and readable.
Some global changes to <fieldset class="brief"> style are made.
To test, apply the patch and rebuild the staff interface CSS.
- Go to Suggestions.
- Confirm that the sidebar contains two sections: Organize by and Filter
by.
- Test that the links under "Filter by" work to expand and collapse the
different sections (bibliographic, suggestion, and acquisition).
- Below the table of existing suggestions you should see the section
"Change selected suggestions."
- Each form should look good, with labels in bold above each form field,
with "primary" style submit buttons.
- Because some global styles have been modified, check that fieldsets
with the class "brief" are still displayed correctly in other areas:
- In sidebar forms: Patrons, Acquisitions order and invoice searches,
overdues and holds to pull in Circulation.
- In other areas: The Quick spine label creator; the upload plugin
form; the calendar's add holiday form.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
The action class sets the background to transparent, but because it's
often used in conjunction with the fieldset which includes the card
mixin the background rule was getting overridden to white.
Test plan
1. Consider the same cases as the original patch
2. Confirm that the last test now shows the buttons outside of the card
but nicely spaced to clearly belong to it.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes CSS changes to try to bring some consistency to
various elements which are similar in the general sense of "white box."
Fieldsets, page-section, etc.
To test apply the patch and rebuild the staff interface CSS.
Test various pages with page-section, fieldsets, etc.:
- Patron details
- Patron edit
- Patron accounting
- Check Tools -> Patron lists -> New to confirm that there is not a gap
between the submit button's container and the rest of the form.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch increases the contrast of the separator pipe visible in the
staff client upper right corner of the header bar.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch restores the aside{} section of staff-global.scss from before
the staff redesign and makes some tweaks to make it consisten with the
redesign. The goal is to make the spacing of the form more compact but
still readable, and to correct some layout inconsistencies.
The patch also modifies the order filter form to fix the layout of some
checkboxes.
To test, apply the patch and rebuild the staff interface CSS.
Test various pages with sidebar forms to confirm that the form looks
readable and usable. For example:
- Patrons
- Acquisitions -> Invoices
- Tools -> Tags
- Serials -> Subscription search results
- Overdues
- Holds to pull
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch modifies the style of divs with the class "note," making them
have the same background color as message dialogs as proposed in Bug
31973.
To test, apply the patch and rebuild the staff interface CSS.
Confirm that the updated style looks good. Some pages where you can find
examples:
- Administration -> Authorized values -> View a categories values.
- Administration -> Search engine cofiguration (with Elasticsearch
enabled).
- Cataloging -> Batch record deletion -> Submit a list of biblionumbers.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch restores the background color to message-style alerts, those
which use the markup <div class="dialog message">. These alerts should
stand out more to the user.
To test, apply the patch and rebuild the staff interface CSS.
- Test areas which use the message-style dialog. Perhaps the easiest
example is to try to view a bibliographic record which doesn't exist:
/cgi-bin/koha/catalogue/detail.pl?biblionumber=1234567890
- It can also be found as a confirmation when deleting a basket in
Acquisitions, deleting a patron attribute type in Administration,
updating a Z39.50 server in Administration, etc.
- Confirm that the alert looks correct and is suitable visible.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch makes a couple of changes to CSS which affect, globally, the
alignment of labels in forms. With lables corresponding to text areas or
other multi-line controls, the label should be aligned with the top of
the control.
This patch also changes the inline style attribute on the control that
lets a user add an additional manager to a basket in acquisitions. It
requires an update to work with the new default form layout.
To test, apply the patch and go to Acquisitions -> Vendor -> Baskets.
- View the details of a basket.
- You should see a line labeled "Manged by." The label should be
top-aligned to match the "Add user" link next to it.
- Test that the link works correctly and that the layout is correct
after adding additional managers.
View other forms in the staff interface to confirm that the changes
work correctly and have not broken layout anywhere else. For instance,
in the patron add/edit form, the "Contact note," "OPAC note," labels etc.
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This patch removes the adusted font size from the definition of the
.results_summary spans. The percentage decrease was being multiplied
with another rule.
To test, apply the patch and rebuild the staff interface CSS.
Locate a bibliographic record in the staff client and view the detail
page. Confirm that the bibliographic information is displayed in a
comfortable size.
Also test that catalog search results still look correct.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>