From 3c63116fe78f4455a60f50940ceb61f134ecad02 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Sun, 4 Jul 2021 21:21:53 +0200
Subject: [PATCH] [ticket/14771] Add classes and clean up audio attachment HTML

PHPBB3-14771
---
 .../styles/prosilver/template/attachment.html | 22 ++++++++++++++-----
 phpBB/styles/prosilver/theme/content.css      |  6 ++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/phpBB/styles/prosilver/template/attachment.html b/phpBB/styles/prosilver/template/attachment.html
index 0fc9972eb1..ceeea21d24 100644
--- a/phpBB/styles/prosilver/template/attachment.html
+++ b/phpBB/styles/prosilver/template/attachment.html
@@ -30,11 +30,23 @@
 		<!-- ENDIF -->
 
 		{% if _file.S_AUDIO_FILE %}
-		<dl class="file">
-			<dt><audio class="file-audio-controls" controls="controls" preload="metadata"><source src="{{ _file.U_DOWNLOAD_LINK }}" type="{{ _file.MIMETYPE }}"></audio></dt>
-			{% if _file.COMMENT %}<dd><em>{{ _file.COMMENT }}</em></dd>{% endif %}
-			<dd>{% if _file.UPLOAD_ICON %}{{ _file.UPLOAD_ICON }} {% endif %}<a class="postlink" href="{{ _file.U_DOWNLOAD_LINK }}" download>{{ _file.DOWNLOAD_NAME }}</a> ({{ _file.FILESIZE }} {{ _file.SIZE_LANG }}) {{ _file.L_DOWNLOAD_COUNT }}</dd>
-		</dl>
+			<dl class="file">
+				<dt class="c-file-header">
+					<audio class="c-file-audio-controls" controls="controls" preload="metadata">
+						<source class="c-file-audio-source" src="{{ _file.U_DOWNLOAD_LINK }}" type="{{ _file.MIMETYPE }}">
+					</audio>
+				</dt>
+				{% if _file.COMMENT %}
+					<dd class="c-file-comment">{{ _file.COMMENT }}</dd>
+				{% endif %}
+				<dd class="c-file-actions">
+					{% if _file.UPLOAD_ICON %}
+						<span class="o-icon c-file-icon">{{ _file.UPLOAD_ICON }}</span>
+					{% endif %}
+					<a class="c-file-actions-link postlink" href="{{ _file.U_DOWNLOAD_LINK }}" download>{{ _file.DOWNLOAD_NAME }}</a>
+					<span class="c-file-actions-meta">({{ _file.FILESIZE }} {{ _file.SIZE_LANG }}) {{ _file.L_DOWNLOAD_COUNT }}</span>
+				</dd>
+			</dl>
 		{% endif %}
 
 		<!-- EVENT attachment_file_append -->
diff --git a/phpBB/styles/prosilver/theme/content.css b/phpBB/styles/prosilver/theme/content.css
index 1313e6b604..5b795815a2 100644
--- a/phpBB/styles/prosilver/theme/content.css
+++ b/phpBB/styles/prosilver/theme/content.css
@@ -682,7 +682,11 @@ dl.thumbnail dt a:hover img {
 	border: 1px solid transparent;
 }
 
-audio.file-audio-controls {
+.c-file-comment {
+	font-style: italic;
+}
+
+.c-file-audio-controls {
 	max-width: 100%;
 }