[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][UX] Improved display of the Tiki help window on all screen sizes
"luci \(@luciash\) via TikiWiki-cvs" <[email protected]>
| Newsgroups | gmane.comp.cms.tiki.cvs |
|---|---|
| Message-ID | <68d255b93718e_2c421ec0c1655a@gitlab-sidekiq-low-urgency-cpu-bound-v2-75d8c6998-xrltr.mail> |
luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki
Commits:
35d547d7 by Yves Ngalamulume at 2025-09-23T08:01:27+00:00
[ENH][UX] Improved display of the Tiki help window on all screen sizes
---
* [FIX] Original wiki help content and layout, add CSS masonry for responsive columns
* [ENH] Added 'modal-dialog-scrollable' class to improve modal scrolling
* [ENH] Refactor modal content display to use Bootstrap cards for better layout and responsiveness.
* [ENH] Refactor modal content display to use Bootstrap cards for better layout and responsiveness.
* [ENH] Refactor modal content display to use Bootstrap cards for better layout and responsiveness.
* [ENH] The Tiki syntax help overlay should be displayed in columns on large screens to avoid scrolling.
See merge request tikiwiki/tiki!8139
- - - - -
3 changed files:
- lib/jquery_tiki/tiki-jquery.js
- templates/tiki-edit_help.tpl
- themes/base_files/scss/_tiki-miscellaneous_global.scss
Changes:
=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -3536,9 +3536,9 @@ $.openModal = function (options) {
}
if (options.size) {
- $modal.find('.modal-dialog').addClass(options.size);
+ $modal.find('.modal-dialog').addClass(options.size + ' modal-dialog-scrollable');
$modal.one('hidden.bs.modal', function () {
- $('.modal-dialog', this).removeClass(options.size);
+ $('.modal-dialog', this).removeClass(options.size + ' modal-dialog-scrollable');
});
}
=====================================
templates/tiki-edit_help.tpl
=====================================
@@ -4,8 +4,8 @@
{if $prefs.feature_help eq 'y'}
{remarksbox type="info"}
- {tr}More information:{/tr} <a href="{$prefs.helpurl}Wiki-Page-Editor" target="tikihelp" class="tikihelp alert-link" title="{tr}Wiki Page Editor:{/tr} {tr}More help on editing wiki pages{/tr}">
- {tr}Wiki Page Editor{/tr} {icon name="link-external" istyle="font-size: 70%"}
+ {tr}More information:{/tr} <a href="{$prefs.helpurl}Wiki-Page-Editor" target="tikihelp" class="tikihelp alert-link" title="{tr}Wiki Page Editor:{/tr} {tr}More help on editing wiki pages{/tr}">
+ {tr}Wiki Page Editor{/tr} {icon name="link-external" istyle="font-size: 70%"}
</a>
{tr}and{/tr}
<a href="{$prefs.helpurl}Wiki-syntax" target="tikihelp" class="tikihelp alert-link" title="{tr}Wiki Syntax:{/tr} {tr}The syntax system used for creating pages in Tiki{/tr}">
@@ -13,185 +13,58 @@
</a>
{/remarksbox}
{/if}
-<table class="table table-condensed table-hover">
+
+<div class="wiki-help-masonry">
{if (!isset($wysiwyg) or $wysiwyg ne 'y') or (isset($wysiwyg) and $wysiwyg eq 'y' and $prefs.wysiwyg_wiki_parsed eq 'y')}
- <tr>
- <td>
- {icon name='bold'} <strong>{tr}Bold text{/tr}</strong> __{tr}text{/tr}__
- </td>
- </tr>
- <tr>
- <td>
- {icon name='italic'} <strong>{tr}Italic text{/tr}</strong> 2 {tr}single quotes{/tr} ('). '"{tr}text{/tr}"'
- </td>
- </tr>
- <tr>
- <td>
- {icon name='underline'} <strong>{tr}Underlined text{/tr}</strong> ==={tr}text{/tr}===
- </td>
- </tr>
- <tr>
- <td>
- {icon name='font' istyle='color:red'} <strong>{tr}Colored text{/tr}</strong> <br/> ~~#FFEE33:{tr}text{/tr}~~ {tr}or{/tr} ~~yellow:{tr}text{/tr}~~. {tr}Will display using the indicated HTML color or color name. Color name can contain two colors separated by a comma. In this case, the first color would be the foreground and the second one the background.{/tr}
- </td>
- </tr>
- <tr>
- <td>
- {icon name='strikethrough'} <strong>{tr}Deleted text{/tr}</strong> {tr}2 dashes{/tr} "-". --{tr}text{/tr}--
- </td>
- </tr>
- <tr>
- <td>
- {icon name='h1'} <strong>{tr}Headings{/tr}</strong> <br/> !heading1, !!heading2, !!!heading3
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Show/Hide{/tr}</strong> <br/> !+, !!- {tr}show/hide heading section. + (shown) or - (hidden) by default{/tr}.
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Autonumbered Headings{/tr}</strong> <br/> !#, !!#, !+#, !-# ...
- </td>
- </tr>
- {/if}{* wysiwyg *}
- <tr>
- <td>
- <strong>{tr}Table of contents{/tr}</strong> <br/>{tr}{literal}{toc}{/literal}, {literal}{maketoc}{/literal} prints out a table of contents for the current page based on structures (toc) or ! headings (maketoc){/tr}. {tr}Common optional parameters for maketoc are: title|maxdepth|levels|nums, and for toc are: order|showdesc|shownum|structId|maxdepth|pagename.{/tr}
- </td>
- </tr>
+ <div class="help-item">{icon name='bold'} <strong>{tr}Bold text{/tr}</strong> __{tr}text{/tr}__</div>
+ <div class="help-item">{icon name='italic'} <strong>{tr}Italic text{/tr}</strong> 2 {tr}single quotes{/tr} ('). '"{tr}text{/tr}"'</div>
+ <div class="help-item">{icon name='underline'} <strong>{tr}Underlined text{/tr}</strong> ==={tr}text{/tr}===</div>
+ <div class="help-item">{icon name='font' istyle='color:red'} <strong>{tr}Colored text{/tr}</strong> <br/> ~~#FFEE33:{tr}text{/tr}~~ {tr}or{/tr} ~~yellow:{tr}text{/tr}~~. {tr}Will display using the indicated HTML color or color name. Color name can contain two colors separated by a comma. In this case, the first color would be the foreground and the second one the background.{/tr}</div>
+ <div class="help-item">{icon name='strikethrough'} <strong>{tr}Deleted text{/tr}</strong> --{tr}text{/tr}--</div>
+ <div class="help-item">{icon name='h1'} <strong>{tr}Headings{/tr}</strong> <br/> !heading1, !!heading2, !!!heading3</div>
+ <div class="help-item"><strong>{tr}Show/Hide{/tr}</strong> <br/> !+, !!- {tr}show/hide heading section. + (shown) or - (hidden) by default{/tr}.</div>
+ <div class="help-item"><strong>{tr}Autonumbered Headings{/tr}</strong> <br/> !#, !!#, !+#, !-# ...</div>
+ {/if}
+ <div class="help-item"><strong>{tr}Table of contents{/tr}</strong> <br/>{tr}{literal}{toc}{/literal}, {literal}{maketoc}{/literal} prints out a table of contents for the current page based on structures (toc) or ! headings (maketoc){/tr}. {tr}Common optional parameters for maketoc are: title|maxdepth|levels|nums, and for toc are: order|showdesc|shownum|structId|maxdepth|pagename.{/tr}</div>
{if (!isset($wysiwyg) or $wysiwyg ne 'y') or (isset($wysiwyg) and $wysiwyg eq 'y' and $prefs.wysiwyg_wiki_parsed eq 'y')}
- <tr>
- <td>
- {icon name='horizontal-rule'} <strong>{tr}Horizontal rule{/tr}</strong> -<em></em>-<em></em>-<em></em>-
- </td>
- </tr>
- <tr>
- <td>
- {icon name='box'} <strong>{tr}Text box{/tr}</strong> ^{tr}Box content{/tr}^
- </td>
- </tr>
- <tr>
- <td>
- {icon name='align-center'} <strong>{tr}Centered text{/tr}</strong> {if $prefs.feature_use_three_colon_centertag eq 'y'}:::{tr}text:::{/tr}{else}::{tr}text::{/tr}{/if}
- </td>
- </tr>
- {/if}{* wysiwyg *}
- <tr>
- <td>
- {icon name='cog'} <strong>{tr}Dynamic variables{/tr}</strong> <br/> %{tr}Name{/tr}% {tr}Inserts an editable variable{/tr}
- </td>
- </tr>
- <tr>
- <td>
- {icon name='link-external'} <strong>{tr}External links{/tr}</strong> <br/> {tr}use square brackets for an external link: [URL], [URL|link_description],[URL|link_description|relation] or [URL|description|relation|nocache] (that last prevents the local Wiki from caching the linked page; relation can be used to insert rel attribute for the link - useful e.g. for shadowbox).{/tr}<br>{tr}For an external Wiki, use ExternalWikiName:PageName or ((External Wiki Name: Page Name)){/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Square Brackets{/tr}</strong> <br/> {tr}Use [[foo] to show [foo].{/tr}
- </td>
- </tr>
- <tr>
- <td>
- {icon name='link'} <strong>{tr}Wiki references{/tr}</strong> <br/> {if $prefs.feature_wikiwords eq 'y'}{tr}JoinCapitalizedWords or use{/tr} {/if}(({tr}page{/tr})) {tr}or{/tr} (({tr}page|description{/tr})) {tr}for wiki references{/tr}
- {if $prefs.wikiplugin_alink eq 'y'}
- , (({tr}page|#anchor{/tr})) {tr}or{/tr} (({tr}page|#anchor|desc{/tr})) {tr}for wiki heading/anchor references{/tr}
- {/if}
- {if $prefs.feature_wikiwords eq 'y'}, )){tr}SomeName{/tr}(( {tr}prevents referencing{/tr}{/if}
- </td>
- </tr>
+ <div class="help-item">{icon name='horizontal-rule'} <strong>{tr}Horizontal rule{/tr}</strong> ----</div>
+ <div class="help-item">{icon name='box'} <strong>{tr}Text box{/tr}</strong> ^{tr}Box content{/tr}^</div>
+ <div class="help-item">{icon name='align-center'} <strong>{tr}Centered text{/tr}</strong> {if $prefs.feature_use_three_colon_centertag eq 'y'}:::{tr}text:::{/tr}{else}::{tr}text::{/tr}{/if}</div>
+ {/if}
+ <div class="help-item">{icon name='cog'} <strong>{tr}Dynamic variables{/tr}</strong> <br/> %{tr}Name{/tr}% {tr}Inserts an editable variable{/tr}</div>
+ <div class="help-item">{icon name='link-external'} <strong>{tr}External links{/tr}</strong> <br/> {tr}use square brackets for an external link: [URL], [URL|link_description],[URL|link_description|relation] or [URL|description|relation|nocache]{/tr}</div>
+ <div class="help-item"><strong>{tr}Square Brackets{/tr}</strong> <br/> {tr}Use [[foo] to show [foo].{/tr}</div>
+ <div class="help-item">{icon name='link'} <strong>{tr}Wiki references{/tr}</strong> <br/>(({tr}page{/tr})) {tr}or{/tr} (({tr}page|description{/tr})) {tr}for wiki references{/tr}</div>
{if (!isset($wysiwyg) or $wysiwyg ne 'y') or (isset($wysiwyg) and $wysiwyg eq 'y' and $prefs.wysiwyg_wiki_parsed eq 'y')}
- <tr>
- <td>
- {icon name='list'} {icon name='list-numbered'} <strong>{tr}Lists{/tr}</strong> <br> * {tr}for bullet lists,{/tr} # {tr}for numbered lists,{/tr} ;{tr}Word:{/tr}{tr}definition{/tr} {tr}for definiton lists{/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Indentation{/tr}</strong> <br/>+, ++ {tr}Creates an indentation for each plus (useful in list to continue at the same level){/tr}
- </td>
- </tr>
- {if $prefs.feature_wiki_tables eq 'new'}
- <tr>
- <td>
- {icon name='table'} <strong>{tr}Tables{/tr}</strong> <br/> || {tr}row{/tr}1-{tr}col{/tr}1 | {tr}row{/tr}1-{tr}col{/tr}2 | {tr}row{/tr}1-{tr}col{/tr}3<br>{tr}row{/tr}2-{tr}col{/tr}1 | {tr}row{/tr}2-{tr}col{/tr}2 | {tr}row{/tr}2-{tr}col{/tr}3 ||
- </td>
- </tr>
- {else}
- <tr>
- <td>
- {icon name='table'} <strong>{tr}Tables{/tr}</strong> <br/> ||{tr}row{/tr}1-{tr}col{/tr}1|{tr}row{/tr}1-{tr}col{/tr}2|{tr}row{/tr}1-{tr}col{/tr}3||{tr}row{/tr}2-{tr}col{/tr}1|{tr}row{/tr}2-{tr}col{/tr}2|{tr}row{/tr}2-{tr}col{/tr}3||
- </td>
- </tr>
- {/if}
- <tr>
- <td>
- {icon name='title'} <strong>{tr}Title bar{/tr}</strong> -={tr}Title{/tr}=-
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Monospace font{/tr}</strong> -+{tr}Code sample{/tr}+-
- </td>
- </tr>
- {/if}{* wysiwyg *}
- <tr>
- <td>
- <strong>{tr}Line break{/tr}</strong> <br/>%%% {tr}(very useful especially in tables){/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Multi-page pages{/tr}</strong> <br/>{tr}Use{/tr} ...page... {tr}to separate pages{/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Non-parsed sections{/tr}</strong> <br/> ~np~ {tr}data{/tr} ~/np~ {tr}Prevents wiki parsing of the enclosed data.{/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Preformated sections{/tr}</strong> <br/> {tr}~pp~ data ~/pp~ Displays preformated text/code; no Wiki processing is done inside these sections (as with np), and the spacing is fixed (no word wrapping is done). ~pre~ data ~/pre~ also displayes preformatted text with fixed spacing, but wiki processing still occurs on the text.{/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Comments{/tr}</strong> <br/> {tr}~tc~ Tiki Comment ~/tc~ makes a Tiki comment. It will be completely removed from the display, but saved in the file for future reference. ~hc~ HTML Comment ~/hc~ makes an HTML comment. It will be inserted as a comment in the output HTML; these are not normally displayed in browsers, but can be seen using "View Source" or similar.{/tr}
- </td>
- </tr>
+ <div class="help-item">{icon name='list'} {icon name='list-numbered'} <strong>{tr}Lists{/tr}</strong> <br> * {tr}for bullet lists,{/tr} # {tr}for numbered lists,{/tr} ;{tr}Word:{/tr}{tr}definition{/tr} {tr}for definiton lists{/tr}</div>
+ <div class="help-item"><strong>{tr}Indentation{/tr}</strong> <br/>+, ++ {tr}Creates an indentation for each plus (useful in list to continue at the same level){/tr}</div>
+ <div class="help-item">{icon name='table'} <strong>{tr}Tables{/tr}</strong> <br/> || {tr}row{/tr}1-{tr}col{/tr}1 | {tr}row{/tr}1-{tr}col{/tr}2 | {tr}row{/tr}1-{tr}col{/tr}3<br>{tr}row{/tr}2-{tr}col{/tr}1 | {tr}row{/tr}2-{tr}col{/tr}2 | {tr}row{/tr}2-{tr}col{/tr}3 ||</div>
+ <div class="help-item">{icon name='title'} <strong>{tr}Title bar{/tr}</strong> -={tr}Title{/tr}=-</div>
+ <div class="help-item"><strong>{tr}Monospace font{/tr}</strong> -+{tr}Code sample{/tr}+-</div>
+ {/if}
+ <div class="help-item"><strong>{tr}Line break{/tr}</strong> <br/>%%% {tr}(very useful especially in tables){/tr}</div>
+ <div class="help-item"><strong>{tr}Multi-page pages{/tr}</strong> <br/>{tr}Use{/tr} ...page... {tr}to separate pages{/tr}</div>
+ <div class="help-item"><strong>{tr}Non-parsed sections{/tr}</strong> <br/> ~np~ {tr}data{/tr} ~/np~</div>
+ <div class="help-item"><strong>{tr}Preformated sections{/tr}</strong> <br/> {tr}~pp~ data ~/pp~ Displays preformated text/code; no Wiki processing is done inside these sections{/tr}</div>
+ <div class="help-item"><strong>{tr}Comments{/tr}</strong> <br/> {tr}~tc~ Tiki Comment ~/tc~ makes a Tiki comment. ~hc~ HTML Comment ~/hc~{/tr}</div>
{if $prefs.feature_wiki_monosp eq 'y'}
- <tr>
- <td>
- <strong>{tr}Block Preformatting{/tr}</strong> <br/> {tr}Indent text with any number of spaces to change it to a monospaced block that still follows other Wiki formatting instructions. It will be indented with the same number of spaces that are used. Note that this mode does not preserve exact spacing and line breaks; use ~pp~...~/pp~ for that.{/tr}
- </td>
- </tr>
+ <div class="help-item"><strong>{tr}Block Preformatting{/tr}</strong> <br/> {tr}Indent text with any number of spaces to change it to a monospaced block{/tr}</div>
{/if}
- <tr>
- <td>
- <strong>{tr}Direction{/tr}</strong> <br/>{literal}{r2l}{/literal}, {literal}{l2r}{/literal}, {literal}{rm}{/literal}, {literal}{lm}{/literal}{tr}Controls text direction: creates DIV blocks for right-to-left or left-to-right text, and direction markers useful for languages like Arabic and Hebrew.{/tr}
- </td>
- </tr>
- <tr>
- <td>
- <strong>{tr}Special characters{/tr}</strong> <br/>
- {literal}~hs~{/literal} {tr}hard space,{/tr}
- {literal}~c~{/literal} ©,
- {literal}~amp~{/literal} &,
- {literal}~lt~{/literal} <,
- {literal}~gt~{/literal} >,
- {literal}~ldq~{/literal} “,
- {literal}~rdq~{/literal} ”,
- {literal}~lsq~{/literal} ‘,
- {literal}~rsq~{/literal} ’,
- {literal}~--~{/literal} —,
- {literal}~bs~{/literal} \,
- {tr}numeric between ~ for HTML numeric characters entity{/tr}
- </td>
- </tr>
-</table>
+ <div class="help-item"><strong>{tr}Direction{/tr}</strong> <br/>{literal}{r2l}{/literal}, {literal}{l2r}{/literal}, {literal}{rm}{/literal}, {literal}{lm}{/literal}{tr}Controls text direction{/tr}</div>
+ <div class="help-item"><strong>{tr}Special characters{/tr}</strong> <br/>
+ {literal}~c~{/literal} ©,
+ {literal}~amp~{/literal} &,
+ {literal}~lt~{/literal} <,
+ {literal}~gt~{/literal} >,
+ {literal}~ldq~{/literal} “,
+ {literal}~rdq~{/literal} ”,
+ {literal}~lsq~{/literal} ‘,
+ {literal}~rsq~{/literal} ’,
+ {literal}~--~{/literal} —,
+ {literal}~bs~{/literal} \,
+ {tr}numeric between ~ for HTML numeric characters entity{/tr}
+ </div>
+</div>
{if $prefs.feature_wiki_paragraph_formatting eq 'y'}
{remarksbox type="info" title="{tr}Note{/tr}" close="n"}
=====================================
themes/base_files/scss/_tiki-miscellaneous_global.scss
=====================================
@@ -895,3 +895,39 @@ ul.sm-horizontal {
display: block;
}
}
+
+// Wiki help masonry layout
+.wiki-help-masonry {
+ column-count: 1;
+ column-gap: 1rem;
+ width: 100%;
+ overflow: hidden;
+}
+
+// Each help item is a card-like box
+.help-item {
+ display: inline-block;
+ width: 100%;
+ break-inside: avoid;
+ margin-bottom: 1rem;
+ padding: 0.75rem;
+ background: #f8f9fa;
+ border: 1px solid #ddd;
+ border-radius: 0.25rem;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+ word-wrap: break-word;
+}
+
+// Ensure tables, pre, and code blocks within help items are responsive
+.help-item table,
+.help-item pre,
+.help-item code {
+ max-width: 100%;
+ overflow-x: auto;
+ display: block;
+}
+
+// Responsive column counts based on viewport width
+@media (min-width: 576px) { .wiki-help-masonry { column-count: 2; } }
+@media (min-width: 992px) { .wiki-help-masonry { column-count: 3; } }
+@media (min-width: 1400px) { .wiki-help-masonry { column-count: 4; } }
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/35d547d7acfd1b1577b184716992f0b5514f2509
--
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/35d547d7acfd1b1577b184716992f0b5514f2509
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