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>