[Bug 31759] New: Tabs vs Pills
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Bug ID: 31759 Summary: Tabs vs Pills Change sponsored?: --- Product: Koha Version: unspecified Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff Client Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@ptfs-europe.com QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com 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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |30952 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30952 [Bug 30952] New design for staff interface -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 141892 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=141892&action=edit Bug 31759: Tabs vs Pills - Test pills design This patch depends on Bug 30487. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #2 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 141895 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=141895&action=edit Screenshot -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #3 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #4 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 141896 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=141896&action=edit SCreenshot tabs -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #141895|Screenshot |Screenshot pills description| | -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #141896|SCreenshot tabs |Screenshot tabs description| | -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com --- Comment #5 from David Nind <david@davidnind.com> --- 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). -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #6 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- (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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #7 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #8 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=31815 -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |31815 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31815 [Bug 31815] Remove round corners from tabbed sections -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au --- Comment #9 from David Cook <dcook@prosentient.com.au> --- 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? -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #10 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #11 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 142681 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=142681&action=edit 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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com --- Comment #12 from Lucas Gass <lucas@bywatersolutions.com> --- (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! -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #13 from David Nind <david@davidnind.com> --- +1 from me as well -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #14 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Comment on attachment 142681 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=142681 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) -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #15 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 142716 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=142716&action=edit 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. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #16 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Comment on attachment 142716 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=142716 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? -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #17 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- OK.. so people don't like the header idea. In which case... -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #18 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 143394 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=143394&action=edit Next How does this look? -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #19 from Owen Leonard <oleonard@myacpl.org> --- (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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Version|unspecified |master Assignee|koha-bugs@lists.koha-commun |oleonard@myacpl.org |ity.org | Component|Staff Client |Templates -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #20 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Comment on attachment 143394 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=143394 Next +1 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #21 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 143585 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=143585&action=edit Bug 37159: Testing alternate tab style -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #22 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Created attachment 143694 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=143694&action=edit 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...). 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #143585|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #141892|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #141895|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #141896|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #142681|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #142716|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #143394|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off --- Comment #23 from 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|Tabs vs Pills |Improve styling of tabs -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #143694|0 |1 is obsolete| | --- Comment #24 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 143697 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=143697&action=edit 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...). 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Tomás Cohen Arazi <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |22.11.00 released in| | Status|Passed QA |Pushed to master -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #25 from Tomás Cohen Arazi <tomascohen@gmail.com> --- Pushed to master for 22.11. Nice work everyone, thanks! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #26 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |additional_work_needed -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #27 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- It looks like .statictabs might be to blame? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #28 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #29 from Owen Leonard <oleonard@myacpl.org> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=32182 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 --- Comment #30 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- 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 :) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |32182 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32182 [Bug 32182] Replace static tabs markup with Bootstrap -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Tomás Cohen Arazi <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |tomascohen@gmail.com Keywords|additional_work_needed | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |RESOLVED Resolution|--- |FIXED --- Comment #31 from Owen Leonard <oleonard@myacpl.org> --- Depends on Bug 30952 - New design for staff interface, not in 22.05.x. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31759 Bug 31759 depends on bug 30952, which changed state. Bug 30952 Summary: New design for staff interface https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30952 What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to main |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org