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.
Created attachment 141892 [details] [review] Bug 31759: Tabs vs Pills - Test pills design This patch depends on Bug 30487.
Created attachment 141895 [details] Screenshot pills
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.
Created attachment 141896 [details] Screenshot tabs
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).
(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.
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.
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.
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?
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.
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.
(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!
+1 from me as well
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)
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 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?
OK.. so people don't like the header idea. In which case...
Created attachment 143394 [details] Next How does this look?
(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 on attachment 143394 [details] Next +1
Created attachment 143585 [details] [review] Bug 37159: Testing alternate tab style
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>
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
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>
Pushed to master for 22.11. Nice work everyone, thanks!
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.
It looks like .statictabs might be to blame?
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
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.
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 :)
Depends on Bug 30952 - New design for staff interface, not in 22.05.x.