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/ui/Instance.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { RouterLink } from 'vue-router'
-import { Card, PlusIcon } from 'omorphia'
-
+import { Card } from 'omorphia'
+import { PlayIcon } from '@/assets/icons'
 const props = defineProps({
   display: String,
   instance: Object,
@@ -10,16 +10,16 @@ const props = defineProps({
 
 <template>
   <div>
-    <RouterLink v-if="display === 'list'" class="instance-list-item" :to="`${props.instance.id}`">{{
-      props.instance.name
-    }}</RouterLink>
-    <Card class="instance-card-item" v-else-if="display === 'card'">
+    <RouterLink v-if="display === 'list'" class="instance-list-item" :to="`/instance/${props.instance.id}`">{{
+        props.instance.name
+      }}</RouterLink>
+    <Card class="instance-card-item" v-else-if="display === 'card'" @click="this.$router.push(`/instance/${props.instance.id}`)">
       <img :src="props.instance.img" alt="Trending mod card" />
       <div class="project-info">
         <p class="title">{{ props.instance.name }}</p>
         <p class="description">{{ props.instance.version }}</p>
       </div>
-      <div class="cta"><PlusIcon /></div>
+      <div class="cta"><PlayIcon /></div>
     </Card>
   </div>
 </template>
@@ -32,32 +32,26 @@ const props = defineProps({
   transition: all ease-out 0.1s;
   font-size: 0.8rem;
   color: var(--color-primary);
-
   &:hover {
     text-decoration: none;
     filter: brightness(150%);
   }
 }
-
 .instance-card-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  width: 180px;
   padding: 0.75rem;
   transition: 0.1s ease-in-out all;
-
   &:hover {
     filter: brightness(0.85);
-
     .cta {
       opacity: 1;
       bottom: 4.5rem;
     }
   }
-
   .cta {
     position: absolute;
     display: flex;
@@ -72,27 +66,24 @@ const props = defineProps({
     opacity: 0;
     transition: 0.3s ease-in-out bottom, 0.1s ease-in-out opacity;
     cursor: pointer;
-
     svg {
       color: #fff;
+      width: 1.5rem;
+      height: 1.5rem;
     }
-
     &:hover {
       filter: brightness(0.75);
       box-shadow: var(--shadow-floating);
     }
   }
-
   img {
-    width: 160px;
+    width: 100%;
     border-radius: var(--radius-sm);
     filter: none !important;
   }
-
   .project-info {
     margin-top: 1rem;
     width: 100%;
-
     .title {
       color: var(--color-contrast);
       max-width: 6rem;
@@ -105,7 +96,6 @@ const props = defineProps({
       line-height: 110%;
       display: inline-block;
     }
-
     .description {
       display: -webkit-box;
       -webkit-line-clamp: 2;
@@ -118,10 +108,9 @@ const props = defineProps({
     }
   }
 }
-
 .dark-mode {
   .cta > svg {
     color: #000;
   }
 }
-</style>
+</style>

theseus_gui/src/components/ui/News.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { Card, ChevronRightIcon } from 'omorphia'
-
 const props = defineProps({
   news: Object,
 })
@@ -33,59 +32,49 @@ const props = defineProps({
   box-shadow: var(--shadow-raised-lg);
   cursor: pointer;
   transition: all ease-in-out 0.1s;
-
   &:hover {
     box-shadow: var(--shadow-floating);
     filter: brightness(0.85);
   }
-
   img {
     display: flex;
     width: 8.4375rem; /* from wireframe */
     height: 8.5rem; /* from wireframe */
     border-radius: 0.9rem 0 0 0.9rem;
   }
-
   .body {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 8.5rem; /* from wireframe */
     padding: 0.45rem;
-
     .headline {
       display: inherit;
       flex-direction: inherit;
       margin: 0.4rem 0;
       width: 100%;
-
       h2 {
         font-size: 1rem;
         text-transform: uppercase;
       }
-
       p {
         font-size: 0.7rem;
       }
     }
-
     .underline {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       margin-top: auto;
-
       p {
         font-size: 0.7rem;
       }
-
       a {
         transition: all ease-in-out 0.2s;
         width: 1.5rem;
         color: var(--color-primary);
         font-size: 1.3rem;
-
         &:hover {
           transform: translate(1px);
           filter: brightness(150%);
@@ -94,4 +83,4 @@ const props = defineProps({
     }
   }
 }
-</style>
+</style>