You've already forked AstralRinth
forked from didirus/AstralRinth
Project, Search, User redesign (#1281)
* 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
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<Modal ref="modal" :header="title" :noblur="noblur">
|
||||
<div class="modal-delete">
|
||||
<NewModal ref="modal" :noblur="noblur" danger>
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
|
||||
</slot>
|
||||
</template>
|
||||
<div>
|
||||
<div class="markdown-body" v-html="renderString(description)" />
|
||||
<label v-if="hasToType" for="confirmation" class="confirmation-label">
|
||||
<span>
|
||||
@@ -19,25 +24,30 @@
|
||||
@input="type"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group push-right">
|
||||
<button class="btn" @click="modal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-danger" :disabled="action_disabled" @click="proceed">
|
||||
<TrashIcon />
|
||||
{{ proceedLabel }}
|
||||
</button>
|
||||
<div class="flex gap-2 mt-6">
|
||||
<ButtonStyled color="red">
|
||||
<button :disabled="action_disabled" @click="proceed">
|
||||
<TrashIcon />
|
||||
{{ proceedLabel }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled>
|
||||
<button @click="modal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</NewModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { renderString } from '@modrinth/utils'
|
||||
import { ref } from 'vue'
|
||||
import { TrashIcon, XIcon } from '@modrinth/assets'
|
||||
import Modal from './Modal.vue'
|
||||
import NewModal from './NewModal.vue'
|
||||
import ButtonStyled from '../base/ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
confirmationText: {
|
||||
@@ -92,36 +102,3 @@ function show() {
|
||||
|
||||
defineExpose({ show })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-delete {
|
||||
padding: var(--gap-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.markdown-body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.confirmation-label {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.confirmation-text {
|
||||
padding-right: 0.25ch;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.confirmation-input {
|
||||
input {
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-left: auto;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div v-if="open">
|
||||
<div
|
||||
v-if="open"
|
||||
:style="`${mouseX !== -1 ? `--_mouse-x: ${mouseX};` : ''} ${mouseY !== -1 ? `--_mouse-y: ${mouseY};` : ''}`"
|
||||
>
|
||||
<div
|
||||
:class="{ shown: visible }"
|
||||
class="tauri-overlay"
|
||||
@@ -10,15 +13,22 @@
|
||||
:class="{
|
||||
shown: visible,
|
||||
noblur: props.noblur,
|
||||
danger: danger,
|
||||
}"
|
||||
class="modal-overlay"
|
||||
@click="() => (closable ? hide() : {})"
|
||||
/>
|
||||
<div class="modal-container" :class="{ shown: visible }">
|
||||
<div class="modal-body flex flex-col bg-bg-raised rounded-2xl p-6">
|
||||
<div class="flex items-center pb-6 border-b-[1px] border-button-bg">
|
||||
<div class="flex flex-grow items-center gap-3">
|
||||
<slot name="title" />
|
||||
<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
|
||||
<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
|
||||
<div
|
||||
class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-button-bg max-w-full"
|
||||
>
|
||||
<div class="flex text-wrap break-words items-center gap-3 min-w-0">
|
||||
<slot name="title">
|
||||
<span v-if="header" class="text-lg font-extrabold text-contrast">
|
||||
{{ header }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<ButtonStyled v-if="closable" circular>
|
||||
<button @click="hide">
|
||||
@@ -26,8 +36,8 @@
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<slot> You just lost the game. </slot>
|
||||
<div class="overflow-y-auto p-6">
|
||||
<slot> You just lost the game.</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,27 +45,42 @@
|
||||
<div v-else></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { XIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
import ButtonStyled from '../base/ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
noblur: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
noblur?: boolean
|
||||
closable?: boolean
|
||||
danger?: boolean
|
||||
closeOnEsc?: boolean
|
||||
warnOnClose?: boolean
|
||||
header?: string
|
||||
}>(),
|
||||
{
|
||||
type: true,
|
||||
closable: true,
|
||||
danger: false,
|
||||
closeOnEsc: true,
|
||||
warnOnClose: false,
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
const open = ref(false)
|
||||
const visible = ref(false)
|
||||
|
||||
function show() {
|
||||
function show(event?: MouseEvent) {
|
||||
open.value = true
|
||||
window.addEventListener('mousedown', updateMousePosition)
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
if (event) {
|
||||
updateMousePosition(event)
|
||||
} else {
|
||||
mouseX.value = window.innerWidth / 2
|
||||
mouseY.value = window.innerHeight / 2
|
||||
}
|
||||
setTimeout(() => {
|
||||
visible.value = true
|
||||
}, 50)
|
||||
@@ -63,6 +88,8 @@ function show() {
|
||||
|
||||
function hide() {
|
||||
visible.value = false
|
||||
window.removeEventListener('mousedown', updateMousePosition)
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
setTimeout(() => {
|
||||
open.value = false
|
||||
}, 300)
|
||||
@@ -72,6 +99,22 @@ defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
|
||||
const mouseX = ref(-1)
|
||||
const mouseY = ref(-1)
|
||||
|
||||
function updateMousePosition(event: { clientX: number; clientY: number }) {
|
||||
mouseX.value = event.clientX
|
||||
mouseY.value = event.clientY
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (props.closeOnEsc && event.key === 'Escape') {
|
||||
hide()
|
||||
mouseX.value = window.innerWidth / 2
|
||||
mouseY.value = window.innerHeight / 2
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -91,15 +134,18 @@ defineExpose({
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
inset: -5rem;
|
||||
z-index: 19;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-out;
|
||||
background: linear-gradient(to bottom, rgba(27, 48, 42, 0.52) 0%, rgba(13, 21, 26, 0.95) 100%);
|
||||
transform: translateY(2rem) scale(0.8);
|
||||
border-radius: 120px;
|
||||
background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
|
||||
//transform: translate(
|
||||
// calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
|
||||
// calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
|
||||
// )
|
||||
// scaleX(0.8) scaleY(0.5);
|
||||
border-radius: 180px;
|
||||
filter: blur(5px);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
@@ -110,7 +156,7 @@ defineExpose({
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
backdrop-filter: blur(5px);
|
||||
transform: translateY(0) scale(1);
|
||||
transform: translate(0, 0) scaleX(1) scaleY(1);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
@@ -118,6 +164,10 @@ defineExpose({
|
||||
backdrop-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: linear-gradient(to bottom, rgba(43, 18, 26, 0.52) 0%, rgba(49, 10, 15, 0.95) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@@ -132,13 +182,19 @@ defineExpose({
|
||||
z-index: 21;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate(
|
||||
calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 16),
|
||||
calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 16)
|
||||
);
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
&.shown {
|
||||
visibility: visible;
|
||||
transform: translate(0, 0);
|
||||
|
||||
.modal-body {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
@@ -149,11 +205,11 @@ defineExpose({
|
||||
max-height: calc(100% - 2 * var(--gap-lg));
|
||||
max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: fit-content;
|
||||
pointer-events: auto;
|
||||
scale: 0.97;
|
||||
|
||||
transform: translateY(1rem);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
Reference in New Issue
Block a user