Merge branch 'master' into mod-management

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: {
     type: String,
@@ -18,16 +18,16 @@ const props = defineProps({
 
 <template>
   <div>
-    <RouterLink v-if="display === 'list'" class="instance-list-item" :to="`${props.instance.id}`">{{
-      props.instance.name
-    }}</RouterLink>
-    <Card v-else-if="display === 'card'" class="instance-card-item">
+    <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>
@@ -40,32 +40,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;
@@ -80,27 +74,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;
@@ -113,7 +104,6 @@ const props = defineProps({
       line-height: 110%;
       display: inline-block;
     }
-
     .description {
       display: -webkit-box;
       -webkit-line-clamp: 2;
@@ -126,10 +116,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: {
     type: Object,
@@ -38,59 +37,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%);
@@ -99,4 +88,4 @@ const props = defineProps({
     }
   }
 }
-</style>
+</style>