forked from didirus/AstralRinth
Rework user dropdown, redo mobile navigation, improve 'home' page (#342)
* Merge * Mobile Navigation + home page fixes * Remove debug line * Fix "More" menu text
This commit is contained in:
Prospector
@@ -0,0 +1,4 @@
|
||||
<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="currentColor"/>
|
||||
<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -509,7 +509,7 @@ label {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
//outline: 0; Bad for accessibility
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -188,6 +188,7 @@ body {
|
||||
--size-rounded-tooltip: 0.25rem;
|
||||
|
||||
--size-navbar-height: 3.5rem;
|
||||
--size-mobile-navbar-height: 4rem;
|
||||
|
||||
--spacing-card-lg: 1.5rem;
|
||||
--spacing-card-bg: 1rem;
|
||||
@@ -258,7 +259,7 @@ textarea {
|
||||
&:hover:not([disabled]) {
|
||||
background: var(--color-button-bg-hover);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
//outline: none; Bad for accessibility
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text);
|
||||
@@ -296,7 +297,7 @@ textarea {
|
||||
|
||||
button {
|
||||
padding: 0.5rem 0;
|
||||
outline: none;
|
||||
//outline: none; Bad for accessibility
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button-bg);
|
||||
border: none;
|
||||
|
||||
+410
-322
@@ -4,16 +4,10 @@
|
||||
<section class="navbar columns">
|
||||
<section class="logo column">
|
||||
<NuxtLink to="/">
|
||||
<ModrinthLogoSmall aria-label="modrinth" class="small-logo" />
|
||||
<ModrinthLogo aria-label="modrinth" class="text-logo" />
|
||||
</NuxtLink>
|
||||
</section>
|
||||
<section class="menu-icon">
|
||||
<button @click="toggleNavBar">
|
||||
<HamburgerIcon />
|
||||
</button>
|
||||
</section>
|
||||
<section ref="nav" class="right-group columns">
|
||||
<section class="nav-group columns">
|
||||
<section class="nav">
|
||||
<div class="styled-tabs">
|
||||
<NuxtLink to="/mods" class="tab">
|
||||
@@ -47,52 +41,42 @@
|
||||
{{ $user.notifications.length }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
<button
|
||||
v-if="!$auth.user"
|
||||
class="theme-mobile-button iconified-button"
|
||||
@click="changeTheme"
|
||||
>
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" />
|
||||
<SunIcon v-else />
|
||||
Change theme
|
||||
<div v-if="$auth.user" ref="mobileMenu" class="dropdown">
|
||||
<button class="control">
|
||||
<img :src="$auth.user.avatar_url" class="user-icon" />
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div
|
||||
v-if="$auth.user"
|
||||
v-click-outside="hideDropdown"
|
||||
class="dropdown"
|
||||
:class="{ open: isDropdownOpen }"
|
||||
<ul class="content card" @click="removeFocus">
|
||||
<li>
|
||||
<NuxtLink
|
||||
class="item"
|
||||
:to="`/user/${$auth.user.username}`"
|
||||
@click="removeFocus"
|
||||
>
|
||||
<button class="control" @click="toggleDropdown">
|
||||
<div class="avatar">
|
||||
<img :src="$auth.user.avatar_url" class="icon" />
|
||||
<span>{{ $auth.user.username }}</span>
|
||||
<div class="title profile-link">
|
||||
<div class="username">@{{ $auth.user.username }}</div>
|
||||
<div class="prompt">Go to my profile</div>
|
||||
</div>
|
||||
<DropdownIcon class="dropdown-icon" />
|
||||
</button>
|
||||
<div class="content">
|
||||
<ul @click="hideDropdown">
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<hr class="divider" />
|
||||
<li>
|
||||
<NuxtLink :to="`/user/${$auth.user.username}`">
|
||||
<UserIcon />
|
||||
<span>Profile</span>
|
||||
<NuxtLink class="item" to="/create/project">
|
||||
<PlusIcon class="icon" />
|
||||
<span class="title">Create a project</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<hr class="divider" />
|
||||
<li>
|
||||
<NuxtLink class="item" to="/notifications">
|
||||
<NotificationIcon class="icon" />
|
||||
<span class="title">Notifications</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/settings">
|
||||
<SettingsIcon />
|
||||
<span>Settings</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="hide-desktop">
|
||||
<NuxtLink to="/notifications">
|
||||
<NotificationIcon />
|
||||
<span>Notifications</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="hide-desktop">
|
||||
<NuxtLink to="/create/project">
|
||||
<PlusIcon />
|
||||
<span>Create project</span>
|
||||
<NuxtLink class="item" to="/settings">
|
||||
<SettingsIcon class="icon" />
|
||||
<span class="title">Settings</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
@@ -101,39 +85,111 @@
|
||||
$auth.user.role === 'moderator' ||
|
||||
$auth.user.role === 'admin'
|
||||
"
|
||||
class="item"
|
||||
to="/moderation"
|
||||
>
|
||||
<ModerationIcon />
|
||||
<span>Moderation</span>
|
||||
<ModerationIcon class="icon" />
|
||||
<span class="title">Moderation</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<hr />
|
||||
<li class="hide-desktop">
|
||||
<button @click="changeTheme">
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" />
|
||||
<SunIcon v-else />
|
||||
<span>Change theme</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button @click="logout">
|
||||
<LogOutIcon />
|
||||
<span>Log out</span>
|
||||
<button class="item" @click="changeTheme">
|
||||
<MoonIcon
|
||||
v-if="$colorMode.value === 'light'"
|
||||
class="icon"
|
||||
/>
|
||||
<SunIcon v-else class="icon" />
|
||||
<span class="dropdown-item__text">Change theme</span>
|
||||
</button>
|
||||
</li>
|
||||
<hr class="divider" />
|
||||
<li>
|
||||
<button class="item" @click="logout">
|
||||
<LogOutIcon class="icon" />
|
||||
<span class="dropdown-item__text">Log out</span>
|
||||
</button>
|
||||
</li>
|
||||
<hr class="hide-desktop" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section v-else class="auth-prompt">
|
||||
<a :href="authUrl" class="log-in-button"
|
||||
><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
|
||||
<a :href="authUrl" class="log-in-button">
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
Sign in with GitHub</a
|
||||
>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="mobile-navbar">
|
||||
<NuxtLink to="/" class="tab">
|
||||
<HomeIcon />
|
||||
<span>Home</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/mods" class="tab">
|
||||
<ModIcon />
|
||||
<span>Mods</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/modpacks" class="tab">
|
||||
<ModpackIcon />
|
||||
<span>Modpacks</span>
|
||||
</NuxtLink>
|
||||
<button class="tab" @click="toggleMobileMenu()">
|
||||
<HamburgerIcon />
|
||||
<span>{{ isMobileMenuOpen ? 'Less' : 'More' }}</span>
|
||||
</button>
|
||||
</section>
|
||||
<section ref="mobileMenu" class="mobile-menu">
|
||||
<div class="items-container rows">
|
||||
<NuxtLink
|
||||
v-if="$auth.user"
|
||||
class="item user-item"
|
||||
:to="`/user/${$auth.user.username}`"
|
||||
>
|
||||
<img :src="$auth.user.avatar_url" class="user-icon" />
|
||||
<div class="profile-link">
|
||||
<div class="username">@{{ $auth.user.username }}</div>
|
||||
<div class="prompt">Go to my profile</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<button v-if="$auth.user" class="item log-out" @click="logout">
|
||||
<LogOutIcon class="icon" />
|
||||
<span class="dropdown-item__text">Log out</span>
|
||||
</button>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/create/project">
|
||||
<PlusIcon class="icon" />
|
||||
<span class="title">Create a project</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/settings">
|
||||
<SettingsIcon class="icon" />
|
||||
<span class="title">Settings</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
$auth.user &&
|
||||
($auth.user.role === 'moderator' || $auth.user.role === 'admin')
|
||||
"
|
||||
class="item"
|
||||
to="/moderation"
|
||||
>
|
||||
<ModerationIcon class="icon" />
|
||||
<span class="title">Moderation</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/notifications">
|
||||
<NotificationIcon class="icon" />
|
||||
<span class="title">Notifications</span>
|
||||
</NuxtLink>
|
||||
<button class="item" @click="changeTheme">
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
|
||||
<SunIcon v-else class="icon" />
|
||||
<span class="dropdown-item__text">Change theme</span>
|
||||
</button>
|
||||
<a v-if="!$auth.user" :href="authUrl" class="item log-in">
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
Sign in with GitHub</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
<CookieConsent />
|
||||
@@ -165,7 +221,7 @@
|
||||
<h4>Legal</h4>
|
||||
<nuxt-link to="/legal/terms">Terms</nuxt-link>
|
||||
<nuxt-link to="/legal/privacy">Privacy</nuxt-link>
|
||||
<nuxt-link to="/legal/rules">Content</nuxt-link>
|
||||
<nuxt-link to="/legal/rules">Rules</nuxt-link>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/modrinth/knossos/blob/master/LICENSE.md"
|
||||
@@ -201,7 +257,6 @@
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
|
||||
import ModrinthLogo from '~/assets/images/text-logo.svg?inline'
|
||||
import ModrinthLogoSmall from '~/assets/images/logo.svg?inline'
|
||||
|
||||
import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
|
||||
|
||||
@@ -209,29 +264,36 @@ import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
|
||||
import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
|
||||
import ShieldIcon from '~/assets/images/utils/shield.svg?inline'
|
||||
import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
|
||||
import HomeIcon from '~/assets/images/sidebar/home.svg?inline'
|
||||
import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
|
||||
import ModpackIcon from '~/assets/images/sidebar/modpack.svg?inline'
|
||||
|
||||
import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
|
||||
// import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
|
||||
import MoonIcon from '~/assets/images/utils/moon.svg?inline'
|
||||
import SunIcon from '~/assets/images/utils/sun.svg?inline'
|
||||
import PlusIcon from '~/assets/images/utils/plus.svg?inline'
|
||||
|
||||
import UserIcon from '~/assets/images/utils/user.svg?inline'
|
||||
// import UserIcon from '~/assets/images/utils/user.svg?inline'
|
||||
import LogOutIcon from '~/assets/images/utils/log-out.svg?inline'
|
||||
import GitHubIcon from '~/assets/images/utils/github.svg?inline'
|
||||
|
||||
import CookieConsent from '~/components/ads/CookieConsent'
|
||||
|
||||
const overflowStyle = 'overlay'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ModrinthLogo,
|
||||
ModrinthLogoSmall,
|
||||
DropdownIcon,
|
||||
// DropdownIcon,
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
UserIcon,
|
||||
// UserIcon,
|
||||
LogOutIcon,
|
||||
GitHubIcon,
|
||||
NotificationIcon,
|
||||
HomeIcon,
|
||||
ModIcon,
|
||||
ModpackIcon,
|
||||
HamburgerIcon,
|
||||
CookieConsent,
|
||||
SettingsIcon,
|
||||
@@ -246,6 +308,7 @@ export default {
|
||||
return {
|
||||
isDropdownOpen: false,
|
||||
version: process.env.version || 'unknown',
|
||||
isMobileMenuOpen: false,
|
||||
}
|
||||
},
|
||||
async fetch() {
|
||||
@@ -261,10 +324,12 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.$refs.nav.className = 'right-group'
|
||||
this.$refs.mobileMenu.className = 'mobile-menu'
|
||||
this.isMobileMenuOpen =
|
||||
this.$refs.mobileMenu.className === 'mobile-menu active'
|
||||
|
||||
document.documentElement.style.overflow = 'auto'
|
||||
document.body.style.overflow = 'auto'
|
||||
document.documentElement.style.overflow = overflowStyle
|
||||
document.body.style.overflow = overflowStyle
|
||||
|
||||
this.$store.dispatch('user/fetchAll')
|
||||
},
|
||||
@@ -275,24 +340,23 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNavBar() {
|
||||
toggleMobileMenu() {
|
||||
window.scrollTo(0, 0)
|
||||
const currentlyActive = this.$refs.nav.className === 'right-group active'
|
||||
this.$refs.nav.className = `right-group${
|
||||
const currentlyActive =
|
||||
this.$refs.mobileMenu.className === 'mobile-menu active'
|
||||
this.$refs.mobileMenu.className = `mobile-menu${
|
||||
currentlyActive ? '' : ' active'
|
||||
}`
|
||||
document.body.scrollTop = 0
|
||||
|
||||
document.documentElement.style.overflow =
|
||||
document.documentElement.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||
document.documentElement.style.overflow !== 'hidden'
|
||||
? 'hidden'
|
||||
: overflowStyle
|
||||
document.body.style.overflow =
|
||||
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||
},
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen
|
||||
},
|
||||
hideDropdown() {
|
||||
this.isDropdownOpen = false
|
||||
document.body.style.overflow !== 'hidden' ? 'hidden' : overflowStyle
|
||||
|
||||
this.isMobileMenuOpen = !currentlyActive
|
||||
},
|
||||
async logout() {
|
||||
this.$cookies.set('auth-token-reset', true)
|
||||
@@ -314,11 +378,20 @@ export default {
|
||||
this.$colorMode.preference =
|
||||
this.$colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
},
|
||||
removeFocus() {
|
||||
document.activeElement.blur() // This doesn't work, sadly. Help
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
html {
|
||||
overflow: auto;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-bg);
|
||||
@@ -328,6 +401,10 @@ export default {
|
||||
min-height: calc(100vh - var(--spacing-card-bg));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
margin-top: var(--spacing-card-md);
|
||||
margin-bottom: var(--spacing-card-md);
|
||||
@@ -341,36 +418,35 @@ export default {
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 0.5rem;
|
||||
padding: 0 var(--spacing-card-lg);
|
||||
@media screen and (min-width: 450px) {
|
||||
margin: 0 var(--spacing-card-lg);
|
||||
padding: 0 var(--spacing-card-lg);
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.logo {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-dark);
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.small-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
}
|
||||
@media screen and (min-width: 350px) {
|
||||
.small-logo {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: 0.25rem;
|
||||
display: none;
|
||||
@@ -378,11 +454,13 @@ export default {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0 0 0 0.5rem;
|
||||
padding: 0;
|
||||
|
||||
svg {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
@@ -390,43 +468,30 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
section.menu-icon {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
section.right-group {
|
||||
section.nav-group {
|
||||
display: flex;
|
||||
flex-grow: 5;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: var(--size-navbar-height);
|
||||
height: calc(100vh - var(--size-navbar-height));
|
||||
right: -100vw;
|
||||
background-color: var(--color-raised-bg);
|
||||
transition: right 150ms;
|
||||
z-index: 100;
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
section.nav {
|
||||
flex-grow: 5;
|
||||
|
||||
.styled-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: 3px;
|
||||
margin-left: 2rem;
|
||||
|
||||
a {
|
||||
margin-left: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
a.tab {
|
||||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -437,22 +502,30 @@ export default {
|
||||
section.user-controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
min-width: 12rem;
|
||||
|
||||
margin: 0.5rem auto;
|
||||
|
||||
.control-button {
|
||||
display: flex;
|
||||
max-width: 2rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-max);
|
||||
margin: 0 0.5rem 0 0;
|
||||
display: none;
|
||||
box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
|
||||
svg {
|
||||
color: var(--color-button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
@@ -476,120 +549,108 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.theme-mobile-button {
|
||||
margin-bottom: 1rem;
|
||||
.hide-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
|
||||
&.open {
|
||||
.control {
|
||||
//background: var(--color-button-bg);
|
||||
//border-radius: 1.25rem 1.25rem 0 0;
|
||||
//.dropdown-icon {
|
||||
// transform: rotate(180deg);
|
||||
//}
|
||||
}
|
||||
.content {
|
||||
//display: unset;
|
||||
}
|
||||
}
|
||||
.control {
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-max);
|
||||
align-items: center;
|
||||
background: none;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-dark);
|
||||
font-size: var(--font-size-nm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin: 0 auto 0 0.25rem;
|
||||
}
|
||||
}
|
||||
.dropdown-icon {
|
||||
display: none;
|
||||
transition: 150ms ease transform;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
button {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
||||
.user-icon {
|
||||
border-radius: 100%;
|
||||
height: 2rem;
|
||||
outline: 2px solid var(--color-raised-bg);
|
||||
width: 2rem;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
.caret::after {
|
||||
content: '\23F7';
|
||||
color: inherit;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid var(--color-divider-dark);
|
||||
list-style: none;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0.5rem 0 0 0;
|
||||
max-width: 25rem;
|
||||
min-width: 12rem;
|
||||
opacity: 0;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
right: -1rem;
|
||||
transform: scaleY(0.9);
|
||||
transform-origin: top;
|
||||
transition: all 0.1s ease-in-out 0.05s, color 0s ease-in-out 0s,
|
||||
background-color 0s ease-in-out 0s,
|
||||
border-color 0s ease-in-out 0s;
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
z-index: 1;
|
||||
hr {
|
||||
|
||||
.divider {
|
||||
background-color: var(--color-divider-dark);
|
||||
border: none;
|
||||
color: var(--color-divider-dark);
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--color-button-bg-active);
|
||||
}
|
||||
a,
|
||||
button {
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0.75rem 1.5rem;
|
||||
svg {
|
||||
background: none;
|
||||
border-radius: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
span {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.item:focus {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.profile-link {
|
||||
.prompt {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.content {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .user-icon,
|
||||
.dropdown:focus .user-icon,
|
||||
.dropdown:focus-within .user-icon {
|
||||
outline-color: var(--color-raised-bg-hover);
|
||||
}
|
||||
|
||||
.dropdown:hover .content {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -597,7 +658,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin: 1rem 0 0.5rem;
|
||||
margin: 0;
|
||||
|
||||
.log-in-button {
|
||||
margin: 0 auto;
|
||||
@@ -609,13 +670,15 @@ export default {
|
||||
border-radius: var(--size-rounded-max);
|
||||
background-color: var(--color-brand);
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
//outline: none; Bad for accessibility
|
||||
color: var(--color-brand-inverted);
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-brand-hover);
|
||||
@@ -623,128 +686,153 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
section.menu-icon {
|
||||
@media screen and (max-width: 750px) {
|
||||
section.nav-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.mobile-header-mode-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.right-group {
|
||||
flex-direction: unset;
|
||||
overflow-y: unset;
|
||||
position: unset;
|
||||
width: unset;
|
||||
top: unset;
|
||||
height: unset;
|
||||
right: unset;
|
||||
background-color: unset;
|
||||
transition: unset;
|
||||
z-index: unset;
|
||||
|
||||
section.nav {
|
||||
.styled-tabs {
|
||||
flex-direction: unset;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: 3px;
|
||||
margin-left: 2rem;
|
||||
|
||||
a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a.tab {
|
||||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.user-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: unset;
|
||||
margin: unset;
|
||||
|
||||
.control-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme-mobile-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&:hover .control {
|
||||
background: var(--color-button-bg-hover);
|
||||
}
|
||||
&.open {
|
||||
.control {
|
||||
background: var(--color-button-bg);
|
||||
border-radius: 1.25rem 1.25rem 0 0;
|
||||
.dropdown-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: 0 0 var(--size-rounded-control)
|
||||
var(--size-rounded-control);
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
a,
|
||||
button {
|
||||
svg {
|
||||
margin-left: 0;
|
||||
}
|
||||
span {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: calc(100% - 7.5rem);
|
||||
position: fixed;
|
||||
.mobile-navbar {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: var(--size-mobile-navbar-height);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-raised-bg);
|
||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
|
||||
z-index: 5;
|
||||
|
||||
.tab {
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
transition: color ease-in-out 0.15s;
|
||||
color: var(--color-text-inactive);
|
||||
|
||||
svg {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.control {
|
||||
.avatar {
|
||||
img {
|
||||
margin-left: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-text);
|
||||
}
|
||||
span {
|
||||
margin-right: 1.5rem;
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
.dropdown-icon {
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
height: calc(100% - var(--size-mobile-navbar-height));
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
|
||||
.items-container {
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem;
|
||||
|
||||
button {
|
||||
box-sizing: unset;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-md);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
width: calc(100% - 4rem);
|
||||
max-width: 18rem;
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
color: var(--color-button-text-active);
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
|
||||
&.log-in {
|
||||
color: var(--color-brand-inverted);
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
|
||||
&.log-out {
|
||||
color: white;
|
||||
background-color: var(--color-badge-red-bg);
|
||||
}
|
||||
|
||||
&.user-item {
|
||||
flex-direction: column;
|
||||
row-gap: 0.5rem;
|
||||
//width: 8rem;
|
||||
max-width: 18rem;
|
||||
flex-grow: 0;
|
||||
|
||||
.profile-link {
|
||||
text-align: center;
|
||||
|
||||
.prompt {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: var(--size-rounded-max);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.auth-prompt {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
flex-grow: 1;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+23
-4
@@ -60,18 +60,26 @@ export default {
|
||||
|
||||
.cover {
|
||||
img {
|
||||
border-radius: var(--size-rounded-lg);
|
||||
border-radius: var(--size-rounded-card);
|
||||
width: 100%;
|
||||
height: calc(75vh - var(--size-navbar-height));
|
||||
object-fit: cover;
|
||||
object-position: 10% 12.5%;
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
height: calc(75vh);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: calc(10vh + var(--size-navbar-height));
|
||||
width: 30rem;
|
||||
//max-width: 25%;
|
||||
max-width: 30rem;
|
||||
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
padding-left: 6rem;
|
||||
|
||||
color: #fff;
|
||||
@@ -97,12 +105,23 @@ export default {
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
input {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.iconified-button {
|
||||
margin-left: 0.25rem;
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
padding-left: 3rem;
|
||||
max-width: 55%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user