Add tutorials for Modern Admin theme#1613
Merged
mambax7 merged 7 commits intoXOOPS:masterfrom Feb 17, 2026
Merged
Conversation
- USER_GUIDE.md: Installation, dashboard features, dark mode, sidebar, customizer panel, color presets, content tracking, layout options, module widgets setup, system info, FAQ - DEVELOPER_GUIDE.md: Architecture overview, request lifecycle, template system, CSS design tokens, JS architecture, widget system internals, data flow diagrams, customization recipes (new colors, charts, sidebar sections, SVG icons, header elements), i18n, performance notes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Convert all 7 ASCII art diagrams to Mermaid for better GitHub rendering: - Architecture overview → block-beta - Request lifecycle → flowchart - Widget discovery process → flowchart - Widget template rendering → graph - PHP→Smarty→JS data flow → sequence diagram - Customizer→Charts interaction → sequence diagram - Customizer→CSS interaction → sequence diagram Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add CodeRabbit's end-to-end sequence diagram showing inter-component communication during dashboard loading: Admin → Browser → Theme → WidgetLoader → Module → Database → Chart.js. Placed in the Request Lifecycle section as a complementary view to the existing flowchart. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Enrich the guide with visual diagrams throughout all major sections: - Template hierarchy: graph showing theme.tpl → all partials tree - CSS three-file strategy: flowchart of cascade layers - Dark mode toggle flow: sequence from click → cookie → CSS vars → charts - Sidebar state machine: desktop expanded/collapsed vs mobile hidden/overlay - Page layout structure: block diagram of header/sidebar/main/footer - Script load order: flowchart with dependency arrows - Adding a color preset: 3-step workflow across files - Adding a new chart: 4-step pipeline from PHP → template → JS - Widget deployment: copy → cache clear → auto-discover flow - Language constant flow: sequence from define() → Smarty → HTML - Database query distribution: flowchart showing query counts per method Total: 19 Mermaid diagrams (up from 9). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughAdds two new documentation files for the Modern Admin Theme: a Developer Guide detailing architecture, templates, CSS/JS, widgets, data flow, customization, testing, and performance; and a User Guide covering activation, dashboard features, Customizer, dark mode, and admin workflows. No code changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@htdocs/modules/system/themes/modern/docs/DEVELOPER_GUIDE.md`:
- Around line 555-562: The fenced code block listing functions (initCharts(),
initUserRegistrationChart(), initUserGroupChart(), initContentChart(),
rebuildContentChart(sel), updateChartsForTheme()) is missing a language
identifier; update the triple-backtick fence to include a language token (e.g.,
```text) so Markdownlint MD040 is satisfied and the snippet is correctly
recognized as plain text.
- Around line 570-573: The fenced code block listing applyColorScheme(theme) and
setCookie(name, val, days) lacks a language specifier which triggers
markdownlint MD040; update the block delimiter from ``` to specify a language
(for example ```text) so the snippet containing applyColorScheme and setCookie
is annotated (leave the contents unchanged), ensuring the MD block in
DEVELOPER_GUIDE.md is updated accordingly.
- Around line 284-295: Update the ordered list in DEVELOPER_GUIDE.md to use the
markdownlint MD029-compliant "1." prefix for every item: change the three list
item prefixes for "Create `xotpl/xo_mypartial.tpl`", "Include it in
`theme.tpl`", and "Assign any needed variables in `modern.php`" so they all
start with "1." rather than increasing numbers; keep the existing content and
code blocks unchanged.
- Around line 543-551: The fenced code block listing functions (initDarkMode,
initSidebarToggle, initHelpToggle, initMessages, setCookie, getCookie) lacks a
language identifier; update the block by adding a language tag such as "text" or
"txt" after the opening backticks (e.g., ```text) so Markdownlint MD040 is
satisfied, leaving the content and function names unchanged.
- Around line 1079-1088: The numbered list in DEVELOPER_GUIDE.md violates
markdownlint MD029 because items aren't sequential; update the four list
prefixes so they are sequential (1, 2, 3, 4) for the lines starting with "Create
`xotpl/xo_mypartial.tpl`", "Include it in `theme.tpl`...", "Assign any required
variables in `modern.php`", and "Clear Smarty cache after adding" so the list
numbers increment correctly and satisfy MD029.
- Around line 83-137: The fenced code block in DEVELOPER_GUIDE.md is missing a
language identifier (MD040); update the opening fence from ``` to something like
```text (or ```bash/```md as appropriate) so Markdownlint recognizes the block
language and stops flagging it; ensure any other fenced blocks in the same file
also include language identifiers.
In `@htdocs/modules/system/themes/modern/docs/USER_GUIDE.md`:
- Around line 269-272: The fenced code block in USER_GUIDE.md is missing a
language identifier (Markdownlint MD040); update the opening triple backticks to
include a language (e.g., ```text or ```bash) for the snippet that shows the
copy from/to paths referencing
modules/system/themes/modern/widgets/publisher/class/ModernThemeWidget.php and
modules/publisher/class/ModernThemeWidget.php so the block is properly linted.
- Around line 329-334: The sentence uses “again” twice in the same bullet pair;
edit the Modern theme help bullets to remove the duplicate by deleting the
redundant “again” in either “Click **Hide Help** to collapse it again” or “it
stays visible across pages until you hide it again” so the phrasing reads
smoothly (e.g., change the first to “Click **Hide Help** to collapse it” and
keep the persistence line as-is); update the USER_GUIDE.md bullets accordingly.
- Around line 392-405: The fenced code block listing config keys
(xoops_color_scheme, xoops_dark_mode, xoops_show_kpis, etc.) is missing a
language tag which triggers markdownlint MD040; update the block delimiter from
``` to ```text (or another appropriate language) so the block becomes a labeled
code fence containing the lines for xoops_color_scheme, xoops_dark_mode,
xoops_show_kpis, xoops_show_charts, xoops_show_widgets, xoops_show_system_info,
xoops_compact_sidebar, xoops_sidebar_icons, xoops_animations,
xoops_compact_view, xoops_content_modules, xoops_help_visible.
Comment on lines
1079
to
1088
| 1. Create `xotpl/xo_mypartial.tpl` with your Smarty markup | ||
| 2. Include it in `theme.tpl` at the desired position: | ||
|
|
||
| ```smarty | ||
| <{include file="$theme_tpl/xo_mypartial.tpl"}> | ||
| ``` | ||
|
|
||
| 3. Assign any required variables in `modern.php` | ||
| 4. Clear Smarty cache after adding | ||
|
|
There was a problem hiding this comment.
Fix ordered list numbering to match lint rule.
Markdownlint MD029 expects sequential numbering; adjust the list prefixes.
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 1086-1086: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/2/3
(MD029, ol-prefix)
[warning] 1087-1087: Ordered list item prefix
Expected: 2; Actual: 4; Style: 1/2/3
(MD029, ol-prefix)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@htdocs/modules/system/themes/modern/docs/DEVELOPER_GUIDE.md` around lines
1079 - 1088, The numbered list in DEVELOPER_GUIDE.md violates markdownlint MD029
because items aren't sequential; update the four list prefixes so they are
sequential (1, 2, 3, 4) for the lines starting with "Create
`xotpl/xo_mypartial.tpl`", "Include it in `theme.tpl`...", "Assign any required
variables in `modern.php`", and "Clear Smarty cache after adding" so the list
numbers increment correctly and satisfy MD029.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds end-user and developer documentation for the Modern System admin theme, helping admins configure the theme and helping developers/designers understand and extend its architecture.
Changes:
- Added a User Guide covering activation, dashboard features, customizer options, widgets, and troubleshooting.
- Added a Developer & Designer Guide documenting theme architecture, file structure, widget system, and customization recipes.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
htdocs/modules/system/themes/modern/docs/USER_GUIDE.md |
New administrator-focused usage and troubleshooting guide for the Modern admin theme. |
htdocs/modules/system/themes/modern/docs/DEVELOPER_GUIDE.md |
New technical reference for theme internals, extension points, and customization workflows. |
CodeRabbit (9 markdownlint fixes): - Add language tags to 6 fenced code blocks (MD040): file structure, theme.js functions, charts.js functions, customizer.js functions, widget copy paths, cookie list - Fix ordered list numbering to use 1. prefix (MD029) in both "Adding a Template Partial" sections Copilot (2 content fixes): - Correct "vanilla ES5" to "ES2015+" since scripts use const/let/arrows - Rewrite contradictory IE11 sentence in Browser Support section - Remove duplicate "again" in Help Sections bullets Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@htdocs/modules/system/themes/modern/docs/USER_GUIDE.md`:
- Around line 409-441: Add a new FAQ entry under the "## Frequently Asked
Questions" section (near the existing troubleshooting items) titled "### Browser
requirements" that states this theme requires modern browsers, lists supported
browser families/versions generically, and explicitly notes that IE11 is not
supported (as referenced in the Developer Guide); keep the wording concise and
consistent with existing FAQ style and place it alongside other short Q&A items
like "Dark mode doesn't persist" and "Charts aren't showing".
Address CodeRabbit suggestion: add a FAQ item about browser requirements mentioning modern browser support and no IE11. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix script load order: Chart.js is injected first, then jQuery (matches actual order in modern.php lines 57-69) - Update PHP version: "tested through 8.5" (CI matrix includes 8.5) - Fix Chart.js path in both guides: XOOPS_PATH/Frameworks/chartjs/ served via browse.php, not xoops_lib/Frameworks/ - Update Mermaid diagram to reflect correct load order Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Documentation includes
User Guide (
docs/USER_GUIDE.md):Developer Guide (
docs/DEVELOPER_GUIDE.md):19 Mermaid diagrams covering:
Test plan
Summary by CodeRabbit