Bug 31759 - Improve styling of tabs
Summary: Improve styling of tabs
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 30952
Blocks: 31815 32182
  Show dependency treegraph
 
Reported: 2022-10-13 10:36 UTC by Martin Renvoize
Modified: 2023-09-29 11:27 UTC (History)
5 users (show)

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


Attachments
Bug 31759: Tabs vs Pills - Test pills design (1.74 KB, patch)
2022-10-14 14:45 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot pills (124.85 KB, image/png)
2022-10-14 15:21 UTC, Martin Renvoize
Details
Screenshot tabs (124.21 KB, image/png)
2022-10-14 15:25 UTC, Martin Renvoize
Details
Alternate tab style proposal (194.58 KB, image/png)
2022-10-26 18:35 UTC, Owen Leonard
Details
Mockup (170.08 KB, image/png)
2022-10-27 14:22 UTC, Martin Renvoize
Details
Next (172.42 KB, image/png)
2022-11-08 14:34 UTC, Martin Renvoize
Details
Bug 37159: Testing alternate tab style (2.77 KB, patch)
2022-11-09 20:15 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37159: Updated tab style (3.17 KB, patch)
2022-11-10 16:57 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 37159: Updated tab style (3.23 KB, patch)
2022-11-10 17:42 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2022-10-13 10:36:52 UTC
We never completely came to a conclusion regarding pills vs tabs for the staff client refresh.. however I think we did come to the conclusion that they're not great as they are right now.. so I'm opening a new issue here to discus.

https://github.com/jajm/koha-staff-interface-redesign/issues/17 starts the conversation and has screenshots.
Comment 1 Owen Leonard 2022-10-14 14:45:36 UTC
Created attachment 141892 [details] [review]
Bug 31759: Tabs vs Pills - Test pills design

This patch depends on Bug 30487.
Comment 2 Martin Renvoize 2022-10-14 15:21:08 UTC
Created attachment 141895 [details]
Screenshot pills
Comment 3 Martin Renvoize 2022-10-14 15:23:32 UTC
I like the pills.. though perhaps we need a little more of a bottom margin beneath them.. some content gets very close.

Still contemplating a little.. the distinction of "You're on this tab now" is certainly less marked with pills given there's less of a clear link between the Pill itself and the content it is attached to.. with tabs you have a border that feels like it wraps around the content and then up and around the tab.. hmmm...

I'm a little torn myself.. needs more wider feedback.
Comment 4 Martin Renvoize 2022-10-14 15:25:24 UTC
Created attachment 141896 [details]
Screenshot tabs
Comment 5 David Nind 2022-10-14 18:10:34 UTC
I'm in the tabs camp 8-).

