Inconsistent styles and responsive design issues in My Account grids

Bug #1614807 reported by Kathy Lussier on 2016-08-19
This bug affects 2 people
Affects Status Importance Assigned to Milestone

Bug Description

Evergreen version: all

This bug addresses two style issues in the My Account screens.

The holds history page uses different styles than the holds, items out, and check out history pages. The styles on all four pages should be consistent.

In addition, the check out history and holds history pages do not display correctly on small screens. This issue is caused by CSS that was used to reposition the table headers to display along the side when these screens are retrieved on small screens.

The items out screen and check out history tables share the same class, even though they use different table headers. There is an #acct_checked_hist_header in the stock css file, but it doesn't appear to be referenced in any of the tt2 files. The result is that a small-screen version of checkout history will refer to the #acct_checked_main_header class and display the Items Out table headers.

The holds history table has no class assigned to it. Therefore, no adjustments are made when it displays on a small screen.

We need to make use of the #acct_checked_hist_header class on the Check Out History page to display the correct headers and add a new #acct_holds_hist_header class to allow the holds history page to adjust when retrieved on a small screen.

Changed in evergreen:
status: New → Confirmed
Kathy Lussier (klussier) on 2016-08-19
description: updated
Changed in evergreen:
importance: Undecided → Medium
Kathy Lussier (klussier) wrote :

Work-in-progress branch at;a=shortlog;h=refs/heads/user/kmlussier/lp1614807-my-account-screen-fixes.

I ultimately decided to forego doing a small-screen adjustment for the Holds History screen that matches the other interfaces. With the absence of a checkmark row, there was no separator that clearly defined where one title stopped and another one began. I'm sure there is a good way to handle it, but after spending some time on the problem, I realized I don't have the tuits to do it right now. For a future release, it might be a good idea to re-evaluate how we handle the responsive design for all four of these My Account interfaces, but that's the topic for another bug.

I'm hoping to address some spacing issues before adding a pullrequest tag to this bug.

Kathy Lussier (klussier) wrote :

I think this one is ready to go. The final branch is available at:;a=shortlog;h=refs/heads/user/kmlussier/lp1614807-my-account-screen-fixes-squashed

It includes the following fixes

* The Check Out History, when displayed on a small screen, now shows the correct headings and displays data in the correct row.
* Holds history page now has the same style as the other My Account pages
* Resolves spacing issues that cluttered and sometimes even cut off text when viewed on a small screen.
* Makes the Holds History page more responsive by re-orienting the table on a small screen in the same way that's done on the other My Account pages.

tags: added: pullrequest
Changed in evergreen:
assignee: Kathy Lussier (klussier) → nobody
Mike Rylander (mrylander) wrote :

Picked into master and rel_2_10. Thanks, Kathy!

Changed in evergreen:
status: Confirmed → Fix Committed
Jason Stephenson (jstephenson) wrote :

Only 1 of the four commits on the working branch cherry-picks cleanly into rel_2_9, so this one will not get backported.

Thanks for the work, Kathy!

Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers