magdev/wc-licensed-product
1
Fork 0
Code Issues Pull Requests Actions Releases 4 Activity

Improve download list layout in customer account (v0.3.5)

Browse Source 
- Downloads now displayed in two-row format per entry
- First row: file download link
- Second row: metadata (version, date, checksum)
- Better visual separation and readability

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-01-23 12:07:49 +01:00
parent fba8bf2352
commit a6c6d247aa
5 changed files with 76 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CHANGELOG.md
View File

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
## [0.3.5] - 2026-01-23
### Changed
- Improved download list layout in customer account licenses page
- Downloads now displayed in two-row format: file link on first row, metadata on second row
- Better visual separation between download link and version/date/checksum information
### Technical Details
- Updated `templates/frontend/licenses.html.twig` with new two-row structure
- Added `.download-item`, `.download-row-file`, `.download-row-meta` CSS classes
- Improved responsive behavior for download metadata
## [0.3.4] - 2026-01-23
### Added

24
CLAUDE.md
View File

@@ -932,3 +932,27 @@ Added current version display on single product pages for licensed products.
- Only displays for licensed product type
- Only displays if product has at least one version defined
- Uses `LicensedProduct::get_current_version()` which queries `VersionManager::getLatestVersion()`
### 2026-01-23 - Version 0.3.5 - Download List UI Improvement
**Overview:**
Improved the download list layout in customer account licenses page with a two-row format.
**Implemented:**
- Downloads now displayed in two rows per entry
- First row: File download link
- Second row: Metadata (version, date, checksum)
- Better visual separation and readability
**Modified files:**
- `templates/frontend/licenses.html.twig` - Restructured download list with two-row layout
- `assets/css/frontend.css` - Added `.download-item`, `.download-row-file`, `.download-row-meta` styles
**Technical notes:**
- Changed `<li>` from single-row flex to column flex layout
- Metadata row indented with left padding for visual hierarchy
- Updated responsive CSS for mobile devices

31
assets/css/frontend.css
View File

@@ -202,18 +202,30 @@
padding: 0;
}
.download-list li {
.download-list li.download-item {
display: flex;
align-items: center;
gap: 1em;
padding: 0.5em 0;
flex-direction: column;
gap: 0.35em;
padding: 0.75em 0;
border-bottom: 1px solid #eee;
}
.download-list li:last-child {
.download-list li.download-item:last-child {
border-bottom: none;
}
.download-row-file {
display: flex;
align-items: center;
}
.download-row-meta {
display: flex;
align-items: center;
gap: 1em;
padding-left: 1.5em;
}
.download-link {
display: inline-flex;
align-items: center;
@@ -244,7 +256,6 @@
.download-date {
color: #999;
font-size: 0.85em;
margin-left: auto;
}
.download-hash {
@@ -338,15 +349,11 @@
gap: 0.5em;
}
.download-list li {
.download-row-meta {
padding-left: 0;
flex-wrap: wrap;
}
.download-date {
margin-left: 0;
width: 100%;
}
.woocommerce-licenses-table,
.woocommerce-licenses-table thead,
.woocommerce-licenses-table tbody,

30
templates/frontend/licenses.html.twig
View File

@@ -57,19 +57,23 @@
<h4>{{ __('Available Downloads') }}</h4>
<ul class="download-list">
{% for download in item.downloads %}
<li>
<a href="{{ esc_url(download.download_url) }}" class="download-link">
<span class="dashicons dashicons-download"></span>
{{ esc_html(download.filename ?: 'Version ' ~ download.version) }}
</a>
<span class="download-version">v{{ esc_html(download.version) }}</span>
<span class="download-date">{{ esc_html(download.released_at) }}</span>
{% if download.file_hash %}
<span class="download-hash" title="{{ esc_attr(download.file_hash) }}">
<span class="dashicons dashicons-shield"></span>
<code>{{ download.file_hash[:12] }}...</code>
</span>
{% endif %}
<li class="download-item">
<div class="download-row-file">
<a href="{{ esc_url(download.download_url) }}" class="download-link">
<span class="dashicons dashicons-download"></span>
{{ esc_html(download.filename ?: 'Version ' ~ download.version) }}
</a>
</div>
<div class="download-row-meta">
<span class="download-version">v{{ esc_html(download.version) }}</span>
<span class="download-date">{{ esc_html(download.released_at) }}</span>
{% if download.file_hash %}
<span class="download-hash" title="{{ esc_attr(download.file_hash) }}">
<span class="dashicons dashicons-shield"></span>
<code>{{ download.file_hash[:12] }}...</code>
</span>
{% endif %}
</div>
</li>
{% endfor %}
</ul>

4
wc-licensed-product.php
View File

@@ -3,7 +3,7 @@
* Plugin Name: WooCommerce Licensed Product
* Plugin URI: https://src.bundespruefstelle.ch/magdev/wc-licensed-product
* Description: WooCommerce plugin to sell software products using license keys with domain-based validation.
* Version: 0.3.4
* Version: 0.3.5
* Author: Marco Graetsch
* Author URI: https://src.bundespruefstelle.ch/magdev
* License: GPL-2.0-or-later
@@ -28,7 +28,7 @@ if (!defined('ABSPATH')) {
}
// Plugin constants
define('WC_LICENSED_PRODUCT_VERSION', '0.3.4');
define('WC_LICENSED_PRODUCT_VERSION', '0.3.5');
define('WC_LICENSED_PRODUCT_PLUGIN_FILE', __FILE__);
define('WC_LICENSED_PRODUCT_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('WC_LICENSED_PRODUCT_PLUGIN_URL', plugin_dir_url(__FILE__));