fix image issues #281

akdasa-studios · Jun 17, 2023 · b0350b3 · b0350b3
1 parent 2a5d6bf
commit b0350b3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/app/decks/inbox/components/InboxCardVerseTextSide.vue b/src/app/decks/inbox/components/InboxCardVerseTextSide.vue
@@ -48,14 +48,9 @@ const isPortrait = computed(() => screenOrientation.isPortrait.value)
 
 <style scoped>
 :deep(.image-landscape) {
-  height: 277px;
+  max-height: 277px;
 }
 .image-portrait {
   width: 100%;
 }
 </style>
-
-<!-- :class="{
-  'image-portrait': isPortrait,
-  'image-landscape': !isPortrait
-}" -->
diff --git a/src/app/decks/review/components/ReviewCardTextSide.vue b/src/app/decks/review/components/ReviewCardTextSide.vue
@@ -3,12 +3,18 @@
     :lines="props.lines"
     :url="verseImage?.url"
     style="width: 100%;"
+    :class="{
+      'image-portrait': (isPortrait || lines) && !props.verseImage,
+      'image-landscape': !isPortrait && props.verseImage
+    }"
   />
 </template>
 
 <script setup lang="ts">
 import { VerseImage } from '@akdasa-studios/shlokas-core'
+import { computed } from 'vue'
 import VerseTextLines from '@/app/decks/shared/components/VerseTextLines.vue'
+import { useScreenOrientation } from '@/app/shared'
 
 
 /* -------------------------------------------------------------------------- */
@@ -20,4 +26,26 @@ const props = defineProps<{
   lines: string[]
   verseImage?: VerseImage
 }>()
-</script>
+
+/* -------------------------------------------------------------------------- */
+/*                                Dependencies                                */
+/* -------------------------------------------------------------------------- */
+
+const screenOrientation = useScreenOrientation()
+
+/* -------------------------------------------------------------------------- */
+/*                                    State                                   */
+/* -------------------------------------------------------------------------- */
+
+const isPortrait = computed(() => screenOrientation.isPortrait.value)
+</script>
+
+
+<style scoped>
+:deep(.image-landscape) {
+  max-height: 277px;
+}
+.image-portrait {
+  width: 100%;
+}
+</style>
diff --git a/src/app/decks/shared/components/VerseTextLines.vue b/src/app/decks/shared/components/VerseTextLines.vue
@@ -77,8 +77,4 @@ async function onOpened() {
 .image {
   padding: 3px;
 }
-
-.image-landscape {
-  max-height: 277px;
-}
 </style>