From 7764cb047969258c76f108243ca7859a9e7b012f Mon Sep 17 00:00:00 2001 From: Cameron Blankenbuehler Date: Fri, 12 Apr 2024 13:49:11 -0400 Subject: [PATCH 1/3] Add audio source count per sentence for user audio contributions page --- src/View/Helper/SentenceButtonsHelper.php | 9 ++++++++- webroot/css/layouts/elements.css | 17 +++++++++++++---- webroot/js/sentences.play_audio.js | 2 +- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/View/Helper/SentenceButtonsHelper.php b/src/View/Helper/SentenceButtonsHelper.php index 0862ce951a..8ed53d0fa7 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,9 @@ public function audioButton($sentenceId, $sentenceLang, $sentenceAudios) $class = 'audioButton audioAvailable'; if ($startIn == 0) { $class .= ' nextAudioToPlay'; + $audioCount = $this->Html->div("audioButtonCount", $total); } - echo $this->Html->Link( + $audioLink = $this->Html->Link( null, $this->Url->build([ 'controller' => 'audio', @@ -207,8 +210,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/webroot/css/layouts/elements.css b/webroot/css/layouts/elements.css index 5062c21c14..c53b140686 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; } @@ -828,10 +830,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 +1198,17 @@ input.sentenceId { opacity: 0.3; } +.audioButtonWrapper { + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 2px; +} + +.audioButtonCount { + font-size: 0.8rem; +} + /* * Sentence correctness */ diff --git a/webroot/js/sentences.play_audio.js b/webroot/js/sentences.play_audio.js index 2e85e59952..231ab95c79 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(); } From 9d5adc495d9d513dbff8960d86cfafaf2d0826e7 Mon Sep 17 00:00:00 2001 From: Cameron Blankenbuehler Date: Fri, 12 Apr 2024 15:37:50 -0400 Subject: [PATCH 2/3] Fix copy button vertical alignment --- src/View/Helper/SentencesHelper.php | 12 ++++++------ webroot/css/layouts/elements.css | 10 ++-------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/View/Helper/SentencesHelper.php b/src/View/Helper/SentencesHelper.php index 82227b7813..72a343d83f 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 c53b140686..0fd956bc2d 100644 --- a/webroot/css/layouts/elements.css +++ b/webroot/css/layouts/elements.css @@ -769,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; } @@ -798,10 +798,6 @@ html[dir="rtl"] .comment-sentence .text { width: 515px; } - -.sentence .audio.column { -} - .sentence .link.button { float: left; margin: 4px 7px 0 5px; @@ -816,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 { From 4f018ce483ea7f7f13383028dda75c6b89840e08 Mon Sep 17 00:00:00 2001 From: Cameron Blankenbuehler Date: Mon, 22 Apr 2024 15:26:54 -0400 Subject: [PATCH 3/3] Display audio counts only when more than 1 exists --- src/View/Helper/SentenceButtonsHelper.php | 5 ++++- webroot/css/layouts/elements.css | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/View/Helper/SentenceButtonsHelper.php b/src/View/Helper/SentenceButtonsHelper.php index 8ed53d0fa7..55a45d2d2e 100644 --- a/src/View/Helper/SentenceButtonsHelper.php +++ b/src/View/Helper/SentenceButtonsHelper.php @@ -195,7 +195,10 @@ public function audioButton($sentenceId, $sentenceLang, $sentenceAudios) $class = 'audioButton audioAvailable'; if ($startIn == 0) { $class .= ' nextAudioToPlay'; - $audioCount = $this->Html->div("audioButtonCount", $total); + + // Only display audio counts for sentences with more than 1 audio + $countContent = $total > 1 ? $total : ""; + $audioCount = $this->Html->div("audioButtonCount", $countContent); } $audioLink = $this->Html->Link( null, diff --git a/webroot/css/layouts/elements.css b/webroot/css/layouts/elements.css index 0fd956bc2d..0010588028 100644 --- a/webroot/css/layouts/elements.css +++ b/webroot/css/layouts/elements.css @@ -1193,14 +1193,18 @@ input.sentenceId { } .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); } /*