Bug 26838 - Improve styling of checkin message
Summary: Improve styling of checkin message
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-10-27 22:33 UTC by Caroline Cyr La Rose
Modified: 2021-06-18 18:00 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:


Attachments
Checkin message box (2.22 KB, image/png)
2020-10-27 22:33 UTC, Caroline Cyr La Rose
Details
Bug 26838: Improve styling of checkin message (5.82 KB, patch)
2020-10-30 13:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Text not vertically centered in alert box (11.01 KB, image/png)
2020-10-30 16:29 UTC, Caroline Cyr La Rose
Details
Bug 26838: Improve styling of checkin message (6.14 KB, patch)
2021-01-11 20:02 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 26838: Improve styling of checkin message (6.16 KB, patch)
2021-06-10 19:11 UTC, Salman Ali
Details | Diff | Splinter Review
Bug 26838: Improve styling of checkin message (6.21 KB, patch)
2021-06-18 18:00 UTC, Nick Clemens
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Caroline Cyr La Rose 2020-10-27 22:33:15 UTC
Created attachment 112596 [details]
Checkin message box

When an item type has a checkin message of the type "message" (rather than "alert"), the styling of the box is weird. The box is blue, but the background of the text is yellow.

To replicate:
1) Go to Administration > Item types
2) Edit an item type and include a checkin message, the checkin message type should be "message"
3) Check in an item of that type

I attached a screen capture of the blue/yellow message. In the manual, we can see what it used to look like : https://koha-community.org/manual/20.11/en/html/_images/itemtype-msg.png
Comment 1 Owen Leonard 2020-10-30 13:29:51 UTC
Created attachment 112694 [details] [review]
Bug 26838: Improve styling of checkin message

This patch makes some changes to the style and use of the "problem"
class in the staff interface:

- Remove the background color
- Remove the extra line height

Some changes to the template:

 - Remove the problem class from the checkin message. The checkin
   message configuration determines whether the dialog is an alert or a
   message-style dialog.
 - Add Font Awesome icons to the "problem" messages in patron details
   and serials collection. This is to help emphasize the message for
   users  who might have difficulty seeing the color difference.

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).

 - Go to Administration -> Item types and configure a checkin message
   for an item type: Add a message and select "Message" as the checkin
   message type.
 - Check in an item with that item type and confirm that you see the
   checkin message. It should be displayed in a message-style dialog
   without any additional styling.
 - Change the item type configuration to use "Alert" as the checkin
   message type. Confirm that the correct style is shown in this case as
   well.

 - Locate a patron with a NULL value in borrowers.password. View the
   detail page for that patron.
 - Under the "Library use" heading, the "Password" line should contain a
   link with the text "Undefined," preceded by a red-colored Font
   Awesome  icon.

 - In Serials, locate a subscription which is expired.
 - View the details for the subscription, and then open "serial
   collection" from the sidebar menu.
 - On the serial collection page there should be a cell in the
   subscription summary table showing the message "Subscription expired"
   preceded by a red-colored Font Awesome icon.
Comment 2 Caroline Cyr La Rose 2020-10-30 16:29:22 UTC
Created attachment 112727 [details]
Text not vertically centered in alert box
Comment 3 Caroline Cyr La Rose 2020-10-30 16:30:29 UTC
It works!

The only thing bugging me is that the text in the "alert" type box is not centered vertically...

If this is me being too perfectionist, you can ignore me...
Comment 4 Owen Leonard 2021-01-11 20:02:59 UTC
Created attachment 115046 [details] [review]
Bug 26838: Improve styling of checkin message

This patch makes some changes to the style and use of the "problem"
class in the staff interface:

- Remove the background color
- Remove the extra line height

