You've already forked AstralRinth
forked from didirus/AstralRinth
Rewrite Parity (#647)
* Rewrite Parity * Update SEO, fix modals, add dashes to changelog * Edit create version title * Cache tags, SEO for search/partial noscript support, notifications fix * Deploy? * Fix vercel config * Fix it again * Finish user editing * Remove broken docker build * Switch reports to modals * Update project card * Navbar line animation in most places * Add chips * Move to navlink query params * remove autogen file * Add copy code * Fix webkit text box outlines, port report modal * Update error page * Switch to avatar component * Make keyboard nav work * Fix team member spacing * improve project ID display (#676) * Bug fixes * Update OG site title * More fixes * Design tweaks * Fix card wrapping on mobile * Darken light theme color a little * Sidebar navigation for settings, notifications, and moderation * Change follow icon from a heart to a bell * Revert "Change follow icon from a heart to a bell" This reverts commit e30b46ec5d93c57df847be88eba123c7419dd03b. * Change follows icon in settings * AaaaUUUUUUUGghghhhhhhhh * Project sidebar transparent button animations * Update file input button styling and change icon remove button text * Fix environments filter condition being inverted * Remove -> revert * Improve readability of warning banners on light mode * Fix mobile menu button colors * Clean up notifications page more * Creator dashboard and monetization work * Add processing fees declarations and acknowledgement box * Beta badges * Downgrade Nuxt Vercel Builder * Update the style of button groups to be more consistent * More button consistency * Remove desktop navbar on mobile * Update home page progress indicators * Fix page jumping (Thanks @stairman06) * Make checkbox checked style consistent with other selection indicators * More home page updates * Properly reset NavRows * Move filters menu on mobile * Stylized checkbox updated to match active styling * Filters icon * Respect prefers-reduced-motion * Add most backend payouts changes (untested) * Finish tested payouts code * Allow monetization unenrolling * No longer use brand color for active highlights on standard nav elements * More consistent button group on project page * Rounded tables * Fix some things (#716) * Team member fixes + re-add changelog/versions stuff * Remove dummy data * The great CSS refactor * Remove commented out css * Give modals the legacy label styles and update profile edit labels * Fix active chip size * Remove shadow from selected chip * Require email set for CMP * Update styles of notifications to universal-card * Equivalent exchange, trading some jank for some less bad jank * Fix all gallery buttons being missing when there is only 1 image * Update project creation modal * Make beta badge less bright * Beta badge heading styling * Update withdraw processing fees info * Remove redundant label * be * Fix inverted logic * 2% is 0.02 * Add toggle to turn off alpha modpacks banner * Why warning button? * Add more footer links (#719) * Add more footer links * Move twitter * Make items on user pages less comically large and move ad above navigation * Bump text down a little on home page * Update favicon colors * Remove task list package and change default description to use bullet points * I don't remember why I made this important but let's not * Ah, yes * this doesn't actually need to be important * Align items in input groups * Adjust some spacings and clear creation modal on opening * Versions now clickable * Add link to edit page to default description * Improve monetization information text * Make wrapped text inputs not shrink * Make chips work better * smol margin on clear mod message button * Allow non-authenticated users to access settings * Remove settings anchors * Fix versions page button style on firefox * Add advanced rendering toggle * Update slug input and icon card in project edit page * Legal sidebar * h1 at beginning of description no longer has top margin * Use universal card for legal pages * Update email addresses on legal pages * Update various page titles and descriptions for consistency * Various fixes and consolidation to API URL retrieval Prevents a bug where it's possible to generate the tags under one API, switch the API, and still have tags leftover from the old API Also finally fixes staging URL being jank * Make the theme button show regardless of login state Also remove the change theme from the user dropdown because it's very redundant with the several other ways of changing theme * Make mobile profile dropdown ordering consistent with desktop * Change the base url back * Revert "Change the base url back" This reverts commit c1da89fddb83776b39f626eab33c8dc67f8a75e4. * constantize * Tiny fixes (#722) * Box-shadow chip outlines * Show settings when signed out * mods -> projects * space * Beta badge border * Slug input overflow fix, scrollable * 🙈 it will all be okay 🙊 this is just temporary 🙉 😭😭 forgive me * Fix minor bugs * fix moderation page * More fixes * Temp fix for download button * BEGONE TABLES * Fix download button Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com> Co-authored-by: Prospector <prospectordev@gmail.com> Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com> Co-authored-by: triphora <emmaffle@modrinth.com>
This commit is contained in:
Geometrically
@@ -1,130 +1,232 @@
|
||||
<template>
|
||||
<div class="normal-page">
|
||||
<div class="normal-page__sidebar">
|
||||
<aside class="card sidebar">
|
||||
<img
|
||||
class="sidebar__item profile-picture"
|
||||
:src="user.avatar_url"
|
||||
<div>
|
||||
<ModalCreation ref="modal_creation" />
|
||||
<ModalReport ref="modal_report" :item-id="user.id" item-type="user" />
|
||||
<div class="user-header-wrapper">
|
||||
<div class="user-header">
|
||||
<Avatar
|
||||
:src="previewImage ? previewImage : user.avatar_url"
|
||||
size="md"
|
||||
circle
|
||||
:alt="user.username"
|
||||
/>
|
||||
<h1 class="sidebar__item username">{{ user.username }}</h1>
|
||||
<div class="sidebar__item">
|
||||
<Badge v-if="user.role === 'admin'" type="admin" color="red" />
|
||||
<Badge
|
||||
v-else-if="user.role === 'moderator'"
|
||||
type="moderator"
|
||||
color="yellow"
|
||||
/>
|
||||
<Badge v-else type="developer" color="green" />
|
||||
</div>
|
||||
<hr class="card-divider" />
|
||||
<h3 class="sidebar__item">About me</h3>
|
||||
<span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
|
||||
<a
|
||||
:href="githubUrl"
|
||||
target="_blank"
|
||||
class="sidebar__item report-button iconified-button"
|
||||
>
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
View GitHub profile
|
||||
</a>
|
||||
<div class="sidebar__item stats-block">
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span
|
||||
v-tooltip="
|
||||
$dayjs(user.created).format('MMMM D, YYYY [at] h:mm:ss A')
|
||||
"
|
||||
class="secondary-stat__text date"
|
||||
>
|
||||
Joined {{ $dayjs(user.created).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<UserIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span class="secondary-stat__text">User ID: {{ user.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar__item stats-block">
|
||||
<div class="stats-block__item primary-stat">
|
||||
<DownloadIcon class="primary-stat__icon" aria-hidden="true" />
|
||||
<div class="primary-stat__text">
|
||||
<span class="primary-stat__counter">{{ sumDownloads() }}</span>
|
||||
<span class="primary-stat__label">downloads</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template
|
||||
v-if="!$auth.user || ($auth.user && $auth.user.id !== user.id)"
|
||||
>
|
||||
<hr class="card-divider" />
|
||||
<nuxt-link
|
||||
:to="`/create/report?id=${user.id}&t=user`"
|
||||
class="sidebar__item report-button iconified-button"
|
||||
>
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="normal-page__content">
|
||||
<Advertisement />
|
||||
<nav class="card user-navigation">
|
||||
<ThisOrThat v-model="selectedProjectType" :items="projectTypes" />
|
||||
<nuxt-link
|
||||
v-if="$auth.user && $auth.user.id === user.id"
|
||||
to="/create/project"
|
||||
class="iconified-button brand-button-colors"
|
||||
>
|
||||
<PlusIcon />
|
||||
Create a project
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<div v-if="projects.length > 0">
|
||||
<ProjectCard
|
||||
v-for="project in selectedProjectType !== 'all'
|
||||
? projects.filter(
|
||||
(x) =>
|
||||
x.project_type === convertProjectType(selectedProjectType)
|
||||
)
|
||||
: projects"
|
||||
:id="project.slug || project.id"
|
||||
:key="project.id"
|
||||
:name="project.title"
|
||||
:description="project.description"
|
||||
:created-at="project.published"
|
||||
:updated-at="project.updated"
|
||||
:downloads="project.downloads.toString()"
|
||||
:follows="project.followers.toString()"
|
||||
:icon-url="project.icon_url"
|
||||
:categories="project.categories"
|
||||
:client-side="project.client_side"
|
||||
:server-side="project.server_side"
|
||||
:status="project.status"
|
||||
:type="project.project_type"
|
||||
>
|
||||
<nuxt-link
|
||||
v-if="$auth.user && $auth.user.id === user.id"
|
||||
class="iconified-button"
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/settings`"
|
||||
>
|
||||
<SettingsIcon />
|
||||
Settings
|
||||
</nuxt-link>
|
||||
</ProjectCard>
|
||||
<h1 class="username">{{ user.username }}</h1>
|
||||
</div>
|
||||
<div v-else class="error">
|
||||
<UpToDate class="icon" /><br />
|
||||
<span v-if="$auth.user && $auth.user.id === user.id" class="text"
|
||||
>You don't have any projects.<br />
|
||||
Would you like to
|
||||
<nuxt-link class="link" to="/create/project">create one</nuxt-link
|
||||
>?</span
|
||||
>
|
||||
<span v-else class="text">This user has no projects!</span>
|
||||
</div>
|
||||
<div class="normal-page">
|
||||
<div class="normal-page__sidebar">
|
||||
<aside class="card sidebar">
|
||||
<h1 class="mobile-username">{{ user.username }}</h1>
|
||||
<div class="card__overlay">
|
||||
<FileInput
|
||||
v-if="isEditing"
|
||||
:max-size="262144"
|
||||
:show-icon="true"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
class="choose-image"
|
||||
prompt="Upload avatar"
|
||||
@change="showPreviewImage"
|
||||
/>
|
||||
<button
|
||||
v-else-if="$auth.user && $auth.user.id === user.id"
|
||||
class="iconified-button"
|
||||
@click="isEditing = true"
|
||||
>
|
||||
<EditIcon />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
v-else-if="$auth.user"
|
||||
class="iconified-button"
|
||||
@click="$refs.modal_report.show()"
|
||||
>
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</button>
|
||||
<a v-else class="iconified-button" :href="authUrl">
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</a>
|
||||
</div>
|
||||
<template v-if="isEditing">
|
||||
<div class="inputs universal-labels">
|
||||
<label for="user-username"
|
||||
><span class="label__title">Username</span></label
|
||||
>
|
||||
<input
|
||||
id="user-username"
|
||||
v-model="user.username"
|
||||
maxlength="39"
|
||||
type="text"
|
||||
/>
|
||||
<label for="user-bio"
|
||||
><span class="label__title">Bio</span></label
|
||||
>
|
||||
<div class="textarea-wrapper">
|
||||
<textarea
|
||||
id="user-bio"
|
||||
v-model="user.bio"
|
||||
maxlength="160"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button
|
||||
class="iconified-button"
|
||||
@click="
|
||||
isEditing = false
|
||||
user = JSON.parse(JSON.stringify($auth.user))
|
||||
previewImage = null
|
||||
icon = null
|
||||
"
|
||||
>
|
||||
<CrossIcon /> Cancel
|
||||
</button>
|
||||
<button
|
||||
class="iconified-button brand-button"
|
||||
@click="saveChanges"
|
||||
>
|
||||
<SaveIcon /> Save
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="sidebar__item">
|
||||
<Badge v-if="user.role === 'admin'" type="admin" color="red" />
|
||||
<Badge
|
||||
v-else-if="user.role === 'moderator'"
|
||||
type="moderator"
|
||||
color="yellow"
|
||||
/>
|
||||
<Badge v-else type="developer" color="green" />
|
||||
</div>
|
||||
<span v-if="user.bio" class="sidebar__item bio">{{
|
||||
user.bio
|
||||
}}</span>
|
||||
<hr class="card-divider" />
|
||||
<div class="primary-stat">
|
||||
<DownloadIcon class="primary-stat__icon" aria-hidden="true" />
|
||||
<div class="primary-stat__text">
|
||||
<span class="primary-stat__counter">{{ sumDownloads() }}</span>
|
||||
<span class="primary-stat__label">downloads</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="primary-stat">
|
||||
<HeartIcon class="primary-stat__icon" aria-hidden="true" />
|
||||
<div class="primary-stat__text">
|
||||
<span class="primary-stat__counter">{{ sumFollows() }}</span>
|
||||
<span class="primary-stat__label">followers of projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span
|
||||
v-tooltip="
|
||||
$dayjs(user.created).format('MMMM D, YYYY [at] h:mm:ss A')
|
||||
"
|
||||
class="secondary-stat__text date"
|
||||
>
|
||||
Joined {{ $dayjs(user.created).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<hr class="card-divider" />
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<UserIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span class="secondary-stat__text">
|
||||
User ID: <CopyCode :text="user.id" />
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
:href="githubUrl"
|
||||
target="_blank"
|
||||
class="sidebar__item github-button iconified-button"
|
||||
>
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
View GitHub profile
|
||||
</a>
|
||||
</template>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="normal-page__content">
|
||||
<Advertisement
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<nav class="card user-navigation">
|
||||
<NavRow
|
||||
query="type"
|
||||
:links="[
|
||||
{
|
||||
label: 'all',
|
||||
href: '',
|
||||
},
|
||||
...projectTypes.map((x) => {
|
||||
return {
|
||||
label: x === 'resourcepack' ? 'Resource Packs' : x + 's',
|
||||
href: x,
|
||||
}
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<button
|
||||
v-if="$auth.user && $auth.user.id === user.id"
|
||||
class="iconified-button brand-button"
|
||||
@click="$refs.modal_creation.show()"
|
||||
>
|
||||
<PlusIcon />
|
||||
Create a project
|
||||
</button>
|
||||
</nav>
|
||||
<div v-if="projects.length > 0">
|
||||
<ProjectCard
|
||||
v-for="project in $route.query.type !== undefined
|
||||
? projects.filter((x) => x.project_type === $route.query.type)
|
||||
: projects"
|
||||
:id="project.slug || project.id"
|
||||
:key="project.id"
|
||||
:name="project.title"
|
||||
:description="project.description"
|
||||
:created-at="project.published"
|
||||
:updated-at="project.updated"
|
||||
:downloads="project.downloads.toString()"
|
||||
:follows="project.followers.toString()"
|
||||
:icon-url="project.icon_url"
|
||||
:categories="project.categories"
|
||||
:client-side="project.client_side"
|
||||
:server-side="project.server_side"
|
||||
:status="
|
||||
$auth.user &&
|
||||
($auth.user.role === 'admin' || $auth.user.role === 'moderator')
|
||||
? project.status
|
||||
: null
|
||||
"
|
||||
:type="project.project_type"
|
||||
>
|
||||
<nuxt-link
|
||||
v-if="$auth.user && $auth.user.id === user.id"
|
||||
class="iconified-button"
|
||||
:to="`/${project.project_type}/${
|
||||
project.slug ? project.slug : project.id
|
||||
}/settings`"
|
||||
>
|
||||
<SettingsIcon />
|
||||
Settings
|
||||
</nuxt-link>
|
||||
</ProjectCard>
|
||||
</div>
|
||||
<div v-else class="error">
|
||||
<UpToDate class="icon" /><br />
|
||||
<span v-if="$auth.user && $auth.user.id === user.id" class="text">
|
||||
You don't have any projects.<br />
|
||||
Would you like to
|
||||
<a class="link" @click.prevent="$refs.modal_creation.show()">
|
||||
create one</a
|
||||
>?
|
||||
</span>
|
||||
<span v-else class="text">This user has no projects!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,7 +234,6 @@
|
||||
|
||||
<script>
|
||||
import ProjectCard from '~/components/ui/ProjectCard'
|
||||
import ThisOrThat from '~/components/ui/ThisOrThat'
|
||||
import Badge from '~/components/ui/Badge'
|
||||
import Advertisement from '~/components/ads/Advertisement'
|
||||
|
||||
@@ -144,10 +245,26 @@ import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
|
||||
import PlusIcon from '~/assets/images/utils/plus.svg?inline'
|
||||
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
|
||||
import UserIcon from '~/assets/images/utils/user.svg?inline'
|
||||
import EditIcon from '~/assets/images/utils/edit.svg?inline'
|
||||
import HeartIcon from '~/assets/images/utils/heart.svg?inline'
|
||||
import CrossIcon from '~/assets/images/utils/x.svg?inline'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg?inline'
|
||||
import FileInput from '~/components/ui/FileInput'
|
||||
import ModalReport from '~/components/ui/ModalReport'
|
||||
import ModalCreation from '~/components/ui/ModalCreation'
|
||||
import NavRow from '~/components/ui/NavRow'
|
||||
import CopyCode from '~/components/ui/CopyCode'
|
||||
import Avatar from '~/components/ui/Avatar'
|
||||
|
||||
export default {
|
||||
auth: false,
|
||||
components: {
|
||||
Avatar,
|
||||
CopyCode,
|
||||
NavRow,
|
||||
ModalCreation,
|
||||
ModalReport,
|
||||
FileInput,
|
||||
ProjectCard,
|
||||
SunriseIcon,
|
||||
DownloadIcon,
|
||||
@@ -156,10 +273,13 @@ export default {
|
||||
Badge,
|
||||
SettingsIcon,
|
||||
PlusIcon,
|
||||
ThisOrThat,
|
||||
UpToDate,
|
||||
UserIcon,
|
||||
EditIcon,
|
||||
Advertisement,
|
||||
HeartIcon,
|
||||
CrossIcon,
|
||||
SaveIcon,
|
||||
},
|
||||
async asyncData(data) {
|
||||
try {
|
||||
@@ -173,6 +293,12 @@ export default {
|
||||
])
|
||||
).map((it) => it.data)
|
||||
|
||||
if (user.username !== data.params.id) {
|
||||
data.redirect(301, `/user/${user.username}`)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const [gitHubUser, versions] = (
|
||||
await Promise.all([
|
||||
data.$axios.get(`https://api.github.com/user/` + user.github_id),
|
||||
@@ -213,7 +339,6 @@ export default {
|
||||
}
|
||||
|
||||
return {
|
||||
selectedProjectType: 'all',
|
||||
user,
|
||||
projects,
|
||||
githubUrl: gitHubUser.html_url,
|
||||
@@ -225,6 +350,13 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isEditing: false,
|
||||
icon: null,
|
||||
previewImage: null,
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.user.username + ' - Modrinth',
|
||||
@@ -247,19 +379,12 @@ export default {
|
||||
{
|
||||
hid: 'og:description',
|
||||
name: 'og:description',
|
||||
content: this.user.bio,
|
||||
content: `${this.user.bio} - Download ${this.user.username}'s projects on Modrinth`,
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content:
|
||||
this.user.bio +
|
||||
' - View Minecraft mods on Modrinth today! Modrinth is a new and modern Minecraft modding platform.',
|
||||
},
|
||||
{
|
||||
hid: 'og:url',
|
||||
name: 'og:url',
|
||||
content: `https://modrinth.com/user/${this.user.id}`,
|
||||
content: `${this.user.bio} - Download ${this.user.username}'s projects on Modrinth`,
|
||||
},
|
||||
{
|
||||
hid: 'og:image',
|
||||
@@ -271,28 +396,20 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
authUrl() {
|
||||
return `${process.env.authURLBase}auth/init?url=${process.env.domain}${this.$route.path}`
|
||||
},
|
||||
projectTypes() {
|
||||
const obj = { all: true }
|
||||
const obj = {}
|
||||
|
||||
for (const project of this.projects) {
|
||||
if (project.project_type === 'resourcepack') {
|
||||
obj['Resource Packs'] = true
|
||||
} else {
|
||||
obj[project.project_type + 's'] = true
|
||||
}
|
||||
obj[project.project_type] = true
|
||||
}
|
||||
|
||||
return Object.keys(obj)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
convertProjectType(name) {
|
||||
if (name === 'Resource Packs') {
|
||||
return 'resourcepack'
|
||||
} else {
|
||||
return name.slice(0, -1)
|
||||
}
|
||||
},
|
||||
sumDownloads() {
|
||||
let sum = 0
|
||||
|
||||
@@ -302,11 +419,105 @@ export default {
|
||||
|
||||
return this.$formatNumber(sum)
|
||||
},
|
||||
sumFollows() {
|
||||
let sum = 0
|
||||
|
||||
for (const projects of this.projects) {
|
||||
sum += projects.followers
|
||||
}
|
||||
|
||||
return this.$formatNumber(sum)
|
||||
},
|
||||
showPreviewImage(files) {
|
||||
const reader = new FileReader()
|
||||
this.icon = files[0]
|
||||
reader.readAsDataURL(this.icon)
|
||||
reader.onload = (event) => {
|
||||
this.previewImage = event.target.result
|
||||
}
|
||||
},
|
||||
async saveChanges() {
|
||||
this.$nuxt.$loading.start()
|
||||
try {
|
||||
if (this.icon) {
|
||||
await this.$axios.patch(
|
||||
`user/${this.$auth.user.id}/icon?ext=${
|
||||
this.icon.type.split('/')[this.icon.type.split('/').length - 1]
|
||||
}`,
|
||||
this.icon,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
}
|
||||
|
||||
const data = {
|
||||
email: this.user.email,
|
||||
bio: this.user.bio,
|
||||
}
|
||||
if (this.user.username !== this.$auth.user.username) {
|
||||
data.username = this.user.username
|
||||
}
|
||||
|
||||
await this.$axios.patch(
|
||||
`user/${this.$auth.user.id}`,
|
||||
data,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
await this.$store.dispatch('auth/fetchUser', {
|
||||
token: this.$auth.token,
|
||||
})
|
||||
|
||||
this.isEditing = false
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.user-header-wrapper {
|
||||
display: flex;
|
||||
margin: 0 auto -1.5rem;
|
||||
max-width: 80rem;
|
||||
|
||||
.user-header {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
|
||||
.username {
|
||||
display: none;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-username {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 501px) {
|
||||
.mobile-username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-header-wrapper .user-header .username {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-navigation {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -314,6 +525,11 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.sidebar__item:not(:last-child) {
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
@@ -328,22 +544,14 @@ export default {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.report-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stats-block__item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.secondary-stat {
|
||||
align-items: center;
|
||||
color: var(--color-text-secondary);
|
||||
display: flex;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.secondary-stat__icon {
|
||||
@@ -352,29 +560,58 @@ export default {
|
||||
}
|
||||
|
||||
.secondary-stat__text {
|
||||
margin-left: 0.25rem;
|
||||
margin-left: 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.primary-stat {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.primary-stat__icon {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.primary-stat__text {
|
||||
margin-left: 0.25rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.primary-stat__counter {
|
||||
font-size: var(--font-size-lg);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.github-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
input {
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
height: 10rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user