refactor: convert download dropdown to valid W3C table
- Replace ul/li structure with semantic table (thead/tbody) - Add 6 columns: Ext, Video, Audio, Size, Codecs, Link - Show "N/A" for missing codec data - Add 0.5rem spacing between dropdown and description
This commit is contained in:
@@ -102,22 +102,40 @@
|
||||
{% if settings.use_video_download != 0 %}
|
||||
<details class="v-download">
|
||||
<summary class="download-dropdown-label">{{ _('Download') }}</summary>
|
||||
<ul class="download-dropdown-content">
|
||||
{% for format in download_formats %}
|
||||
<li class="download-format">
|
||||
<a class="download-link" href="{{ format['url'] }}" download="{{ title }}.{{ format['ext'] }}">
|
||||
{{ format['ext'] }} {{ format['video_quality'] }} {{ format['audio_quality'] }} {{ format['file_size'] }} {{ format['codecs'] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for download in other_downloads %}
|
||||
<li class="download-format">
|
||||
<a href="{{ download['url'] }}" download>
|
||||
{{ download['ext'] }} {{ download['label'] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="download-table-container">
|
||||
<table class="download-table" aria-label="Download formats">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{{ _('Ext') }}</th>
|
||||
<th scope="col">{{ _('Video') }}</th>
|
||||
<th scope="col">{{ _('Audio') }}</th>
|
||||
<th scope="col">{{ _('Size') }}</th>
|
||||
<th scope="col">{{ _('Codecs') }}</th>
|
||||
<th scope="col">{{ _('Link') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for format in download_formats %}
|
||||
<tr>
|
||||
<td data-label="{{ _('Ext') }}">{{ format['ext'] }}</td>
|
||||
<td data-label="{{ _('Video') }}">{{ format['video_quality'] }}</td>
|
||||
<td data-label="{{ _('Audio') }}">{{ format['audio_quality'] }}</td>
|
||||
<td data-label="{{ _('Size') }}">{{ format['file_size'] }}</td>
|
||||
<td data-label="{{ _('Codecs') }}">{{ format['codecs'] }}</td>
|
||||
<td data-label="{{ _('Link') }}"><a class="download-link" href="{{ format['url'] }}" download="{{ title }}.{{ format['ext'] }}" aria-label="{{ _('Download') }} {{ format['ext'] }} {{ format['video_quality'] }} {{ format['audio_quality'] }}">{{ _('Download') }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for download in other_downloads %}
|
||||
<tr>
|
||||
<td data-label="{{ _('Ext') }}">{{ download['ext'] }}</td>
|
||||
<td data-label="{{ _('Video') }}" colspan="3">{{ download['label'] }}</td>
|
||||
<td data-label="{{ _('Codecs') }}">{{ download.get('codecs', 'N/A') }}</td>
|
||||
<td data-label="{{ _('Link') }}"><a class="download-link" href="{{ download['url'] }}" download aria-label="{{ _('Download') }} {{ download['label'] }}">{{ _('Download') }}</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{% else %}
|
||||
<span class="v-download"></span>
|
||||
|
||||
Reference in New Issue
Block a user