In preparation for an upgrade to Bootstrap 5 I propose that we try to abstract the way we build some components. This will help reduce the number of template changes required during the update. Using Template::Toolkit WRAPPERs we can create the structural components for tabs separately from the tab content: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels This can be done gradually before the Bootstrap upgrade without causing any disruption.
Created attachment 145059 [details] [review] Bug 32571: Use template wrapper to build tabbed components This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so that templates can build tabbed components while keeping tab structural markup separate. Each individual component of a Bootstrap tabbed interface is defined: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels Included is a usage example: [ WRAPPER tabs id= "tabs container id" ] [ WRAPPER tabs_nav ] [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ] [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ] ... [ END ] [ WRAPPER tab_panels ] [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ] [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ] ... [ END ] [ END ]
Created attachment 145060 [details] [review] Bug 32571: (follow-up) Implement abstracted tabs on About page This patch implements the proposed system for building tabs on the About page. To test, apply the patch and view the About page. It should look the same as before and all tabs should function correctly.
Created attachment 145075 [details] [review] Bug 32571: Use template wrapper to build tabbed components This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so that templates can build tabbed components while keeping tab structural markup separate. Each individual component of a Bootstrap tabbed interface is defined: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels Included is a usage example: [ WRAPPER tabs id= "tabs container id" ] [ WRAPPER tabs_nav ] [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ] [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ] ... [ END ] [ WRAPPER tab_panels ] [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ] [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ] ... [ END ] [ END ] Signed-off-by: David Nind <david@davidnind.com>
Created attachment 145076 [details] [review] Bug 32571: (follow-up) Implement abstracted tabs on About page This patch implements the proposed system for building tabs on the About page. To test, apply the patch and view the About page. It should look the same as before and all tabs should function correctly. Signed-off-by: David Nind <david@davidnind.com>
Testing notes (using KTD): 1. Everything looks OK to me after applying the patches and viewing the About page tabs.
Created attachment 145087 [details] [review] Bug 32571: Use template wrapper to build tabbed components This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so that templates can build tabbed components while keeping tab structural markup separate. Each individual component of a Bootstrap tabbed interface is defined: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels Included is a usage example: [ WRAPPER tabs id= "tabs container id" ] [ WRAPPER tabs_nav ] [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ] [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ] ... [ END ] [ WRAPPER tab_panels ] [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ] [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ] ... [ END ] [ END ] Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Created attachment 145529 [details] [review] Bug 32571: Use template wrapper to build tabbed components This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so that templates can build tabbed components while keeping tab structural markup separate. Each individual component of a Bootstrap tabbed interface is defined: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels Included is a usage example: [ WRAPPER tabs id= "tabs container id" ] [ WRAPPER tabs_nav ] [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ] [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ] ... [ END ] [ WRAPPER tab_panels ] [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ] [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ] ... [ END ] [ END ] Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Created attachment 145530 [details] [review] Bug 32571: (follow-up) Implement abstracted tabs on About page This patch implements the proposed system for building tabs on the About page. To test, apply the patch and view the About page. It should look the same as before and all tabs should function correctly. Signed-off-by: David Nind <david@davidnind.com>
Created attachment 145531 [details] [review] Bug 32571: (follow-up) Use more unique variable name to avoid collisions
Created attachment 145533 [details] [review] Bug 32571: (follow-up) Use more unique variable name to avoid collisions
Created attachment 146199 [details] [review] Bug 32571: Use template wrapper to build tabbed components This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so that templates can build tabbed components while keeping tab structural markup separate. Each individual component of a Bootstrap tabbed interface is defined: - Main tab container - Tab links container - Individual tab links - Tab panel container - Individual tab panels Included is a usage example: [ WRAPPER tabs id= "tabs container id" ] [ WRAPPER tabs_nav ] [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ] [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ] ... [ END ] [ WRAPPER tab_panels ] [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ] [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ] ... [ END ] [ END ] Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 146200 [details] [review] Bug 32571: (follow-up) Implement abstracted tabs on About page This patch implements the proposed system for building tabs on the About page. To test, apply the patch and view the About page. It should look the same as before and all tabs should function correctly. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 146201 [details] [review] Bug 32571: (follow-up) Use more unique variable name to avoid collisions Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Pushed to master for 23.05. Nice work everyone, thanks!
Nice work, thanks everyone! Pushed to 22.11.x for the next release.
Enhancement will not be backported to 22.05.x.
Shouldn't we add a coding guideline for this ?
(In reply to Fridolin Somers from comment #17) > Shouldn't we add a coding guideline for this ? I updated this page: https://wiki.koha-community.org/wiki/Interface_patterns#Tabs