eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Layout refactor (#150)

Browse Source 
* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing
This commit is contained in:
Redblueflame
2021-03-31 19:09:18 +02:00
committed by GitHub
parent e80a5d82a4
commit af8fc53704
29 changed files with 100 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pages/dashboard.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="page-container">
<div class="page-contents">
<div class="sidebar-l">
<div class="card page-nav">
<nuxt-link :to="'/dashboard/projects'" class="tab last">
<ModIcon />
My mods
</nuxt-link>
<nuxt-link :to="'/dashboard/notifications'" class="tab last">
<NotificationsIcon />
Notifications
</nuxt-link>
<nuxt-link :to="'/dashboard/follows'" class="tab last">
<FollowIcon />
Followed Mods
</nuxt-link>
<nuxt-link
v-if="
$auth.user.role === 'admin' || $auth.user.role === 'moderator'
"
:to="'/dashboard/moderation'"
class="tab last"
>
<ModerationIcon />
Moderation
</nuxt-link>
<nuxt-link :to="'/dashboard/settings'" class="tab last">
<SettingsIcon />
Settings
</nuxt-link>
</div>
<m-footer class="footer" />
</div>
<div class="content">
<NuxtChild />
</div>
</div>
</div>
</template>
<script>
import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
import FollowIcon from '~/assets/images/utils/heart.svg?inline'
export default {
name: 'DashboardPage',
components: {
ModIcon,
ModerationIcon,
SettingsIcon,
NotificationsIcon,
FollowIcon,
},
}
</script>
<style lang="scss" scoped>
.footer {
padding-top: 0;
}
</style>

38
pages/dashboard/follows.vue
View File

@@ -1,5 +1,5 @@
<template>
<DashboardPage>
<div>
<div class="section-header">
<h3 class="column-grow-1">Followed mods</h3>
</div>
@@ -9,18 +9,18 @@
:id="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"
:created-at="mod.published"
:description="mod.description"
:downloads="mod.downloads.toString()"
:edit-mode="true"
:icon-url="mod.icon_url"
:is-modrinth="true"
:latest-version="mod.latest_version"
:name="mod.title"
:page-url="mod.page_url"
:updated-at="mod.updated"
>
<div class="buttons">
<button
@@ -34,27 +34,26 @@
</ModCard>
</div>
<div v-else class="error">
<FollowIllustration class="icon"></FollowIllustration><br />
<FollowIllustration class="icon"></FollowIllustration>
<br />
<span class="text"
>You don't have any followed mods. <br />
Why don't you <nuxt-link to="/mods" class="link">search</nuxt-link> for
Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for
new ones?</span
>
</div>
</DashboardPage>
</div>
</template>
<script>
import axios from 'axios'
import DashboardPage from '@/components/wrapper/DashboardPage'
import ModCard from '~/components/ui/ProjectCard'
import FollowIcon from '~/assets/images/utils/heart.svg?inline'
import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
export default {
components: {
DashboardPage,
ModCard,
FollowIcon,
FollowIllustration,
@@ -76,17 +75,9 @@ export default {
},
methods: {
async unfavMod(index) {
const config = {
headers: {
Authorization: this.$auth.getToken('local')
? this.$auth.getToken('local')
: '',
},
}
await axios.delete(
`https://api.modrinth.com/api/v1/mod/${this.mods[index].id}/follow`,
config
this.$auth.headers
)
this.mods.splice(index, 1)
@@ -111,6 +102,7 @@ export default {
margin-left: auto;
padding: 0.5rem;
}
.error {
display: flex;
flex-direction: column;

24
pages/dashboard/misc/revoke-token.vue
View File

@@ -1,5 +1,5 @@
<template>
<DashboardPage>
<div>
<div class="section-header columns">
<h3 class="column-grow-1">Revoke your Modrinth token</h3>
</div>
@@ -23,10 +23,11 @@
<ol>
<li>
<a
target="_blank"
href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
>Head to the Modrinth Application page on GitHub.</a
target="_blank"
>
Head to the Modrinth Application page on GitHub.
</a>
Make sure to be logged into the GitHub account you used for Modrinth!
</li>
<li>
@@ -36,22 +37,19 @@
</ol>
<p>Once you have completed the steps, press the continue button below.</p>
<p>
<strong
>This will log you out of Modrinth, however when you log back in your
token will be regenerated.</strong
>
<strong>
This will log you out of Modrinth, however when you log back in your
token will be regenerated.
</strong>
</p>
<button @click="logout">Continue</button>
</section>
</DashboardPage>
</div>
</template>
<script>
import DashboardPage from '@/components/wrapper/DashboardPage'
export default {
components: {
DashboardPage,
},
components: {},
methods: {
async logout() {
this.$cookies.set('auth-token-reset', true)
@@ -103,10 +101,12 @@ label {
flex: 3;
height: fit-content;
}
button {
:hover {
cursor: pointer;
}
height: fit-content;
flex: 1;
}

27
pages/dashboard/moderation.vue
View File

@@ -1,5 +1,5 @@
<template>
<DashboardPage>
<div>
<div class="section-header">
<h3 class="column-grow-1">Mods</h3>
</div>
@@ -9,19 +9,19 @@
:id="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"
:created-at="mod.published"
:description="mod.description"
:downloads="mod.downloads.toString()"
:edit-mode="true"
:status="mod.status"
:icon-url="mod.icon_url"
:is-modrinth="true"
:latest-version="mod.latest_version"
:name="mod.title"
:page-url="mod.page_url"
:status="mod.status"
:updated-at="mod.updated"
>
<div class="buttons">
<button
@@ -79,22 +79,21 @@
</div>
</div>
<div v-else class="error">
<Security class="icon"></Security><br />
<Security class="icon"></Security>
<br />
<span class="text">You are up-to-date!</span>
</div>
</DashboardPage>
</div>
</template>
<script>
import axios from 'axios'
import DashboardPage from '@/components/wrapper/DashboardPage'
import ModCard from '~/components/ui/ProjectCard'
import Security from '~/assets/images/illustrations/security.svg?inline'
export default {
components: {
DashboardPage,
ModCard,
Security,
},

11
pages/dashboard/notifications.vue
View File

@@ -1,5 +1,5 @@
<template>
<DashboardPage>
<div>
<div class="section-header columns">
<h3 class="column-grow-1">My notifications</h3>
</div>
@@ -44,21 +44,19 @@
</div>
</div>
<div v-else class="error">
<UpToDate class="icon"></UpToDate><br />
<UpToDate class="icon"></UpToDate>
<br />
<span class="text">You are up-to-date!</span>
</div>
</DashboardPage>
</div>
</template>
<script>
import axios from 'axios'
import DashboardPage from '@/components/wrapper/DashboardPage'
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
export default {
components: {
DashboardPage,
UpToDate,
},
async asyncData(data) {
@@ -136,6 +134,7 @@ export default {
margin: 0;
}
}
.error {
display: flex;
flex-direction: column;

7
pages/dashboard/projects.vue
View File

@@ -1,5 +1,5 @@
<template>
<DashboardPage>
<div>
<div class="section-header columns">
<h3 class="column-grow-1">My mods</h3>
<nuxt-link class="brand-button column" to="/mod/create">
@@ -42,19 +42,16 @@
<nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
>
</div>
</DashboardPage>
</div>
</template>
<script>
import axios from 'axios'
import DashboardPage from '@/components/wrapper/DashboardPage'
import ModCard from '~/components/ui/ProjectCard'
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
export default {
components: {
DashboardPage,
ModCard,
UpToDate,
},

8
pages/dashboard/settings.vue
View File

@@ -1,6 +1,6 @@
/* eslint-disable vue/attribute-hyphenation */
<template>
<DashboardPage>
<div>
<ConfirmPopup
ref="delete_popup"
title="Are you sure you want to delete your account?"
@@ -108,16 +108,16 @@
</div>
</label>
</section>
</DashboardPage>
</div>
</template>
<script>
import DashboardPage from '@/components/wrapper/DashboardPage'
import axios from 'axios'
import ConfirmPopup from '~/components/ui/ConfirmPopup'
export default {
components: {
DashboardPage,
ConfirmPopup,
},
fetch() {
this.username = this.$auth.user.username

2
pages/mod/_id/edit.vue
View File

@@ -304,8 +304,8 @@
import axios from 'axios'
import Multiselect from 'vue-multiselect'
import MFooter from '~/components/layout/MFooter'
import FileInput from '~/components/ui/FileInput'
import MFooter from '~/components/layout/MFooter'
export default {
components: {

2
pages/mod/_id/index.vue
View File

@@ -17,7 +17,7 @@
<script>
import axios from 'axios'
import ModPage from '@/components/wrapper/ModPage'
import ModPage from '~/components/layout/ModPage'
export default {
components: { ModPage },

2
pages/mod/_id/newversion.vue
View File

@@ -129,7 +129,7 @@
import axios from 'axios'
import Multiselect from 'vue-multiselect'
import ModPage from '@/components/wrapper/ModPage'
import ModPage from '~/components/layout/ModPage'
export default {
components: {

2
pages/mod/_id/settings.vue
View File

@@ -248,7 +248,7 @@
<script>
import axios from 'axios'
import ModPage from '@/components/wrapper/ModPage'
import ModPage from '~/components/layout/ModPage'
import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'

2
pages/mod/_id/version/_version/edit.vue
View File

@@ -116,8 +116,8 @@
<script>
import axios from 'axios'
import ModPage from '@/components/wrapper/ModPage'
import Multiselect from 'vue-multiselect'
import ModPage from '~/components/layout/ModPage'
export default {
components: {

4
pages/mod/_id/version/_version/index.vue
View File

@@ -147,9 +147,9 @@
<script>
import axios from 'axios'
import ModPage from '@/components/wrapper/ModPage'
import ModPage from '~/components/layout/ModPage'
import Categories from '~/components/ui/Categories'
import Categories from '~/components/ui/search/Categories'
import FileInput from '~/components/ui/FileInput'
import TrashIcon from '~/assets/images/utils/trash.svg?inline'
import EditIcon from '~/assets/images/utils/edit.svg?inline'

2
pages/mod/_id/versions.vue
View File

@@ -92,7 +92,7 @@
<script>
import axios from 'axios'
import ModPage from '@/components/wrapper/ModPage'
import ModPage from '~/components/layout/ModPage'
import DownloadIcon from '~/assets/images/utils/download.svg?inline'
import ForgeIcon from '~/assets/images/categories/forge.svg?inline'

2
pages/mod/create.vue
View File

@@ -502,8 +502,8 @@
import axios from 'axios'
import Multiselect from 'vue-multiselect'
import MFooter from '~/components/layout/MFooter'
import FileInput from '~/components/ui/FileInput'
import MFooter from '~/components/layout/MFooter'
import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
import FabricIcon from '~/assets/images/categories/fabric.svg?inline'

4
pages/mods.vue
View File

@@ -290,7 +290,7 @@
import Multiselect from 'vue-multiselect'
import axios from 'axios'
import SearchResult from '~/components/ui/ProjectCard'
import Pagination from '~/components/ui/search/Pagination'
import Pagination from '~/components/ui/Pagination'
import SearchFilter from '~/components/ui/search/SearchFilter'
import MFooter from '~/components/layout/MFooter'
@@ -313,7 +313,7 @@ import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
import SearchIcon from '~/assets/images/utils/search.svg?inline'
import ExitIcon from '~/assets/images/utils/exit.svg?inline'
import Advertisement from '~/components/ui/Advertisement'
import Advertisement from '~/components/Advertisement'
export default {
auth: false,

2
pages/user/_id.vue
View File

@@ -89,7 +89,7 @@ import MFooter from '~/components/layout/MFooter'
import ReportIcon from '~/assets/images/utils/report.svg?inline'
import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
import DownloadIcon from '~/assets/images/utils/download.svg?inline'
import Advertisement from '~/components/ui/Advertisement'
import Advertisement from '~/components/Advertisement'
export default {
auth: false,