[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Improved sidebar code on small screens.

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
ba470e80 by NasserNgandu at 2025-08-04T22:37:17+00:00
[ENH] Improved sidebar code on small screens.
---
* [FIX] Using Bootstrap Classes.

* [ENH] Improved sidebar code on small screens.

See merge request tikiwiki/tiki!7951

- - - - -


9 changed files:

- lib/jquery_tiki/tiki-jquery.js
- lib/prefs/module.php
- templates/admin/include_look.tpl
- templates/admin/include_module.tpl
- templates/layouts/basic/layout_view.tpl
- templates/layouts/classic/layout_view.tpl
- templates/layouts/social/layout_view.tpl
- + templates/modules/mod-side_col_toggle_small_screen.tpl
- tiki-admin_modules.php


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -2859,7 +2859,7 @@ $(function () {
 
     $(".toggle_zone").on("click", function () {
         var $this = $(this), zone="",
-            icon_left = "toggle-left", icon_right = "toggle-right", sidebar_one_side = "";
+        icon_left = "toggle-left", icon_right = "toggle-right", icon_small_screen_down = "arrow-down", icon_small_screen_up = "arrow-up", sidebar_one_side = "";
 
         if ($this.is(".right")) {
             zone = "right";
@@ -2875,10 +2875,16 @@ $(function () {
             $(".side-col-toggle" + sidebar_one_side + " ." + zone).find(".icon").setIcon(icon_right);
             setCookie("hide_zone_" + zone, 'y', "", "session", window.tikiCookieConstants.BUILTIN_COOKIE_CATEGORY_FUNCTIONAL);
             $("body").addClass("hide_zone_" + zone);
+            if ($(".side-col-toggle-small-screen ." + zone).find(".icon").length) {
+                $(".side-col-toggle-small-screen ." + zone).find(".icon").setIcon(icon_small_screen_up);
+            }
         } else {
             $(".side-col-toggle" + sidebar_one_side + " ." + zone).find(".icon").setIcon(icon_left);
             deleteCookie("hide_zone_" + zone);
             $("body").removeClass("hide_zone_" + zone);
+            if ($(".side-col-toggle-small-screen ." + zone).find(".icon").length) {
+                $(".side-col-toggle-small-screen ." + zone).find(".icon").setIcon(icon_small_screen_down);
+            }
         }
 
         $(window).trigger("resize");


=====================================
lib/prefs/module.php
=====================================
@@ -92,5 +92,11 @@ function prefs_module_list()
             'filter' => 'alpha',
             'default' => [],
         ],
+        'module_sidebar_toggle_small_screen' => [
+            'name' => tra('Sidebar toggle button for small screens'),
+            'type' => 'flag',
+            'description' => tr("Allows you to add sidebar toggle to small screens."),
+            'default' => 'n',
+        ],
     ];
 }


=====================================
templates/admin/include_look.tpl
=====================================
@@ -169,6 +169,7 @@
                     <br>
                     {preference name=module_file}
                     {preference name=module_zone_available_extra}
+                    {preference name=module_sidebar_toggle_small_screen}
                 </fieldset>
             </div>
             <hr>


=====================================
templates/admin/include_module.tpl
=====================================
@@ -39,6 +39,7 @@
                 <hr>
                 {preference name=module_file}
                 {preference name=module_zone_available_extra}
+                {preference name=module_sidebar_toggle_small_screen}
             </fieldset>
         </div>
 


=====================================
templates/layouts/basic/layout_view.tpl
=====================================
@@ -81,17 +81,12 @@
                 {/if}
             </div>
             <div class="col col3 col-12 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if}" id="col3">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_right_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                     {/if}
+                    {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
             </div>
         </div>
         {elseif zone_is_empty('right') or $prefs.feature_right_column eq 'n'}
@@ -125,17 +120,12 @@
                 {/if}
             </div>
             <div class="col col2 col-12 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if} order-sm-2 order-md-2 order-lg-1" id="col2">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_left_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                     {/if}
+                    {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
             </div>
         {else}
             <div class="col col1 col-sm-12 col-lg-8 order-xs-1 order-lg-2 pb-4" id="col1">
@@ -176,30 +166,20 @@
                 {/if}
             </div>
             <div class="col col2 col-12 col-md-6 col-lg-2 order-md-2 order-lg-1" id="col2">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_left_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                     {/if}
+                    {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
             </div>
             <div class="col col3 col-12 col-md-6 col-lg-2 order-md-3" id="col3">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_right_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                     {/if}
+                    {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
             </div>
         {/if}
     </div>


=====================================
templates/layouts/classic/layout_view.tpl
=====================================
@@ -93,17 +93,12 @@
                         {if $prefs.feature_layoutshadows eq 'y'}{eval var=$prefs.center_shadow_end}</div>{/if}
                     </div>
                     <div class="col col3 col-12 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if}" id="col3">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_right_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                             {/if}
+                            {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                     </div>
                 {elseif zone_is_empty('right') or $prefs.feature_right_column eq 'n'}
                     <div class="col col1 col-md-12 col-lg-9 {if $prefs.feature_fixed_width neq 'y'}col-xl-10{/if} order-md-1 order-lg-2 pb-4" id="col1">
@@ -139,17 +134,12 @@
                     </div>
                     {if $prefs.feature_layoutshadows eq 'y'}{eval var=$prefs.center_shadow_end}</div>{/if}
                     <div class="col col2 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if} order-sm-2 order-md-2 order-lg-1" id="col2">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_left_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                             {/if}
+                            {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                     </div>
                 {else}
                     <div class="col col1 col-sm-12 col-lg-8 order-xs-1 order-lg-2 pb-4" id="col1">
@@ -192,30 +182,20 @@
                             {if $prefs.feature_layoutshadows eq 'y'}{eval var=$prefs.center_shadow_end}</div>{/if}
                     </div>
                     <div class="col col2 col-12 col-md-6 col-lg-2 order-md-2 order-lg-1" id="col2">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_left_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                             {/if}
+                            {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                     </div>
                     <div class="col col3 col-12 col-md-6 col-lg-2 order-md-3" id="col3">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_right_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                             {/if}
+                            {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                     </div>
                 {/if}
             </div>


=====================================
templates/layouts/social/layout_view.tpl
=====================================
@@ -93,17 +93,12 @@
                         {/if}
                     </div>
                     <div class="col col3 col-12 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if}" id="col3">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_right_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                             {/if}
+                            {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                     </div>
                 </div>
                     {elseif zone_is_empty('right') or $prefs.feature_right_column eq 'n'}
@@ -137,17 +132,12 @@
                         {/if}
                     </div>
                     <div class="col col2 col-12 col-md-6 col-lg-3 {if $prefs.feature_fixed_width neq 'y'}col-xl-2{/if} order-sm-2 order-md-2 order-lg-1" id="col2">
-                        <div class="d-block d-lg-none">
-                            {if $prefs.feature_left_column eq 'user'}
-                                <div class="side-col-toggle-small-screen">
-                                    <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                        {$icon_name = 'arrow-down-up-across-line'}
-                                        {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                                    </span>
-                                </div>
+                        <div class="p-1 bg-light">
+                            {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                                {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                             {/if}
+                            {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                         </div>
-                        {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                     </div>
                 {else}
             <div class="col col1 col-sm-12 col-lg-8 order-xs-1 order-lg-2 pb-4" id="col1">
@@ -188,30 +178,20 @@
                 {/if}
             </div>
             <div class="col col2 col-12 col-md-6 col-lg-2 order-md-2 order-lg-1" id="col2">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_left_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone left btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='left'}
                     {/if}
+                    {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
             </div>
             <div class="col col3 col-12 col-md-6 col-lg-2 order-md-3" id="col3">
-                <div class="d-block d-lg-none">
-                    {if $prefs.feature_right_column eq 'user'}
-                        <div class="side-col-toggle-small-screen">
-                            <span class='toggle_zone right btn btn-sm btn-secondary'>
-                                {$icon_name = 'arrow-down-up-across-line'}
-                                {tr}Collapse/expand modules below{/tr} {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
-                            </span>
-                        </div>
+                <div class="p-1 bg-light">
+                    {if $prefs.module_sidebar_toggle_small_screen eq 'y'}
+                        {include file="modules/mod-side_col_toggle_small_screen.tpl" zone='right'}
                     {/if}
+                    {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
                 </div>
-                {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}' role=complementary}
             </div>
                 {/if}
             </div> {* row *}


=====================================
templates/modules/mod-side_col_toggle_small_screen.tpl
=====================================
@@ -0,0 +1,23 @@
+{if isset($zone) && $zone == 'left'}
+    <div class="d-block d-lg-none">
+        {if $prefs.feature_left_column eq 'user'}
+            <div class="side-col-toggle-small-screen">
+                <span class='toggle_zone left btn btn-sm btn-secondary'>
+                    {$icon_name = (not empty($smarty.cookies.hide_zone_left)) ? 'arrow-up' : 'arrow-down'}
+                    {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle left modules{/tr}'}
+                </span>
+            </div>
+        {/if}
+    </div>
+{elseif isset($zone) && $zone == 'right'}
+    <div class="d-block d-lg-none">
+        {if $prefs.feature_right_column eq 'user'}
+            <div class="side-col-toggle-small-screen">
+                <span class='toggle_zone right btn btn-sm btn-secondary'>
+                    {$icon_name = (not empty($smarty.cookies.hide_zone_left)) ? 'arrow-up' : 'arrow-down'}
+                    {icon class="text-sm text-white" name=$icon_name href='#' title='{tr}Toggle right modules{/tr}'}
+                </span>
+            </div>
+        {/if}
+    </div>
+{/if}


=====================================
tiki-admin_modules.php
=====================================
@@ -548,6 +548,7 @@ $prefs['feature_left_column'] = 'fixed';
 $prefs['feature_right_column'] = 'fixed';
 $prefs['module_zones_pagebottom'] = 'fixed';
 $prefs['module_zones_bottom'] = 'fixed';
+$prefs['module_sidebar_toggle_small_screen'] = 'fixed';
 
 $headerlib->add_css(
     '.module:hover {' . ' cursor: move;' . ' background-color: #ffa;' . ' }'



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/ba470e80ee0c66444ac7a3ff195b9dec88b2c22c

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/ba470e80ee0c66444ac7a3ff195b9dec88b2c22c
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs