Merge branch 'master' into mod-management

theseus_gui/src/components/RowDisplay.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
+import {ChevronLeftIcon, ChevronRightIcon} from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
 import News from '@/components/ui/News.vue'
-import { onMounted, onUnmounted, ref } from 'vue'
+import {onMounted, onUnmounted, ref} from 'vue'
 
 const props = defineProps({
   instances: {
@@ -23,76 +23,64 @@ const props = defineProps({
   },
   canPaginate: Boolean,
 })
-
 const allowPagination = ref(false)
 const modsRow = ref(null)
 const newsRow = ref(null)
-
 // Remove after state is populated with real data
 const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
 const shouldRenderNews = props.news && props.news?.length !== 0
-
 const handlePaginationDisplay = () => {
   let parentsRow
   if (shouldRenderNormalInstances) parentsRow = modsRow.value
   if (shouldRenderNews) parentsRow = newsRow.value
-
   if (!parentsRow) return
-
   const children = parentsRow.children
   const lastChild = children[children.length - 1]
   const childBox = lastChild.getBoundingClientRect()
-
   if (childBox.x + childBox.width > window.innerWidth) allowPagination.value = true
   else allowPagination.value = false
 }
-
 onMounted(() => {
   if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
-
   // Check if pagination should be rendered on mount
   handlePaginationDisplay()
 })
-
 onUnmounted(() => {
   if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
 })
-
 const handleLeftPage = () => {
   if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
   else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
 }
-
 const handleRightPage = () => {
   if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
   else if (shouldRenderNews) newsRow.value.scrollLeft += 170
 }
 </script>
-
 <template>
   <div class="row">
     <div class="header">
       <p>{{ props.label }}</p>
-      <hr aria-hidden="true" />
+      <hr aria-hidden="true"/>
       <div v-if="allowPagination" class="pagination">
-        <ChevronLeftIcon @click="handleLeftPage" />
-        <ChevronRightIcon @click="handleRightPage" />
+        <ChevronLeftIcon @click="handleLeftPage"/>
+        <ChevronRightIcon @click="handleRightPage"/>
       </div>
     </div>
     <section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
       <Instance
-        v-for="instance in props.instances"
-        :key="instance.id"
-        display="card"
-        :instance="instance"
+          v-for="instance in props.instances"
+          :key="instance.id"
+          display="card"
+          :instance="instance"
+          class="row-instance"
       />
     </section>
-    <section v-else-if="shouldRenderNews" ref="newsRow" class="news">
-      <News v-for="newsValue in props.news" :key="newsValue.id" :news="newsValue" />
+    <section ref="newsRow" class="news" v-else-if="shouldRenderNews">
+      <News v-for="news in props.news" :key="news.id" :news="news"/>
     </section>
   </div>
 </template>
-
 <style lang="scss" scoped>
 .row {
   display: flex;
@@ -174,7 +162,6 @@ const handleRightPage = () => {
     margin-right: auto;
     margin-top: 0.8rem;
     scroll-behavior: smooth;
-
     overflow-x: scroll;
     overflow-y: hidden;
 
@@ -192,4 +179,9 @@ const handleRightPage = () => {
     }
   }
 }
-</style>
+
+.row-instance {
+  min-width: 12rem;
+  max-width: 12rem;
+}
+</style>