ranger/rangerhq-logbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: rewrite About page — readable cards, accurate version history

Browse Source 
The About page had been showing "Version 2.0.3 (Current)" while the
plugin reports v3.1.0 — the on-page version log was years behind
the actual changelog. Both the About and Version History sections
were also hidden behind onclick=toggleSection() buttons by default,
which is anti-UX for a page users specifically navigate to in order
to READ content.

Rewrote the left column as three plain cards using the same visual
rhythm as the side-by-side intro row that landed earlier today:

1. What WP Notes does — two paragraphs of prose
2. Who it's for — clean bulleted list (dropped the "Teachers ←
   Email Notifications" entry since that feature isn't implemented
   in v3.x; the claim was misleading)
3. Version history — compact, accurate, latest-first summary:
   v3.1.0 (latest, with "latest" pill) → v3.0.2 → v2.x → v2.0.0.
   Plus a "View the full CHANGELOG.md →" link to the canonical
   history on Gitea so the on-page summary stays small.

Also fixed:
- Removed redundant duplicate paragraphs ("WP Notes is a versatile
  plugin that caters to a wide range of users" appeared twice in
  two consecutive lines).
- Removed invalid HTML (bare <li> outside <ul>, <p> wrapping <li>).
- Removed a buried banner image + buried Buy-Me-A-Coffee that
  were inside the hidden-by-default Version History toggle —
  visible to no-one. Both already exist in better positions on
  the page.

Added CSS classes for the new cards (.wp-notes-about-card,
.wp-notes-about-card--versions) including a green "latest" pill
on the current version and monospaced version labels in the
plugin's blue.

