Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual fixes

Browse Source
This commit is contained in:
Geometrically 2021-01-29 20:49:13 -07:00
parent 9d62931af9
commit 01703aff43
No known key found for this signature in database
GPG Key ID: 90C056FDC8FC9FF0
3 changed files with 92 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
layouts/default.vue
View File

@ -17,77 +17,81 @@
<NuxtLink to="/mods" class="tab">
<span>Mods</span>
</NuxtLink>
<div v-if="this.$auth.loggedIn" class="section">
<NuxtLink to="/dashboard/projects" class="tab">
<span>Dashboard</span>
</NuxtLink>
</div>
<client-only>
<div v-if="this.$auth.loggedIn" class="section">
<NuxtLink to="/dashboard/projects" class="tab">
<span>Dashboard</span>
</NuxtLink>
</div>
</client-only>
</div>
</section>
<section class="column-grow">
<template v-if="this.$auth.loggedIn">
<section class="user-controls">
<div
v-click-outside="hideDropdown"
class="dropdown"
:class="{ open: isDropdownOpen }"
>
<button class="control" @click="toggleDropdown">
<div class="avatar">
<span>{{ this.$auth.user.username }}</span>
<img :src="this.$auth.user.avatar_url" class="icon" />
</div>
<DropdownIcon class="dropdown-icon" />
</button>
<div class="content">
<ul v-if="isDropdownOpen" @click="hideDropdown">
<li>
<NuxtLink :to="userUrl">
<UserIcon />
<span>Profile</span>
</NuxtLink>
</li>
<li>
<NuxtLink to="/dashboard/notifications">
<NotificationIcon />
<span>Notifications</span>
</NuxtLink>
</li>
<!--<li v-tooltip="'Not implemented yet'" class="hidden">
<NuxtLink :to="userTeamsUrl" disabled>
<UsersIcon />
<span>Teams</span>
</NuxtLink>
</li>-->
<li>
<button @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" />
<SunIcon v-else />
<span v-if="$colorMode.value === 'light'">
<client-only>
<template v-if="this.$auth.loggedIn">
<section class="user-controls">
<div
v-click-outside="hideDropdown"
class="dropdown"
:class="{ open: isDropdownOpen }"
>
<button class="control" @click="toggleDropdown">
<div class="avatar">
<span>{{ this.$auth.user.username }}</span>
<img :src="this.$auth.user.avatar_url" class="icon" />
</div>
<DropdownIcon class="dropdown-icon" />
</button>
<div class="content">
<ul v-if="isDropdownOpen" @click="hideDropdown">
<li>
<NuxtLink :to="userUrl">
<UserIcon />
<span>Profile</span>
</NuxtLink>
</li>
<li>
<NuxtLink to="/dashboard/notifications">
<NotificationIcon />
<span>Notifications</span>
</NuxtLink>
</li>
<!--<li v-tooltip="'Not implemented yet'" class="hidden">
<NuxtLink :to="userTeamsUrl" disabled>
<UsersIcon />
<span>Teams</span>
</NuxtLink>
</li>-->
<li>
<button @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" />
<SunIcon v-else />
<span v-if="$colorMode.value === 'light'">
Dark Mode</span
>
<span v-else>Light Mode</span>
</button>
</li>
<hr />
<li>
<button @click="logout">
<LogOutIcon />
<span>Log Out</span>
</button>
</li>
</ul>
>
<span v-else>Light Mode</span>
</button>
</li>
<hr />
<li>
<button @click="logout">
<LogOutIcon />
<span>Log Out</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</section>
</template>
<template v-else>
<section class="auth-prompt">
<a :href="authUrl" class="log-in-button"
><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
>
</section>
</template>
</section>
</template>
<template v-else>
<section class="auth-prompt">
<a :href="authUrl" class="log-in-button"
><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
>
</section>
</template>
</client-only>
</section>
</section>
</header>

19
pages/dashboard/settings.vue
View File

@ -93,12 +93,9 @@
will be removed from our servers. This cannot be reversed, so be
careful!</span
>
<input
type="button"
class="button"
value="Delete Account"
@click="deleteAccount"
/>
<div type="button" class="button" @click="deleteAccount">
Delete Account
</div>
</label>
</section>
</DashboardPage>
@ -257,5 +254,15 @@ label {
input[type='button']:hover {
cursor: pointer;
}
div,
a {
text-align: center;
height: fit-content;
flex: 1;
}
div:hover {
cursor: pointer;
}
}
</style>

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

@ -68,9 +68,11 @@
</tr>
</tbody>
</table>
<nuxt-link v-if="currentMember" to="newversion" class="button">
New Version
</nuxt-link>
<div class="new-version">
<nuxt-link v-if="currentMember" to="newversion" class="button">
New Version
</nuxt-link>
</div>
</ModPage>
</template>
<script>
@ -294,8 +296,10 @@ table {
}
}
.button {
float: right;
.new-version {
width: 100%;
text-align: right;
margin-bottom: var(--spacing-card-md);
}
@media screen and (max-width: 400px) {