From 64f619f165536998ec5af5f098ae2e9fd9487234 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Mon, 12 Aug 2024 15:46:57 +0700
Subject: [PATCH] Mobile View of reactions partly off-screen when translation
 option is active (#212)

* Only show audio translation option if available

* shrink reaction bar

* update css for reaction bar

* shrink emoji bar

* move reaction bar to left side

* update size for emoji icon

* disable expand action for reation bar

---------

Co-authored-by: Tri Truong <tmtri@tma.com.vn>
Co-authored-by: Mario Behling <mb@mariobehling.de>
---
 .../src/components/AudioTranslationDropdown.vue   | 12 ++++++++----
 webapp/src/components/ReactionsBar.vue            | 15 ++++++++++++---
 webapp/src/views/rooms/item.vue                   |  5 +++--
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue
index 7e0f1143..ba03660c 100644
--- a/webapp/src/components/AudioTranslationDropdown.vue
+++ b/webapp/src/components/AudioTranslationDropdown.vue
@@ -1,6 +1,5 @@
 <template lang="pug">
 div.c-audio-translation
-		h4 Audio Translation
 		bunt-select(
 		name="audio-translation",
 		v-model="selectedLanguage",
@@ -43,11 +42,16 @@ export default {
 
 <style scoped>
 .c-audio-translation {
-		margin-bottom: 3em;
+	height: 65px;
+	padding-top: 3px;
+	margin-right: 5px;
 }
 
-.c-audio-translation h4 {
-		margin-bottom: 0.5em;
+@media (max-width: 992px) {
+  .c-audio-translation {
+    width: 50%;
+    margin-right: 5px;
+  }
 }
 
 .bunt-select {
diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index b8f25329..00742534 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -39,8 +39,10 @@ export default {
 <style lang="stylus">
 .c-reactions-bar
 	position: relative
-	width: 64px
+	margin-left: 10px
 	height: 56px
+	+above('m')
+		right: 160px
 	.actions
 		position: absolute
 		bottom: 5px
@@ -54,13 +56,18 @@ export default {
 		transition: transform .3s ease
 	.bunt-icon-button
 		icon-button-style()
+		height: 27px !important
+		width: 27px !important
 		&:not(:first-child)
 			margin-left: 8px
 	.emoji
-		height: 28px
+		height: 26px
 		width: @height
 		display: inline-block
 	&:not(.expanded)
+		width: 40px
+		+below('m')
+			left: -150px
 		.actions:hover
 			cursor: pointer
 			background-color: $clr-grey-100
@@ -68,5 +75,7 @@ export default {
 			pointer-events: none
 	&.expanded
 		.actions
-			transform: translateX(calc(64px - 100% - 16px))
+			transform: translateX(calc(50px - 21% - 15px));
+			+above('m')
+				transform: translateX(calc(50px - 21% - 50px));
 </style>
diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index c1f36bec..fcf0bf7d 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -5,9 +5,8 @@
 		reactions-overlay(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
 		.stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null")
 		.stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
-			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
-			//- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
 			// Added dropdown menu for audio translations near the reactions bar
+			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")
@@ -173,6 +172,8 @@ export default {
 				height: 2px
 				width: calc(100% - 16px)
 				background-color: var(--clr-primary)
+		+below('m')
+			justify-content: space-between
 	.stage-tool-blocker
 		position: fixed
 		top: 0