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

Project, Search, User redesign (#1281)

Browse Source 
* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
Geometrically
2024-08-20 23:03:16 -07:00
committed by GitHub
parent a19ce0458a
commit 2d416d491c
101 changed files with 5361 additions and 4488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
apps/frontend/src/pages/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="landing-hero">
<ModrinthIcon />
<ModrinthIcon class="modrinth-icon" />
<h1 class="main-header">
The place for Minecraft
<div class="animate-strong">
@@ -22,18 +22,19 @@
community.
</h2>
<div class="button-group">
<nuxt-link to="/mods" class="iconified-button brand-button"> Discover mods </nuxt-link>
<nuxt-link
v-if="!auth.user"
to="/auth/sign-up"
class="iconified-button outline-button"
rel="noopener nofollow"
>
Sign up
</nuxt-link>
<nuxt-link v-else to="/dashboard/projects" class="iconified-button outline-button">
Go to dashboard
</nuxt-link>
<ButtonStyled color="brand" size="large">
<nuxt-link to="/mods"> <CompassIcon /> Discover mods </nuxt-link>
</ButtonStyled>
<ButtonStyled size="large" type="outlined">
<nuxt-link v-if="!auth.user" to="/auth/sign-up" rel="noopener nofollow">
<LogInIcon />
Sign up
</nuxt-link>
<nuxt-link v-else to="/dashboard/projects">
<DashboardIcon />
Go to dashboard
</nuxt-link>
</ButtonStyled>
</div>
</div>
<div class="users-section-outer">
@@ -411,7 +412,7 @@
viewBox="0 0 865 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="light-height"
class="light-height modrinth-icon"
>
<g clip-path="url(#clip0_419_237)">
<rect x="176" width="512" height="512" fill="url(#paint0_linear_419_237)" />
@@ -455,7 +456,13 @@
</clipPath>
</defs>
</svg>
<svg v-else viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
v-else
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="modrinth-icon"
>
<g clip-path="url(#clip0_127_331)">
<rect width="512" height="512" fill="url(#paint0_linear_127_331)" />
<g style="mix-blend-mode: overlay">
@@ -493,18 +500,22 @@
Read more about <br />
<strong class="main-header-strong">Modrinth</strong>
</h2>
<a
href="https://blog.modrinth.com/?utm_source=website&utm_source=homepage&utm_campaign=newsletter"
class="iconified-button brand-button"
>
Visit the blog
</a>
<ButtonStyled color="brand">
<a
href="https://blog.modrinth.com/?utm_source=website&utm_source=homepage&utm_campaign=newsletter"
>
<NewspaperIcon />
Visit the blog
</a>
</ButtonStyled>
</div>
</div>
</div>
</template>
<script setup>
import { Multiselect } from "vue-multiselect";
import { ButtonStyled } from "@modrinth/ui";
import { CompassIcon, LogInIcon, DashboardIcon, NewspaperIcon } from "@modrinth/assets";
import SearchIcon from "~/assets/images/utils/search.svg?component";
import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
import ModrinthIcon from "~/assets/images/logo.svg?component";
@@ -554,7 +565,7 @@ async function updateSearchProjects() {
text-align: center;
flex-direction: column;
svg {
.modrinth-icon {
width: 13rem;
height: 13rem;
margin-bottom: 2.5rem;
@@ -575,12 +586,6 @@ async function updateSearchProjects() {
gap: 1.25rem;
margin: 0 auto 5rem;
justify-content: center;
.outline-button {
color: var(--landing-color-heading);
background: none;
border: 1px var(--landing-color-heading) solid;
}
}
}
@@ -1044,7 +1049,7 @@ async function updateSearchProjects() {
padding: 1rem 1rem 2rem 1rem;
overflow: hidden;
svg {
.modrinth-icon {
z-index: 2;
width: auto;
height: 32rem;
@@ -1201,11 +1206,6 @@ async function updateSearchProjects() {
}
}
.iconified-button {
font-weight: 600;
min-height: 3rem;
}
@media screen and (min-width: 560px) {
.landing-hero {
h2 {
@@ -1276,7 +1276,7 @@ async function updateSearchProjects() {
font-size: 1.625rem;
}
margin-top: -4rem;
margin-top: -5rem;
padding: 11.25rem 1rem 12rem;
}