You've already forked AstralRinth
forked from didirus/AstralRinth
Search UI improvements (#107)
* Base impl * Make project type selectable * Update Browse.vue * address changes * Quick create * Run linter * fix merge * Addressed changes * Installation improvements * Run lint * resourcepacks * automatic installation of dependencies * Fix bugs with search * Addressed changes * Run linter * Fixed direct install not working * Remove back to search * Update Index.vue * Addressed some changes * Shader fix * fix resetting * Update Browse.vue * Direct install from search * More improvements * Update SearchCard.vue * Card V2 * Run linter * add instance ignoring * Update Browse.vue * Finalize changes * Update SearchCard.vue * More adjustments * Fix out of order rendering * Run linter * Fix issues * Add unlisteners --------- Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
136
theseus_gui/src/components/ui/IncompatibilityWarningModal.vue
Normal file
136
theseus_gui/src/components/ui/IncompatibilityWarningModal.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<Modal ref="incompatibleModal" header="Incompatibility warning">
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
|
||||
you're trying to install it on. Are you sure you want to continue? Dependencies will not be
|
||||
installed.
|
||||
</p>
|
||||
<table>
|
||||
<tr class="header">
|
||||
<th>{{ instance?.metadata.name }}</th>
|
||||
<th>{{ projectTitle }}</th>
|
||||
</tr>
|
||||
<tr class="content">
|
||||
<td class="data">
|
||||
{{ instance?.metadata.loader }} {{ instance?.metadata.game_version }}
|
||||
</td>
|
||||
<td>
|
||||
<DropdownSelect
|
||||
v-if="versions?.length > 1"
|
||||
v-model="selectedVersion"
|
||||
:options="versions"
|
||||
placeholder="Select version"
|
||||
:display-name="
|
||||
(version) =>
|
||||
`${version?.name} (${version?.loaders
|
||||
.map((name) => formatCategory(name))
|
||||
.join(', ')} - ${version?.game_versions.join(', ')})`
|
||||
"
|
||||
render-up
|
||||
/>
|
||||
<span v-else>
|
||||
<span>
|
||||
{{ selectedVersion?.name }} ({{
|
||||
selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
|
||||
}}
|
||||
- {{ selectedVersion?.game_versions.join(', ') }})
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="button-group">
|
||||
<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
|
||||
<Button color="primary" :disabled="installing" @click="install()">
|
||||
<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Modal, XIcon, DownloadIcon, DropdownSelect, formatCategory } from 'omorphia'
|
||||
import { add_project_from_version as installMod } from '@/helpers/profile'
|
||||
import { defineExpose, ref } from 'vue'
|
||||
|
||||
const instance = ref(null)
|
||||
const projectTitle = ref(null)
|
||||
const versions = ref(null)
|
||||
const selectedVersion = ref(null)
|
||||
const incompatibleModal = ref(null)
|
||||
const installing = ref(false)
|
||||
|
||||
let markInstalled = () => {}
|
||||
|
||||
defineExpose({
|
||||
show: (instanceVal, projectTitleVal, selectedVersions, extMarkInstalled) => {
|
||||
instance.value = instanceVal
|
||||
projectTitle.value = projectTitleVal
|
||||
versions.value = selectedVersions
|
||||
selectedVersion.value = selectedVersions[0]
|
||||
incompatibleModal.value.show()
|
||||
markInstalled = extMarkInstalled
|
||||
},
|
||||
})
|
||||
|
||||
const install = async () => {
|
||||
installing.value = true
|
||||
await installMod(instance.value.path, selectedVersion.value.id)
|
||||
installing.value = false
|
||||
markInstalled()
|
||||
incompatibleModal.value.hide()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-lg);
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 0 0 1px var(--color-button-bg);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-bg);
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--color-button-bg);
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-right: 1px solid var(--color-button-bg);
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-right: 1px solid var(--color-button-bg);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -2,11 +2,15 @@
|
||||
import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
|
||||
import { install as pack_install } from '@/helpers/pack'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const version = ref('')
|
||||
const title = ref('')
|
||||
const icon = ref('')
|
||||
const confirmModal = ref(null)
|
||||
const installing = ref(false)
|
||||
|
||||
defineExpose({
|
||||
show: (id, projectTitle, projectIcon) => {
|
||||
@@ -18,8 +22,11 @@ defineExpose({
|
||||
})
|
||||
|
||||
async function install() {
|
||||
confirmModal.value.hide()
|
||||
installing.value = true
|
||||
let id = await pack_install(version.value)
|
||||
await pack_install(version.value, title.value, icon.value ? icon.value : null)
|
||||
await router.push({ path: `/instance/${encodeURIComponent(id)}` })
|
||||
confirmModal.value.hide()
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -31,7 +38,9 @@ async function install() {
|
||||
</p>
|
||||
<div class="button-group">
|
||||
<Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
|
||||
<Button color="primary" @click="install()"><DownloadIcon /> Install</Button>
|
||||
<Button color="primary" :disabled="installing" @click="install()"
|
||||
><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onUnmounted, ref, useSlots } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ofetch } from 'ofetch'
|
||||
import { Card, SaveIcon, XIcon, Avatar, AnimatedLogo } from 'omorphia'
|
||||
@@ -33,13 +33,14 @@ const playing = ref(false)
|
||||
|
||||
const uuid = ref(null)
|
||||
const modLoading = ref(false)
|
||||
const slots = useSlots()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const seeInstance = async () => {
|
||||
const instancePath = props.instance.metadata
|
||||
? `/instance/${encodeURIComponent(props.instance.path)}`
|
||||
: `/project/${encodeURIComponent(props.instance.project_id)}`
|
||||
? `/instance/${encodeURIComponent(props.instance.path)}/`
|
||||
: `/project/${encodeURIComponent(props.instance.project_id)}/`
|
||||
|
||||
await router.push(instancePath)
|
||||
}
|
||||
@@ -118,31 +119,42 @@ const stop = async (e) => {
|
||||
uuid.value = null
|
||||
}
|
||||
|
||||
await process_listener((e) => {
|
||||
const unlisten = await process_listener((e) => {
|
||||
if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
|
||||
})
|
||||
|
||||
onUnmounted(() => unlisten())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="instance">
|
||||
<Card v-if="props.small" class="instance-small-card button-base" @click="seeInstance">
|
||||
<Avatar
|
||||
:src="
|
||||
!props.instance.metadata.icon ||
|
||||
(props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
|
||||
? props.instance.metadata.icon
|
||||
: convertFileSrc(instance.metadata?.icon)
|
||||
"
|
||||
:alt="props.instance.metadata.name"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="instance-small-card__info">
|
||||
<span class="title">{{ props.instance.metadata.name }}</span>
|
||||
{{
|
||||
props.instance.metadata.loader.charAt(0).toUpperCase() +
|
||||
props.instance.metadata.loader.slice(1)
|
||||
}}
|
||||
{{ props.instance.metadata.game_version }}
|
||||
<Card v-if="props.small" class="instance-small-card" :class="{ 'button-base': !slots.content }">
|
||||
<div
|
||||
class="instance-small-card__description"
|
||||
:class="{ 'button-base': slots.content }"
|
||||
@click="seeInstance"
|
||||
>
|
||||
<Avatar
|
||||
:src="
|
||||
!props.instance.metadata.icon ||
|
||||
(props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
|
||||
? props.instance.metadata.icon
|
||||
: convertFileSrc(instance.metadata?.icon)
|
||||
"
|
||||
:alt="props.instance.metadata.name"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="instance-small-card__info">
|
||||
<span class="title">{{ props.instance.metadata.name }}</span>
|
||||
{{
|
||||
props.instance.metadata.loader.charAt(0).toUpperCase() +
|
||||
props.instance.metadata.loader.slice(1)
|
||||
}}
|
||||
{{ props.instance.metadata.game_version }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="slots.content" class="instance-small-card__content">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</Card>
|
||||
<Card
|
||||
@@ -180,7 +192,7 @@ await process_listener((e) => {
|
||||
>
|
||||
<PlayIcon />
|
||||
</div>
|
||||
<div v-else-if="modLoading === true && playing === false" class="cta loading">
|
||||
<div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
|
||||
<AnimatedLogo class="loading" />
|
||||
</div>
|
||||
<div
|
||||
@@ -200,12 +212,27 @@ await process_listener((e) => {
|
||||
<style lang="scss">
|
||||
.instance-small-card {
|
||||
background-color: var(--color-bg) !important;
|
||||
padding: 1rem !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
min-height: min-content !important;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
||||
.instance-small-card__description {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
padding: var(--gap-xl);
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
&:not(.button-base) {
|
||||
padding-bottom: var(--gap-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.instance-small-card__info {
|
||||
display: flex;
|
||||
@@ -217,6 +244,15 @@ await process_listener((e) => {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.instance-small-card__content {
|
||||
padding: var(--gap-xl);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.instance {
|
||||
@@ -242,33 +278,6 @@ await process_listener((e) => {
|
||||
}
|
||||
}
|
||||
|
||||
.install {
|
||||
background: var(--color-brand);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.stop {
|
||||
background: var(--color-red);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cta.loading {
|
||||
background: hsl(220, 11%, 10%) !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
.instance-card-item {
|
||||
background: hsl(0, 0%, 100%) !important;
|
||||
@@ -304,6 +313,33 @@ await process_listener((e) => {
|
||||
filter: none !important; /* overrides button-base class */
|
||||
box-shadow: var(--shadow-floating);
|
||||
}
|
||||
|
||||
&.install {
|
||||
background: var(--color-brand);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.stop {
|
||||
background: var(--color-red);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.loading-cta {
|
||||
background: hsl(220, 11%, 10%) !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loading {
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
|
||||
svg {
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instance-card-item {
|
||||
|
||||
@@ -190,6 +190,7 @@ const upload_icon = async () => {
|
||||
],
|
||||
})
|
||||
|
||||
if (!icon.value) return
|
||||
display_icon.value = tauri.convertFileSrc(icon.value)
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
RightArrowIcon,
|
||||
CheckIcon,
|
||||
} from 'omorphia'
|
||||
import { computed, ref, shallowRef } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { add_project_from_version as installMod, check_installed, list } from '@/helpers/profile'
|
||||
import { tauri } from '@tauri-apps/api'
|
||||
import { open } from '@tauri-apps/api/dialog'
|
||||
@@ -34,9 +34,9 @@ const gameVersion = ref(null)
|
||||
const creatingInstance = ref(false)
|
||||
|
||||
defineExpose({
|
||||
show: async (projectId, selectedVersion) => {
|
||||
show: async (projectId, selectedVersions) => {
|
||||
project.value = projectId
|
||||
versions.value = selectedVersion
|
||||
versions.value = selectedVersions
|
||||
installModal.value.show()
|
||||
searchFilter.value = ''
|
||||
|
||||
@@ -44,7 +44,7 @@ defineExpose({
|
||||
},
|
||||
})
|
||||
|
||||
const profiles = shallowRef(await getData())
|
||||
const profiles = ref([])
|
||||
|
||||
async function install(instance) {
|
||||
instance.installing = true
|
||||
@@ -109,6 +109,7 @@ const upload_icon = async () => {
|
||||
],
|
||||
})
|
||||
|
||||
if (!icon.value) return
|
||||
display_icon.value = tauri.convertFileSrc(icon.value)
|
||||
}
|
||||
|
||||
@@ -147,7 +148,7 @@ const check_valid = computed(() => {
|
||||
<Modal ref="installModal" header="Install mod to instance">
|
||||
<div class="modal-body">
|
||||
<input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
|
||||
<div class="profiles">
|
||||
<div class="profiles" :class="{ 'hide-creation': !showCreation }">
|
||||
<div v-for="profile in profiles" :key="profile.metadata.name" class="option">
|
||||
<Button
|
||||
color="raised"
|
||||
@@ -265,6 +266,10 @@ const check_valid = computed(() => {
|
||||
.profiles {
|
||||
max-height: 12rem;
|
||||
overflow-y: auto;
|
||||
|
||||
&.hide-creation {
|
||||
max-height: 21rem;
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
@@ -277,6 +282,7 @@ const check_valid = computed(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
img {
|
||||
margin-right: 0.5rem;
|
||||
@@ -289,7 +295,9 @@ const check_valid = computed(() => {
|
||||
}
|
||||
|
||||
.profile-button {
|
||||
align-content: start;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -67,8 +67,7 @@ const showCard = ref(false)
|
||||
|
||||
const currentProcesses = ref(await getRunningProfiles())
|
||||
|
||||
await process_listener(async (event) => {
|
||||
console.log(event)
|
||||
await process_listener(async () => {
|
||||
await refresh()
|
||||
})
|
||||
|
||||
|
||||
282
theseus_gui/src/components/ui/SearchCard.vue
Normal file
282
theseus_gui/src/components/ui/SearchCard.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<Card class="card button-base" @click="$router.push(`/project/${project.project_id}/`)">
|
||||
<div class="icon">
|
||||
<Avatar :src="project.icon_url" size="md" class="search-icon" />
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="title joined-text">
|
||||
<h2>{{ project.title }}</h2>
|
||||
<span>by {{ project.author }}</span>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{ project.description }}
|
||||
</div>
|
||||
<div class="tags">
|
||||
<Categories :categories="categories" :type="project.project_type">
|
||||
<EnvironmentIndicator
|
||||
:type-only="project.moderation"
|
||||
:client-side="project.client_side"
|
||||
:server-side="project.server_side"
|
||||
:type="project.project_type"
|
||||
:search="true"
|
||||
/>
|
||||
</Categories>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats button-group">
|
||||
<div v-if="featured" class="badge">
|
||||
<StarIcon />
|
||||
Featured
|
||||
</div>
|
||||
<div class="badge">
|
||||
<DownloadIcon />
|
||||
{{ formatNumber(project.downloads) }}
|
||||
</div>
|
||||
<div class="badge">
|
||||
<HeartIcon />
|
||||
{{ formatNumber(project.follows) }}
|
||||
</div>
|
||||
<div class="badge">
|
||||
<CalendarIcon />
|
||||
{{ formatCategory(dayjs(project.date_modified).fromNow()) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="install">
|
||||
<Button
|
||||
:to="`/browse/${project.slug}`"
|
||||
color="primary"
|
||||
:disabled="installed || installing"
|
||||
@click.stop="install()"
|
||||
>
|
||||
<DownloadIcon v-if="!installed" />
|
||||
<CheckIcon v-else />
|
||||
{{ installing ? 'Installing' : installed ? 'Installed' : 'Install' }}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Avatar,
|
||||
Card,
|
||||
Categories,
|
||||
EnvironmentIndicator,
|
||||
Button,
|
||||
DownloadIcon,
|
||||
formatNumber,
|
||||
formatCategory,
|
||||
HeartIcon,
|
||||
CalendarIcon,
|
||||
CheckIcon,
|
||||
StarIcon,
|
||||
} from 'omorphia'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { ref } from 'vue'
|
||||
import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
|
||||
import { install as packInstall } from '@/helpers/pack.js'
|
||||
import { installVersionDependencies } from '@/helpers/utils.js'
|
||||
import { ofetch } from 'ofetch'
|
||||
import { useRouter } from 'vue-router'
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
backgroundImage: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
project: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
categories: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
instance: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
confirmModal: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
modInstallModal: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
incompatibilityWarningModal: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
featured: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const installing = ref(false)
|
||||
|
||||
const installed = ref(
|
||||
props.instance
|
||||
? Object.values(props.instance.projects).some(
|
||||
(p) => p.metadata?.project?.id === props.project.project_id
|
||||
)
|
||||
: false
|
||||
)
|
||||
|
||||
async function install() {
|
||||
installing.value = true
|
||||
const versions = await ofetch(
|
||||
`https://api.modrinth.com/v2/project/${props.project.project_id}/version`
|
||||
)
|
||||
let queuedVersionData
|
||||
|
||||
if (!props.instance) {
|
||||
queuedVersionData = versions[0]
|
||||
} else {
|
||||
queuedVersionData = versions.find(
|
||||
(v) =>
|
||||
v.game_versions.includes(props.instance.metadata.game_version) &&
|
||||
v.loaders.includes(props.instance.metadata.loader)
|
||||
)
|
||||
}
|
||||
|
||||
if (props.project.project_type === 'modpack') {
|
||||
const packs = Object.values(await list())
|
||||
if (
|
||||
packs.length === 0 ||
|
||||
!packs
|
||||
.map((value) => value.metadata)
|
||||
.find((pack) => pack.linked_data?.project_id === props.project.project_id)
|
||||
) {
|
||||
let id = await packInstall(queuedVersionData.id, props.project.title, props.project.icon_url)
|
||||
await router.push({ path: `/instance/${encodeURIComponent(id)}` })
|
||||
} else {
|
||||
props.confirmModal.show(queuedVersionData.id)
|
||||
}
|
||||
} else {
|
||||
if (props.instance) {
|
||||
if (!queuedVersionData) {
|
||||
props.incompatibilityWarningModal.show(
|
||||
props.instance,
|
||||
props.project.title,
|
||||
versions,
|
||||
() => (installed.value = true)
|
||||
)
|
||||
installing.value = false
|
||||
return
|
||||
} else {
|
||||
await installMod(props.instance.path, queuedVersionData.id)
|
||||
installVersionDependencies(props.instance, queuedVersionData)
|
||||
}
|
||||
} else {
|
||||
props.modInstallModal.show(props.project.project_id, versions)
|
||||
installing.value = false
|
||||
return
|
||||
}
|
||||
if (props.instance) installed.value = true
|
||||
}
|
||||
|
||||
installing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
grid-column: 2 / 4;
|
||||
flex-direction: column;
|
||||
grid-row: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
.description {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.install {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 6rem auto 7rem;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
|
||||
&:active:not(&:disabled) {
|
||||
scale: 0.98 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.joined-text {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
column-gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0 !important;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
border-radius: var(--radius-md);
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg);
|
||||
padding-block: var(--gap-sm);
|
||||
padding-inline: var(--gap-lg);
|
||||
|
||||
svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.featured {
|
||||
background-color: var(--color-brand-highlight);
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user