Library page (#53)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* Fix some styling of row display

* Gridview on library page

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* instance routing

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Initial modlist layout

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Page redesign

* More tweaks

* Base library pages

* Remove errant css

* Update play.svg

* Addressed issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>

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: Array,
@@ -10,76 +10,64 @@ const props = defineProps({
   label: String,
   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 ref="modsRow" class="instances" v-if="shouldRenderNormalInstances">
       <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 ref="newsRow" class="news" v-else-if="shouldRenderNews">
-      <News v-for="news in props.news" :key="news.id" :news="news" />
+      <News v-for="news in props.news" :key="news.id" :news="news"/>
     </section>
   </div>
 </template>
-
 <style lang="scss" scoped>
 .row {
   display: flex;
@@ -161,7 +149,6 @@ const handleRightPage = () => {
     margin-right: auto;
     margin-top: 0.8rem;
     scroll-behavior: smooth;
-
     overflow-x: scroll;
     overflow-y: hidden;
 
@@ -179,4 +166,9 @@ const handleRightPage = () => {
     }
   }
 }
-</style>
+
+.row-instance {
+  min-width: 12rem;
+  max-width: 12rem;
+}
+</style>