diff --git a/src/View/Helper/SentenceButtonsHelper.php b/src/View/Helper/SentenceButtonsHelper.php
index 0862ce951..55a45d2d2 100644
--- a/src/View/Helper/SentenceButtonsHelper.php
+++ b/src/View/Helper/SentenceButtonsHelper.php
@@ -180,6 +180,8 @@ public function audioButton($sentenceId, $sentenceLang, $sentenceAudios)
$total = count($sentenceAudios);
if ($total) {
$startIn = rand(0, $total-1);
+ $audioCount = 1;
+ $audioLinks = "";
foreach ($sentenceAudios as $audio) {
$author = $this->_View->safeForAngular($audio->author);
if (empty($author)) {
@@ -193,8 +195,12 @@ public function audioButton($sentenceId, $sentenceLang, $sentenceAudios)
$class = 'audioButton audioAvailable';
if ($startIn == 0) {
$class .= ' nextAudioToPlay';
+
+ // Only display audio counts for sentences with more than 1 audio
+ $countContent = $total > 1 ? $total : "";
+ $audioCount = $this->Html->div("audioButtonCount", $countContent);
}
- echo $this->Html->Link(
+ $audioLink = $this->Html->Link(
null,
$this->Url->build([
'controller' => 'audio',
@@ -207,8 +213,12 @@ public function audioButton($sentenceId, $sentenceLang, $sentenceAudios)
'onclick' => 'return false',
)
);
+
+ $audioLinks .= $audioLink;
$startIn--;
}
+
+ echo $this->Html->div("audioButtonWrapper", $audioLinks . $audioCount);
} else {
echo $this->Html->Link(
null,
diff --git a/src/View/Helper/SentencesHelper.php b/src/View/Helper/SentencesHelper.php
index 82227b781..72a343d83 100644
--- a/src/View/Helper/SentencesHelper.php
+++ b/src/View/Helper/SentencesHelper.php
@@ -531,18 +531,18 @@ public function displayGenericSentence(
);
}
- // Copy
- echo '
';
- $this->SentenceButtons->displayCopyButton($sentence->text);
- echo '
';
-
// Sentence
$hasAudio = isset($sentence->audios) && count($sentence->audios);
$canEdit = $isEditable && !$hasAudio;
$this->displaySentenceContent($sentence, $canEdit);
echo '';
- // audio
+ // Copy
+ echo '';
+ $this->SentenceButtons->displayCopyButton($sentence->text);
+ echo '
';
+
+ // Audio
if ($withAudio && isset($sentence->audios)) {
echo '';
$this->SentenceButtons->audioButton(
diff --git a/webroot/css/layouts/elements.css b/webroot/css/layouts/elements.css
index 5062c21c1..001058802 100644
--- a/webroot/css/layouts/elements.css
+++ b/webroot/css/layouts/elements.css
@@ -758,6 +758,8 @@ html[dir="rtl"] .comment-sentence .text {
}
.sentence {
+ display: flex;
+ align-items: center;
padding: 4px 0px;
background: #fff;
}
@@ -767,8 +769,8 @@ html[dir="rtl"] .comment-sentence .text {
}
.sentence .column {
- display: inline-block;
- vertical-align: text-top;
+ display: flex;
+ align-items: center;
margin: 0 4px;
}
@@ -796,10 +798,6 @@ html[dir="rtl"] .comment-sentence .text {
width: 515px;
}
-
-.sentence .audio.column {
-}
-
.sentence .link.button {
float: left;
margin: 4px 7px 0 5px;
@@ -814,8 +812,6 @@ html[dir="rtl"] .comment-sentence .text {
width: 16px;
height: 16px;
cursor: pointer;
- margin-top: 5px;
- margin-left: 5px;
}
.sentence .copy-btn.copied {
@@ -828,10 +824,6 @@ html[dir="rtl"] .comment-sentence .text {
border-left: 1px solid #FFF;
}
-.sentence .audioButton {
- margin-top: 3px;
-}
-
.sentence .favorite-page.column{
list-style-type: none;
}
@@ -1200,6 +1192,21 @@ input.sentenceId {
opacity: 0.3;
}
+.audioButtonWrapper {
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 2px;
+ margin-right: 1.5rem;
+}
+
+.audioButtonCount {
+ position: absolute;
+ font-size: 0.8rem;
+ left: calc(100% + 0.25rem);
+}
+
/*
* Sentence correctness
*/
diff --git a/webroot/js/sentences.play_audio.js b/webroot/js/sentences.play_audio.js
index 2e85e5995..231ab95c7 100644
--- a/webroot/js/sentences.play_audio.js
+++ b/webroot/js/sentences.play_audio.js
@@ -21,7 +21,7 @@ $(document).ready(function () {
$('.audioAvailable').off();
$('.audioAvailable').click(function () {
$(this).removeClass('nextAudioToPlay');
- var next = $(this).next();
+ var next = $(this).next(".audioButton");
if (!next.length) {
next = $(this).parent().children().first();
}