For me, it is mainly that the tabs are a known and common user interface pattern. Whereas (to me) the pills look like buttons for doing something (submit, cancel, upload, etc).
Comment 6 Katrin Fischer 2022-10-14 21:16:38 UTC
(In reply to David Nind from comment #5)
> I'm in the tabs camp 8-).
> 
> For me, it is mainly that the tabs are a known and common user interface
> pattern. Whereas (to me) the pills look like buttons for doing something
> (submit, cancel, upload, etc).

I am with David on this one for the same reason. Although I have to admit that they look kinda nice, I see an issue in explaining them to users.
Comment 7 Martin Renvoize 2022-10-15 07:01:18 UTC
How about something like bootstraps card with header and tabs... https://getbootstrap.com/docs/4.0/components/card/#navigation.

I think for me it's the borders and offset that feels weird where other content areas are all moving towards the page-section custom card implementation.
Comment 8 Martin Renvoize 2022-10-15 07:04:15 UTC
This raises a slight question as to what colour the header section should be.. a green tint of some kind I reckon rather than a grey (as our overall page background is grey... Though perhaps matching the sidebar grey could work?)..  if we do opt for a green I'd suggest matching the modal header green for consistency though personally I'd like to change that green too.. I find it 'dirty'.. think Lucas and I described it as Swamp green in a t cent chat.
Comment 9 David Cook 2022-10-17 22:15:55 UTC
I don't really have an opinion on this myself (shocking I know), but I imagine I'll hear about it in the new year from library staff.

I don't have a master instance running at the moment, but I wonder what's the most common pattern used with the re-design. Best perhaps just to keep it consistent across the board?
Comment 10 Martin Renvoize 2022-10-21 10:07:50 UTC
So the current tabs is inconsistent with the cards we're using elsewhere.. I think the question is really around how do we make it look like it belongs with all the other elements on the page rather than sticking out as different.
Comment 11 Owen Leonard 2022-10-26 18:35:04 UTC
Created attachment 142681 [details]
Alternate tab style proposal

If we're sticking with tabs, I think this alternative might be agreeable:

- No rounded corners, consistent with other aspects of the redesign
- Easier to identify the open tab (I found the two greens to be a little confusing for that)
- A little less "heavy": The lighter active tab border doesn't carry as much visual weight.
Comment 12 Lucas Gass 2022-10-26 19:43:23 UTC
(In reply to Owen Leonard from comment #11)
> Created attachment 142681 [details]
> Alternate tab style proposal
> 
> If we're sticking with tabs, I think this alternative might be agreeable:
> 
> - No rounded corners, consistent with other aspects of the redesign
> - Easier to identify the open tab (I found the two greens to be a little
> confusing for that)
> - A little less "heavy": The lighter active tab border doesn't carry as much
> visual weight.

+1 from me on this look for tabs. I quite like it!
Comment 13 David Nind 2022-10-26 20:14:14 UTC
+1 from me as well
Comment 14 Katrin Fischer 2022-10-26 20:41:35 UTC
Comment on attachment 142681 [details]
Alternate tab style proposal

I like it!

I was wondering: does it hav eto be a full border around the 'card', or would maybe the top border suffice making it even less have and more page-section like? (it's ok if you dislike the idea)
Comment 15 Martin Renvoize 2022-10-27 14:22:19 UTC
Created attachment 142716 [details]
Mockup

I'm such a stickler.. I'm not a fan of the border..

I still wonder about putting the tabs in a 'header' as i were..  

See mockup.
Comment 16 Katrin Fischer 2022-10-27 17:45:34 UTC
Comment on attachment 142716 [details]
Mockup

Not a great fan of the border too (see previous comment), but for me the green background here doesn't work so well. What about removing the light grean and adding a border only around the white tab?
Comment 17 Martin Renvoize 2022-11-08 14:33:47 UTC
OK.. so people don't like the header idea.

In which case...
Comment 18 Martin Renvoize 2022-11-08 14:34:21 UTC
Created attachment 143394 [details]
Next

How does this look?
Comment 19 Owen Leonard 2022-11-08 15:38:01 UTC
(In reply to Martin Renvoize from comment #18)
> Created attachment 143394 [details]

I like this one, but as we've discussed on IRC it doesn't work if the tabs are on a white background. If we want to go this way we'll have to make sure we can restructure pages in a way that lets the tabs stand on their own.
Comment 20 Katrin Fischer 2022-11-09 10:31:52 UTC
Comment on attachment 143394 [details]
Next

+1
Comment 21 Owen Leonard 2022-11-09 20:15:40 UTC
Created attachment 143585 [details] [review]
Bug 37159: Testing alternate tab style
Comment 22 Martin Renvoize 2022-11-10 16:57:34 UTC
Created attachment 143694 [details] [review]
Bug 37159: Updated tab style

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>
Comment 23 Martin Renvoize 2022-11-10 17:00:19 UTC
I think we have a winner here... so much so that I fixed up the commit message, added a test plan, obsoleted all the previous screenshots, mockups and patches and am signing this one off :D
Comment 24 Katrin Fischer 2022-11-10 17:42:50 UTC
Created attachment 143697 [details] [review]
Bug 37159: Updated tab style

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>
Comment 25 Tomás Cohen Arazi 2022-11-10 17:54:27 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!
Comment 26 Katrin Fischer 2022-11-10 22:51:17 UTC
Something quite odd: 

http://localhost:8081/cgi-bin/koha/members/pay.pl?borrowernumber=51

I see the new tabs on checkouts tab, but the 'old' tabs with rounded corners (!) on the accounting tab.
Comment 27 Katrin Fischer 2022-11-10 22:55:10 UTC
It looks like .statictabs might be to blame?
Comment 28 Martin Renvoize 2022-11-11 08:00:20 UTC
I missed this.. anyone care to remind me why we have statictabs?  There's a few occurrences and I can't remember how they differ from other tab classes
Comment 29 Owen Leonard 2022-11-11 13:59:10 UTC
statictabs were necessary at the time because there wasn't a good way to implement jQueryUI tabs when the tabs linked to other pages. It seems likely that Bootstrap will can do better.
Comment 30 Martin Renvoize 2022-11-12 08:13:58 UTC
Thanks for the reminder Owen, Koha's got so much history now I forget how things work sometimes ;P..

I see you've opened bug 32182 to resolve this piece, awesome :)
Comment 31 Owen Leonard 2023-09-29 11:27:37 UTC
Depends on Bug 30952 - New design for staff interface, not in 22.05.x.