46bc04f69f
* Adjust quite a bit of wording Also converts many title case things to sentence case (fixes #238) * Change advised to recommended * Oops, I missed a page * That page too * Missed a spot
117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="section-header columns">
|
|
<h3 class="column-grow-1">My mods</h3>
|
|
<nuxt-link class="brand-button column" to="/mod/create">
|
|
Create a mod
|
|
</nuxt-link>
|
|
</div>
|
|
<div v-if="mods.length !== 0">
|
|
<ModCard
|
|
v-for="mod in mods"
|
|
:id="mod.slug ? mod.slug : mod.id"
|
|
:key="mod.id"
|
|
:author="mod.author"
|
|
:name="mod.title"
|
|
:description="mod.description"
|
|
:latest-version="mod.latest_version"
|
|
:created-at="mod.published"
|
|
:updated-at="mod.updated"
|
|
:downloads="mod.downloads.toString()"
|
|
:icon-url="mod.icon_url"
|
|
:author-url="mod.author_url"
|
|
:page-url="mod.page_url"
|
|
:categories="mod.categories"
|
|
:edit-mode="true"
|
|
:status="mod.status"
|
|
:is-modrinth="true"
|
|
>
|
|
<nuxt-link
|
|
class="button column edit-button"
|
|
:to="'/mod/' + mod.id + '/settings'"
|
|
>
|
|
Settings
|
|
</nuxt-link>
|
|
</ModCard>
|
|
</div>
|
|
<div v-else class="error">
|
|
<UpToDate class="icon"></UpToDate><br />
|
|
<span class="text"
|
|
>You don't have any mods.<br />
|
|
Would you like to
|
|
<nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ModCard from '~/components/ui/ProjectCard'
|
|
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
|
|
|
|
export default {
|
|
components: {
|
|
ModCard,
|
|
UpToDate,
|
|
},
|
|
async asyncData(data) {
|
|
let res = await data.$axios.get(
|
|
`user/${data.$auth.user.id}/mods`,
|
|
data.$auth.headers
|
|
)
|
|
|
|
res = await data.$axios.get(
|
|
`mods?ids=${JSON.stringify(res.data)}`,
|
|
data.$auth.headers
|
|
)
|
|
|
|
return {
|
|
mods: res.data,
|
|
}
|
|
},
|
|
head: {
|
|
title: 'My Mods - Modrinth',
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mod-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.edit-button {
|
|
align-self: flex-end;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 8rem;
|
|
height: 8rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// .buttonse {
|
|
// margin-left: 4.5rem;
|
|
// padding: 0.5rem 2rem 0.5rem 2rem;
|
|
// }
|
|
</style>
|