Right-column feedback box unchanged. toggleSection() helper kept
(still referenced by the feedback form's submit handler — its
broken behaviour is a separate Tier 2 problem).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-25 08:04:07 +01:00
parent 99475e80f2
commit 184a124315
2 changed files with 113 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+42
View File
@@ -7,6 +7,48 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
## [Unreleased] ## [Unreleased]
### Changed — About page rewritten (content + layout)
The About page (`Settings → WP Notes → About`) has been rewritten
from "wall of nested toggle boxes with outdated content" to
"readable cards with accurate content". The left column is now
three plain cards: **What WP Notes does**, **Who it's for**, and a
**Version history** that actually matches the current plugin
version.
What changed:
- **Removed two `<button>onclick=toggleSection()</button>` wrappers**
around the About and Version History sections. Users came to the
About page to read content — hiding it behind a toggle was
anti-UX.
- **"Version 2.0.3 (Current)"** entry was lying — the plugin is now
v3.1.0. Replaced the whole version section with a compact
accurate summary (v3.1.0 → v3.0.2 → v2.x → v2.0.0) plus a
prominent **"View the full CHANGELOG.md →"** link to the canonical
history on Gitea so the on-page summary doesn't have to be
exhaustive.
- **Removed redundant duplicate paragraphs** ("WP Notes is a
versatile plugin that caters to a wide range of users" appeared
twice in two lines).
- **Removed invalid HTML** — bare `<li>` outside `<ul>`, `<p>`
wrapping `<li>`.
- **Removed buried banner image + Buy-Me-A-Coffee** that were
inside the (hidden-by-default) Version History toggle, never
seen by anyone. The banner already lives at the top of the page
in the side-by-side intro row; the support link already lives in
the right-column feedback card.
- **Dropped the "Teachers want progress with Email Notifications"
use-case** — email notifications aren't implemented in v3.x so
the claim was misleading.
- **Added three CSS card classes** (`.wp-notes-about-card`,
`.wp-notes-about-card--versions`) for visual rhythm with the
intro row above, plus styling for the version entries (latest
pill, monospace version labels).
The right-column feedback box is unchanged. `toggleSection()` is
also unchanged — still defined (no harm, used by the feedback
form's broken-since-forever submit handler which is its own
Tier 2 problem).
--- ---
## [3.1.0] — 2026-05-25 ## [3.1.0] — 2026-05-25
inc/wp-notes-about.php
+66 -121
View File
@@ -65,138 +65,83 @@ function wp_notes_about_page() {
</div> </div>
<style> <style>
/* Hide most plugin notices on the About page — they push the /* Hide most plugin notices on the About page — they push
long-form content down and the user came here to read, not the long-form content down and the user came here to
to dismiss admin chatter. Scoped to the About page only by read, not to dismiss admin chatter. */
virtue of living in this file. */ .notice, .updated, .error { display: none !important; }
.notice, .updated, .error {
display: none !important; /* About-page content cards — same visual rhythm as the
intro row above. */
.wp-notes-about-card {
background: #fff;
border: 1px solid #ccd0d4;
border-radius: 4px;
padding: 20px 24px;
margin: 0 0 22px;
}
.wp-notes-about-card h2 {
margin: 0 0 10px;
font-size: 16px;
}
.wp-notes-about-card p:last-child { margin-bottom: 0; }
.wp-notes-about-card ul {
margin: 8px 0 0 18px;
list-style: disc;
}
.wp-notes-about-card ul li { margin-bottom: 4px; }
.wp-notes-about-card--versions ul { list-style: none; margin-left: 0; }
.wp-notes-about-card--versions li { margin-bottom: 12px; }
.wp-notes-about-card--versions .ver { font-weight: 600; color: #2271b1; }
.wp-notes-about-card--versions .latest { display: inline-block; margin-left: 6px; padding: 1px 7px; background: #00a32a; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600; }
.wp-notes-about-changelog-link {
display: inline-block;
margin-top: 6px;
font-size: 13px;
color: #646970;
} }
</style> </style>
<!-- About and Versions Section --> <!-- What WP Notes does -->
<h1>About WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1> <div class="wp-notes-about-card">
<div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;"> <h2>What WP Notes does</h2>
<button onclick="toggleSection('about-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;"> <p>WP Notes is a lightweight task &amp; logbook plugin that lives entirely inside the WordPress admin. Type a note, format it with colour / size / font / emoji, mark it done when the work is finished, restore it later if you need to revisit. Everything is stored in the site's own database &mdash; nothing leaves your server.</p>
Toggle About Section <p>I built it for my own client work as a transparent &ldquo;here's what I did this week&rdquo; logbook, so customers can see clearly what they're paying for. It turned out to be just as useful for any small team or single user who wants notes attached to the WordPress dashboard rather than a separate app.</p>
</button>
<div id="about-section" style="margin-top: 10px; display: none;">
<!-- Content for About and Versions -->
<h2>About WP Notes</h2>
<p>
Thank you for using WP Notes! This plugin helps you manage your WordPress tasks and notes efficiently.
Keep track of your todo's, mark them as complete, and export your data for safekeeping. I made this
plugin for my website to log my daily tasks and notes as a logbook for my clients, so they can see the work
done by me or you and so PAY, as every task is important and the customers need to know what I've done.
</p>
<ul>
<li>Log all your tasks and jobs so prove work is being done.</li>
<li>As you can see, this plugin is very flexible and can be used for a wide range of WordPress users.</li>
<li>I hope you find it useful too.</li>
</ul>
<h1>What WP Notes Offers</h1>
<p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
<p>We're excited to offer our plugin to our customers.</p>
<p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
<p>We have several features for you to choose from:</p>
<ul>
<li><strong>Freelancers and site developers</strong> tracking work done on client sites.</li>
<li><strong>Teams</strong> wanting to document changes or keep a changelog in the dashboard.</li>
<li><strong>WordPress power users</strong> wanting a straightforward dashboard notes system.</li>
<li><strong>Small businesses</strong> needing a simple task management solution for WordPress.</li>
<li><strong>Students</strong> wanting to keep track of their daily tasks to prove work is being done.</li>
<li><strong>Teachers</strong> wanting to keep track of their students' progress with Email Notifications.</li>
</ul>
<p>
<li><strong>If you have any questions or feedback</strong>, feel free to reach out to us. Enjoy your note-taking experience!</li>
</p>
<p>
<li><strong>Join our community</strong> and unlock the full potential of WP Notes.</li>
</p>
</div>
</div> </div>
<p> <!-- Who it's for -->
<!-- About and Versions Section --> <div class="wp-notes-about-card">
<h1>Version History v <?php echo esc_html(WP_NOTES_VERSION); ?></h1> <h2>Who it's for</h2>
<div class="wp-notes-versions" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
<button onclick="toggleSection('version-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
Toggle Version Section
</button>
<div id="version-section" style="margin-top: 10px; display: none;">
<h3>Version 2.0.3 (Current)</h3>
<ul> <ul>
<li>Added Error Logging: Introduced a comprehensive error logging system to capture plugin-related errors. The logs are now viewable within the admin bar for easy troubleshooting.</li> <li><strong>Freelancers &amp; site developers</strong> tracking work done on client sites.</li>
<li>Added Welcome Section and Version history</li> <li><strong>Small teams</strong> documenting changes or keeping a project changelog inside the dashboard.</li>
<li>Added Image to main menu</li> <li><strong>WordPress power users</strong> who'd rather not jump out to a separate notes app.</li>
<li>Edit Function is now working</li> <li><strong>Small businesses</strong> needing a simple task list tied to their website.</li>
<li>Popup notification with "Saved" status added</li> <li><strong>Students &amp; teachers</strong> logging daily progress.</li>
<li>Error controls incorporated into code for stability</li>
<li>Enhanced `wp-config.php` for error capturing</li>
<li>Ability to restore older notes</li>
<li>Displays "Created by," "Modified by," and "Edited by" fields</li>
<li>Improved task-tracking feature with a dashboard interface</li>
<li>Added color, font, and size customization for notes</li>
<li>Added edit and mark-as-done functions</li>
<li>AJAX-based updates for smoother note editing</li>
<li>Added Create WP Note into Tools in admin bar</li>
<li>Added Create WP Note into Wp-Notes in admin bar</li>
<li>Added Activity Chart for activity tracking in admin bar Still needs Work</li>
</ul> </ul>
<div class="wp-notes-header" style="margin-bottom: 30px;">
<img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
style="max-width: 1200px; width: 100%; height: auto; margin-bottom: 20px;"
alt="WP Notes Banner">
</div> </div>
<p>
<h3>Version 2.0.4 (New) Additions</h3>
<ul>
<li>Ability to Export and Import Notes from a JSON file or a CSV file</li>
<li>Email notification when a note is marked as complete</li>
<li>Email the Notes Owner when a note is marked as complete</li>
<li>Email the current user's email when a note is created</li>
<li>Email notification when a note is edited</li>
<li>Enhanced `wp-config.php` for error capturing</li>
<li>Ability to close sections such as What's New, Version 2.0.3, and the Welcome Section</li>
<li>Welcome popup message to greet users</li>
<li>A page for ChatGPT API support, including other options like Claude-API</li>
<li>Add Emoji Support and icons</li>
</ul>
<h3>Version 2.0.2</h3> <!-- Version history (compact, accurate) -->
<div class="wp-notes-about-card wp-notes-about-card--versions">
<h2>Version history</h2>
<ul> <ul>
<li>Added user attribution for notes</li> <li>
<li>Enhanced timestamp functionality</li> <span class="ver">v3.1.0</span> &mdash; 25 May 2026 <span class="latest">latest</span><br>
<li>Added email export option</li> UX polish + bug-fix pass. Single-H1 cleanup, banner moved to this About page, menu renamed to <em>My Notes</em>, duplicate forms removed, empty-state notice now persistently dismissible per-user via <code>user_meta</code>, Tools shortcut retired with a backward-compatible redirect.
<li>Improved dashboard widget synchronization</li> </li>
<li>Added welcome section and version history</li> <li>
<span class="ver">v3.0.2</span> &mdash; 10 May 2025<br>
The &ldquo;without all the crap&rdquo; trim-back from the v1.1.5 feature-creep era (AI chat, tamagotchi, journal, speedtest&hellip; gone). Baseline of what the plugin is today: notes, admin bar, settings, import/export, about, updater.
</li>
<li>
<span class="ver">v2.x</span> &mdash; 2024<br>
Editor improvements, AJAX edits, mark-as-done / restore, color &amp; font / size customisation, JSON + CSV import/export, user-attribution &amp; timestamps, dashboard widget.
</li>
<li>
<span class="ver">v2.0.0</span> &mdash; initial release<br>
Basic note functionality with the dashboard widget and styling options.
</li>
</ul> </ul>
<a class="wp-notes-about-changelog-link" href="https://git.davidtkeane.com/ranger/a-wp-notes-v3/src/branch/main/CHANGELOG.md" target="_blank" rel="noopener">View the full CHANGELOG.md →</a>
<h3>Version 2.0.1</h3>
<ul>
<li>Enhanced admin bar integration</li>
<li>Added timestamp to notes</li>
<li>Improved data preservation</li>
</ul>
<h3>Version 2.0.0</h3>
<ul>
<li>Initial release with basic note functionality</li>
<li>Dashboard widget integration</li>
<li>Note styling options</li>
</ul>
<br>
<!-- Buy Me a Coffee Button -->
<a href="https://www.buymeacoffee.com/davidkeanek" target="_blank">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" alt="Buy me a coffee">
</a>
</div>
</div> </div>
</div> </div>