Add user context menu
This commit is contained in:
Jai A
parent
3127f7a31b
commit
a545d7d8b1
@ -122,9 +122,8 @@
|
||||
<div class="disclosure">
|
||||
<span>
|
||||
Modrinth is open source software. You may view the source code at
|
||||
<a href="https://github.com/modrinth/knossos"
|
||||
>our GitHub Repository</a
|
||||
>.
|
||||
our
|
||||
<a href="https://github.com/modrinth/knossos">GitHub Repository</a>.
|
||||
</span>
|
||||
</div>
|
||||
<section class="user-actions">
|
||||
@ -138,9 +137,26 @@
|
||||
>Log In</a
|
||||
>
|
||||
<div v-if="this.$auth.loggedIn" class="avatar">
|
||||
<img :src="this.$auth.user.avatar_url" alt="avatar" />
|
||||
<img
|
||||
:src="this.$auth.user.avatar_url"
|
||||
alt="avatar"
|
||||
@click="showPopup = !showPopup"
|
||||
/>
|
||||
<span> {{ this.$auth.user.username }} </span>
|
||||
</div>
|
||||
<div v-if="showPopup" class="user-actions-popup">
|
||||
<div class="popup-inner">
|
||||
<p>
|
||||
Modrinth ID: <strong>{{ this.$auth.user.id }}</strong>
|
||||
</p>
|
||||
<hr />
|
||||
<p>My profile</p>
|
||||
<p>My teams</p>
|
||||
<hr />
|
||||
<p>Settings</p>
|
||||
<p @click="logout">Logout</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="this.$auth.loggedIn" class="notifications">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
@ -218,6 +234,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
theme: 'light',
|
||||
showPopup: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -247,6 +264,10 @@ export default {
|
||||
document.body.style.overflow =
|
||||
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||
},
|
||||
logout() {
|
||||
this.$auth.setToken('local', false)
|
||||
this.$router.go()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -412,6 +433,7 @@ export default {
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
height: 2rem;
|
||||
margin-right: 0.5rem;
|
||||
@ -427,6 +449,50 @@ export default {
|
||||
background-color: var(--color-grey-1);
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.user-actions-popup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.popup-inner {
|
||||
width: 140px;
|
||||
border: 2px var(--color-grey-2) solid;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-grey-5);
|
||||
font-size: 15px;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin-bottom: 20px;
|
||||
bottom: 500%;
|
||||
margin-left: -165px;
|
||||
|
||||
hr {
|
||||
color: var(--color-grey-2);
|
||||
height: 1px;
|
||||
}
|
||||
p {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-text-inverted);
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-inner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 90%;
|
||||
border-width: 7px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-grey-2) transparent transparent
|
||||
transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,12 +27,12 @@ export default {
|
||||
{
|
||||
hid: 'og-title',
|
||||
property: 'og:title',
|
||||
content: 'Modrinth - Modern modding platform for all',
|
||||
content: 'Open source modding platform',
|
||||
},
|
||||
{
|
||||
hid: 'og-site-name',
|
||||
property: 'og:site_name',
|
||||
content: 'Modrinth.com',
|
||||
content: 'Modrinth',
|
||||
},
|
||||
{
|
||||
hid: 'og-image',
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
{
|
||||
hid: 'twitter-title',
|
||||
property: 'twitter:title',
|
||||
content: 'Modrinth.com',
|
||||
content: 'Modrinth',
|
||||
},
|
||||
],
|
||||
link: [
|
||||
|
||||
11
pages/create/mod.vue
Normal file
11
pages/create/mod.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h2>Create Mod</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@ -4,7 +4,9 @@
|
||||
|
||||
<div class="section-header">
|
||||
<h3>Mods</h3>
|
||||
<button>Create a new mod</button>
|
||||
<nuxt-link class="create-button" to="/create/mod"
|
||||
>Create a new mod</nuxt-link
|
||||
>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
@ -40,35 +42,6 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="section-header">
|
||||
<h3>Modpacks</h3>
|
||||
<button>Create a new modpack</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Downloads</th>
|
||||
<th>Last updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img class="rounded-md" src="~/assets/images/aof-mini.png" />
|
||||
</td>
|
||||
<td>All of Fabric Mini</td>
|
||||
<td>Contributor</td>
|
||||
<td><span class="badge red">Abandoned</span></td>
|
||||
<td>357</td>
|
||||
<td>Apr 1, 2020</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -82,6 +55,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.create-button {
|
||||
margin: auto 0;
|
||||
padding: 4px 20px;
|
||||
border-radius: 5px;
|
||||
color: var(--color-grey-5);
|
||||
background-color: var(--color-grey-1);
|
||||
}
|
||||
|
||||
table {
|
||||
background: var(--color-bg);
|
||||
border-collapse: collapse;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user