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

- 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>

CHANGELOG.md

@@ -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

CLAUDE.md

@@ -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

assets/css/frontend.css

@@ -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,

templates/frontend/licenses.html.twig

@@ -57,11 +57,14 @@
                         <h4>{{ __('Available Downloads') }}</h4>
                         <ul class="download-list">
                             {% for download in item.downloads %}
-                                <li>
+                                <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 %}
@@ -70,6 +73,7 @@
                                                 <code>{{ download.file_hash[:12] }}...</code>
                                             </span>
                                         {% endif %}
+                                    </div>
                                 </li>
                             {% endfor %}
                         </ul>

wc-licensed-product.php

@@ -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__));