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

New features (#592)

Browse Source 
* New features

* Lots of bug fixes

* Fix respack creation

* Improve mobile nav with more project types

* Fix resolution sorting and remove icons

* Move cookie consent to top on small devices to get out of the way of navigation

* Move cookie consent + fix hydration

* Fix project editing + update search features

* Centralize hardcoding of loader/category names, fix cookie consent shadow, fix mobile navbar rounding

* Fix plugin platforms formatting

* Kitchen sink!

* Add support for display names

* LiteLoader formatting

* Fixed "show all loaders" toggle not resetting when changing pages

* Allow multiple loaders in version filter controls

* Fix clear filters button

* Revert "Add support for display names"

This reverts commit 370838763d86bcae51bf06c304248f7a1f8fc28f.

* Let's see how this goes. Upstream filters, attempt 1

* github? hello?

* No more "Server mod" on plugins

* Fix formatting of project types in project creation

* Move where project creation sets the resource pack loader

* Allow setting pixelated image-rendering

Allows to apply 'style' attribute to IMG tags with value
'image-rendering' set to 'pixelated', which can be useful for people who
use pixel art in their READMEs (to demonstrate items, for example).

* fix user page + hydration issue fix from Brawaru

* Rename to proxies

* Make categories use title case

* Always show project type on moderation page, improve project type display on project pages

* Remove invalid key

* Missed a check

* Fix browse menu animation

* Fix disabled button condition and minimum width for 2 lines

* Body -> Description in edit pages

* More casing consistency issues

* Fix duplicate version URLs

* Fix version creation

* Edit URLs, fix privacy page buttons

* Fix notifications popup overlaying

* Final merge fixes

Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: Sasha Sorokin <10401817+Brawaru@users.noreply.github.com>
This commit is contained in:
Geometrically
2022-08-14 12:42:58 -07:00
committed by GitHub
parent b16475b8bd
commit 673f7a82d1
31 changed files with 1152 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
layouts/default.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="layout">
<div ref="layout" class="layout">
<header class="site-header" role="presentation">
<section class="navbar columns" role="navigation">
<section class="skip column" role="presentation">
<a href="#main">Skip to Main Content</a>
<a v-if="registeredSkipLink" :href="registeredSkipLink.id">{{
registeredSkipLink.text
}}</a>
<a
v-show="!!registeredSkipLink"
:href="(registeredSkipLink || {}).id"
>{{ (registeredSkipLink || {}).text }}</a
>
</section>
<section class="logo column" role="presentation">
<NuxtLink to="/" aria-label="Modrinth home page">
@@ -19,7 +21,13 @@
<NuxtLink to="/mods" class="tab">
<span>Mods</span>
</NuxtLink>
<NuxtLink to="/modpacks" class="tab tab--alpha">
<!-- <NuxtLink to="/plugins" class="tab">-->
<!-- <span>Plugins</span>-->
<!-- </NuxtLink>-->
<!-- <NuxtLink to="/resourcepacks" class="tab">-->
<!-- <span>Resource Packs</span>-->
<!-- </NuxtLink>-->
<NuxtLink to="/modpacks" class="tab">
<span>Modpacks</span>
</NuxtLink>
</div>
@@ -162,23 +170,62 @@
</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 ref="mobileNavBar" class="mobile-navbar">
<div class="top-row">
<NuxtLink to="/" class="tab" @click.native="closeBrowseMenu()">
<HomeIcon />
</NuxtLink>
<div class="spacer"></div>
<button class="tab browse" @click="toggleBrowseMenu()">
<DropdownIcon :class="{ closed: !isBrowseMenuOpen }" />
<span>Browse</span>
</button>
<div class="spacer"></div>
<button class="tab" @click="toggleMobileMenu()">
<HamburgerIcon v-if="!isMobileMenuOpen" />
<CrossIcon v-else />
</button>
</div>
<div
:class="{ 'disable-childern': !isBrowseMenuOpen }"
class="project-types"
>
<NuxtLink
:tabindex="isBrowseMenuOpen ? 0 : -1"
to="/mods"
class="tab"
@click.native="closeBrowseMenu()"
>
<span>Mods</span>
</NuxtLink>
<!-- <NuxtLink-->
<!-- :tabindex="isBrowseMenuOpen ? 0 : -1"-->
<!-- to="/plugins"-->
<!-- class="tab"-->
<!-- @click.native="closeBrowseMenu()"-->
<!-- >-->
<!-- <span>Plugins</span>-->
<!-- </NuxtLink>-->
<!-- <NuxtLink-->
<!-- :tabindex="isBrowseMenuOpen ? 0 : -1"-->
<!-- to="/resourcepacks"-->
<!-- class="tab"-->
<!-- @click.native="closeBrowseMenu()"-->
<!-- >-->
<!-- <span>Resource Packs</span>-->
<!-- </NuxtLink>-->
<NuxtLink
:tabindex="isBrowseMenuOpen ? 0 : -1"
to="/modpacks"
class="tab"
@click.native="closeBrowseMenu()"
>
<span>Modpacks</span>
</NuxtLink>
</div>
</section>
<section ref="mobileMenu" class="mobile-menu">
<div class="mobile-menu-wrapper">
@@ -239,11 +286,12 @@
</section>
</header>
<main>
<CookieConsent />
<CookieConsent :mobile-menu-open="isBrowseMenuOpen" />
<notifications
group="main"
position="bottom right"
:max="5"
:class="{ 'browse-menu-open': isBrowseMenuOpen }"
:ignore-duplicates="true"
:duration="10000"
/>
@@ -312,16 +360,15 @@ import ClickOutside from 'vue-click-outside'
import ModrinthLogo from '~/assets/images/text-logo.svg?inline'
import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
import CrossIcon from '~/assets/images/utils/x.svg?inline'
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 MoonIcon from '~/assets/images/utils/moon.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 DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
@@ -343,8 +390,7 @@ export default {
GitHubIcon,
NotificationIcon,
HomeIcon,
ModIcon,
ModpackIcon,
CrossIcon,
HamburgerIcon,
CookieConsent,
SettingsIcon,
@@ -365,6 +411,7 @@ export default {
branch: process.env.branch || 'master',
hash: process.env.hash || 'unknown',
isMobileMenuOpen: false,
isBrowseMenuOpen: false,
registeredSkipLink: null,
moderationNotifications: 0,
}
@@ -429,6 +476,37 @@ export default {
document.body.style.overflowY !== 'hidden' ? 'hidden' : overflowStyle
this.isMobileMenuOpen = !currentlyActive
if (this.isMobileMenuOpen) {
this.$refs.mobileNavBar.className = `mobile-navbar`
this.$refs.layout.className = `layout`
this.isBrowseMenuOpen = false
}
},
toggleBrowseMenu() {
const currentlyActive =
this.$refs.mobileNavBar.className === 'mobile-navbar expanded'
this.$refs.mobileNavBar.className = `mobile-navbar${
currentlyActive ? '' : ' expanded'
}`
this.$refs.layout.className = `layout${
currentlyActive ? '' : ' expanded-mobile-nav'
}`
this.isBrowseMenuOpen = !currentlyActive
if (this.isBrowseMenuOpen) {
this.$refs.mobileMenu.className = `mobile-menu`
this.isMobileMenuOpen = false
}
},
closeBrowseMenu() {
this.$refs.mobileNavBar.className = `mobile-navbar`
this.$refs.layout.className = `layout`
this.isBrowseMenuOpen = false
},
async logout() {
this.$cookies.set('auth-token-reset', true)
@@ -453,16 +531,6 @@ export default {
removeFocus() {
document.activeElement.blur() // This doesn't work, sadly. Help
},
async getModerationCount() {
const [projects, reports] = (
await Promise.all([
this.$axios.get(`moderation/projects`, this.$defaultHeaders()),
this.$axios.get(`report`, this.$defaultHeaders()),
])
).map((it) => it.data)
return projects.length + reports.length
},
},
}
</script>
@@ -819,34 +887,36 @@ export default {
.mobile-navbar {
display: none;
width: 100%;
transition: height 0.25s ease-in-out;
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: 6;
flex-direction: column;
border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
overflow: hidden;
.tab {
background: none;
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: center;
align-items: center;
flex-direction: column;
flex-direction: row;
gap: 0.25rem;
font-weight: bold;
padding: 0;
margin: auto;
transition: color ease-in-out 0.15s;
color: var(--color-text-inactive);
text-align: center;
svg {
height: 1.75rem;
width: 1.75rem;
margin-bottom: 0.25rem;
}
&:hover,
@@ -863,9 +933,72 @@ export default {
}
}
.top-row {
min-height: var(--size-mobile-navbar-height);
display: flex;
width: 100%;
.browse {
flex-grow: 10;
svg {
transition: transform 0.125s ease-in-out;
&.closed {
transform: rotate(180deg);
}
}
}
.tab {
&:first-child {
margin-left: 2rem;
}
&:last-child {
margin-right: 2rem;
}
}
.spacer {
flex-grow: 1;
}
}
.disable-childern {
a {
pointer-events: none;
}
}
.project-types {
margin-top: 0.5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
row-gap: 0.5rem;
.tab {
flex: 0 0 fit-content;
background-color: var(--color-button-bg);
padding: 0.5rem 1.25rem;
margin: 0 0.25rem;
border-radius: var(--size-rounded-max);
&.nuxt-link-exact-active {
background-color: var(--color-brand);
color: var(--color-brand-inverted);
}
}
}
@media screen and (max-width: 750px) {
display: flex;
}
&.expanded {
height: var(--size-mobile-navbar-height-expanded);
}
}
}
@@ -874,12 +1007,13 @@ export default {
position: absolute;
top: 0;
background-color: var(--color-bg);
height: calc(100% - var(--size-mobile-navbar-height));
height: 100%;
width: 100%;
z-index: 5;
.mobile-menu-wrapper {
max-height: calc(100vh - var(--size-mobile-navbar-height));
margin-bottom: var(--size-mobile-navbar-height);
overflow-y: auto;
margin-top: auto;
@@ -903,6 +1037,7 @@ export default {
&.nuxt-link-exact-active {
color: var(--color-button-text-active);
svg {
color: var(--color-brand);
}