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(); }