ranger
184a124315
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>
212 lines
10 KiB
PHP
212 lines
10 KiB
PHP
<?php
|
|
// wp-notes-about.php
|
|
|
|
/**
|
|
* Function to display the "About" page for WP Notes plugin.
|
|
*/
|
|
function wp_notes_about_page() {
|
|
?>
|
|
<style>
|
|
/* Banner + intro side-by-side row at the top of the About page.
|
|
Stacks vertically on narrower screens. */
|
|
.wp-notes-about-intro {
|
|
display: flex;
|
|
gap: 24px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin: 16px 0 28px;
|
|
padding: 18px;
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
}
|
|
.wp-notes-about-intro__img {
|
|
flex: 0 0 320px;
|
|
max-width: 320px;
|
|
}
|
|
.wp-notes-about-intro__img img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
.wp-notes-about-intro__body {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
}
|
|
.wp-notes-about-intro__body h2 {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="wrap">
|
|
<h1 class="wp-heading-inline">About</h1>
|
|
<span class="page-title-action">v<?php echo esc_html(WP_NOTES_VERSION); ?></span>
|
|
<hr class="wp-header-end">
|
|
</div>
|
|
|
|
<div class="wrap" style="display: flex; gap: 20px;">
|
|
<!-- Left Section: About Content (70%) -->
|
|
<div style="flex: 0 0 70%;">
|
|
|
|
<!-- Banner + intro, side by side -->
|
|
<div class="wp-notes-about-intro">
|
|
<div class="wp-notes-about-intro__img">
|
|
<img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
|
|
alt="WP Notes banner">
|
|
</div>
|
|
<div class="wp-notes-about-intro__body">
|
|
<h2>WP Notes <span style="color:#646970; font-weight:400;">v<?php echo esc_html(WP_NOTES_VERSION); ?></span></h2>
|
|
<p>WP Notes is a lightweight task & logbook plugin for WordPress. Log your daily work, mark tasks as done, and keep a tidy history right inside the dashboard — perfect for freelancers showing clients what's been delivered.</p>
|
|
<p style="margin-bottom:0;">
|
|
<a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes')); ?>" class="button button-primary">Go to WP Notes →</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Hide most plugin notices on the About page — they push
|
|
the long-form content down and the user came here to
|
|
read, not to dismiss admin chatter. */
|
|
.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>
|
|
|
|
<!-- What WP Notes does -->
|
|
<div class="wp-notes-about-card">
|
|
<h2>What WP Notes does</h2>
|
|
<p>WP Notes is a lightweight task & 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 — nothing leaves your server.</p>
|
|
<p>I built it for my own client work as a transparent “here's what I did this week” 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>
|
|
</div>
|
|
|
|
<!-- Who it's for -->
|
|
<div class="wp-notes-about-card">
|
|
<h2>Who it's for</h2>
|
|
<ul>
|
|
<li><strong>Freelancers & site developers</strong> tracking work done on client sites.</li>
|
|
<li><strong>Small teams</strong> documenting changes or keeping a project changelog inside the dashboard.</li>
|
|
<li><strong>WordPress power users</strong> who'd rather not jump out to a separate notes app.</li>
|
|
<li><strong>Small businesses</strong> needing a simple task list tied to their website.</li>
|
|
<li><strong>Students & teachers</strong> logging daily progress.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Version history (compact, accurate) -->
|
|
<div class="wp-notes-about-card wp-notes-about-card--versions">
|
|
<h2>Version history</h2>
|
|
<ul>
|
|
<li>
|
|
<span class="ver">v3.1.0</span> — 25 May 2026 <span class="latest">latest</span><br>
|
|
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>
|
|
<li>
|
|
<span class="ver">v3.0.2</span> — 10 May 2025<br>
|
|
The “without all the crap” trim-back from the v1.1.5 feature-creep era (AI chat, tamagotchi, journal, speedtest… gone). Baseline of what the plugin is today: notes, admin bar, settings, import/export, about, updater.
|
|
</li>
|
|
<li>
|
|
<span class="ver">v2.x</span> — 2024<br>
|
|
Editor improvements, AJAX edits, mark-as-done / restore, color & font / size customisation, JSON + CSV import/export, user-attribution & timestamps, dashboard widget.
|
|
</li>
|
|
<li>
|
|
<span class="ver">v2.0.0</span> — initial release<br>
|
|
Basic note functionality with the dashboard widget and styling options.
|
|
</li>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Right Section: Feedback Box (30%) -->
|
|
<div style="flex: 0 0 30%; padding: 20px; border: 1px solid #ddd; background: #f9f9f9;">
|
|
<h2>Leave Feedback</h2>
|
|
<!-- Social Buttons -->
|
|
<button style="background-color: black; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
|
|
✖️ Post
|
|
</button>
|
|
<button style="background-color: #FF0000; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
|
|
🔴 YouTube 1K
|
|
</button>
|
|
<a href="https://github.com/davidtkeane/wp-notes" target="_blank" style="text-decoration: none;">
|
|
<button style="background-color: #24292e; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
|
|
🐙 GitHub
|
|
</button>
|
|
</a>
|
|
<!-- Feedback Options -->
|
|
<form id="wp-notes-feedback-options" style="margin-top: 20px;">
|
|
<label><input type="radio" name="feedback" value="improve"> I have ideas to improve this plugin</label><br>
|
|
<label><input type="radio" name="feedback" value="help"> I need help with this plugin</label><br>
|
|
<input type="submit" value="Submit Feedback" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer; margin-top: 10px;">
|
|
</form>
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript to toggle About section -->
|
|
<script>
|
|
/**
|
|
* Function to toggle the display of a section.
|
|
* @param {string} sectionId - The ID of the section to toggle.
|
|
*/
|
|
function toggleSection(sectionId) {
|
|
var section = document.getElementById(sectionId);
|
|
if (section) {
|
|
if (section.style.display === "none") {
|
|
section.style.display = "block";
|
|
} else {
|
|
section.style.display = "none";
|
|
}
|
|
} else {
|
|
console.error("Element with ID " + sectionId + " not found.");
|
|
}
|
|
}
|
|
|
|
// JavaScript to handle feedback form toggling
|
|
document.getElementById('wp-notes-feedback-options').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var feedbackType = document.querySelector('input[name="feedback"]:checked').value;
|
|
if (feedbackType === 'improve') {
|
|
toggleSection('feedback-form-improve');
|
|
} else if (feedbackType === 'help') {
|
|
toggleSection('feedback-form-help');
|
|
}
|
|
});
|
|
</script>
|
|
<?php
|
|
}
|
|
?>
|