Some changes to the template:

 - Remove the problem class from the checkin message. The checkin
   message configuration determines whether the dialog is an alert or a
   message-style dialog.
 - Add Font Awesome icons to the "problem" messages in patron details
   and serials collection. This is to help emphasize the message for
   users  who might have difficulty seeing the color difference.

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).

 - Go to Administration -> Item types and configure a checkin message
   for an item type: Add a message and select "Message" as the checkin
   message type.
 - Check in an item with that item type and confirm that you see the
   checkin message. It should be displayed in a message-style dialog
   without any additional styling.
 - Change the item type configuration to use "Alert" as the checkin
   message type. Confirm that the correct style is shown in this case as
   well.

 - Locate a patron with a NULL value in borrowers.password. View the
   detail page for that patron.
 - Under the "Library use" heading, the "Password" line should contain a
   link with the text "Undefined," preceded by a red-colored Font
   Awesome  icon.

 - In Serials, locate a subscription which is expired.
 - View the details for the subscription, and then open "serial
   collection" from the sidebar menu.
 - On the serial collection page there should be a cell in the
   subscription summary table showing the message "Subscription expired"
   preceded by a red-colored Font Awesome icon.
Comment 5 Salman Ali 2021-06-10 19:11:33 UTC
Created attachment 121809 [details] [review]
Bug 26838: Improve styling of checkin message

This patch makes some changes to the style and use of the "problem"
class in the staff interface:

- Remove the background color
- Remove the extra line height

Some changes to the template:

 - Remove the problem class from the checkin message. The checkin
   message configuration determines whether the dialog is an alert or a
   message-style dialog.
 - Add Font Awesome icons to the "problem" messages in patron details
   and serials collection. This is to help emphasize the message for
   users  who might have difficulty seeing the color difference.

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).

 - Go to Administration -> Item types and configure a checkin message
   for an item type: Add a message and select "Message" as the checkin
   message type.
 - Check in an item with that item type and confirm that you see the
   checkin message. It should be displayed in a message-style dialog
   without any additional styling.
 - Change the item type configuration to use "Alert" as the checkin
   message type. Confirm that the correct style is shown in this case as
   well.

 - Locate a patron with a NULL value in borrowers.password. View the
   detail page for that patron.
 - Under the "Library use" heading, the "Password" line should contain a
   link with the text "Undefined," preceded by a red-colored Font
   Awesome  icon.

 - In Serials, locate a subscription which is expired.
 - View the details for the subscription, and then open "serial
   collection" from the sidebar menu.
 - On the serial collection page there should be a cell in the
   subscription summary table showing the message "Subscription expired"
   preceded by a red-colored Font Awesome icon.

Signed-off-by: Salman Ali <salman@outaouais>
Comment 6 Nick Clemens 2021-06-18 18:00:01 UTC
Created attachment 122170 [details] [review]
Bug 26838: Improve styling of checkin message

This patch makes some changes to the style and use of the "problem"
class in the staff interface:

- Remove the background color
- Remove the extra line height

Some changes to the template:

 - Remove the problem class from the checkin message. The checkin
   message configuration determines whether the dialog is an alert or a
   message-style dialog.
 - Add Font Awesome icons to the "problem" messages in patron details
   and serials collection. This is to help emphasize the message for
   users  who might have difficulty seeing the color difference.

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).

 - Go to Administration -> Item types and configure a checkin message
   for an item type: Add a message and select "Message" as the checkin
   message type.
 - Check in an item with that item type and confirm that you see the
   checkin message. It should be displayed in a message-style dialog
   without any additional styling.
 - Change the item type configuration to use "Alert" as the checkin
   message type. Confirm that the correct style is shown in this case as
   well.

 - Locate a patron with a NULL value in borrowers.password. View the
   detail page for that patron.
 - Under the "Library use" heading, the "Password" line should contain a
   link with the text "Undefined," preceded by a red-colored Font
   Awesome  icon.

 - In Serials, locate a subscription which is expired.
 - View the details for the subscription, and then open "serial
   collection" from the sidebar menu.
 - On the serial collection page there should be a cell in the
   subscription summary table showing the message "Subscription expired"
   preceded by a red-colored Font Awesome icon.

Signed-off-by: Salman Ali <salman@outaouais>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>