You've already forked AstralRinth
forked from didirus/AstralRinth
Versatile auth URLs & many UI fixes (#199)
* Make project cards right-align their last element Spaces out elements in a `.project-card` using `justify-content: space-between;`. Fixes modrinth/knossos#170 * Automatically set URL for auth redirect * Make login button use base url or current origin Allows the login button to work in dev environment * Remove Axios base URL trailing slash * Update authUrl() on dashboard to match default * Remove 'code' query from URL on page load Allow non-exact paths to highlight mod & dashboard tabs Fixes modrinth/knossos#200 * Make page 5 button visible on page 4 (pagination) Fixes modrinth/knossos#184 * Color links on legal pages Fixes modrinth/knossos#166 * Set max notifications to 5 and ignore duplicates Fixes modrinth/knossos#175 * Add space above report button when no user desc Fixes modrinth/knossos#143 * Better text spacing from edge of mobile screen Fixes modrinth/knossos#179 * Fix slanted bars in modrinth/knossos#57 * Fix checkbox grid and role label Fixes modrinth/knossos#191 * Move mod 'settings' button to the far right Fixes modrinth/knossos#138 * Abbreviate minutes to min. when time is too long Not a perfect solution imo, but works for now Fixes modrinth/knossos#193 * Fix mobile header margins & add breakpoints Fixes modrinth/knossos#203 * Clean up nuxt config Silence babel warning & styleResources * Upgrade sass-loader to 10.1.1 and remove warning * Remove added horizontal footer padding https://github.com/modrinth/knossos/pull/199#discussion_r629011624 * Improve mobile header fix * Fix up minor inconsistencies in mod header * Remove hard coded date * Cleans up pagination to be more intuitive * Fixes member invite input on moble * Fix login button when searching mods * Improved mobile mod search Consistently sized pagination buttons Breakpoint for sort buttons on smaller screens * Consistent link style on text-only pages * Better 4k support * Slightly better mobile project-card support Shuffles categories under mod icon when there is room * Animate homepage typewriter effect backwards * Tiny commit to align mod icons in mod headers * Make processing status include 'Under Review' This can be later updated once the backend has a separate status * Create vercel.json * Update domain auto detection * Test vercel NODE_ENV * Remove console.log for debugging hosting services * Make mobile first + fix shrinked text circle size * Optimize SVG * Change media queries to be more mobile first * Remove `|| window.location.origin` * re-deploy vercel * Change "Processing" message to "Under review"
This commit is contained in:
venashial
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<footer :class="{ centered, hideBig, hideSmall }">
|
||||
<footer :class="{ centered, padded, hideBig, hideSmall }">
|
||||
<span>
|
||||
Modrinth is open source software. You may view the source code at
|
||||
<a target="_blank" href="https://github.com/modrinth">our GitHub page</a>.
|
||||
@@ -55,6 +55,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
padded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hideSmall: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -78,8 +82,12 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2rem 0 2rem 0;
|
||||
padding: 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@@ -10,17 +10,22 @@
|
||||
</button>
|
||||
<div
|
||||
v-for="(item, index) in pages"
|
||||
:key="'page-' + item"
|
||||
:key="'page-' + item + '-' + index"
|
||||
:class="{
|
||||
'page-number': currentPage !== item,
|
||||
shrink: item > 99,
|
||||
}"
|
||||
class="page-number-container"
|
||||
>
|
||||
<div v-if="pages[index - 1] + 1 !== item && item !== 1" class="has-icon">
|
||||
<div v-if="item == '-'" class="has-icon">
|
||||
<GapIcon />
|
||||
</div>
|
||||
<button
|
||||
:class="{ 'page-number current': currentPage === item }"
|
||||
v-else
|
||||
:class="{
|
||||
'page-number current': currentPage === item,
|
||||
shrink: item > 99,
|
||||
}"
|
||||
@click="currentPage !== item ? switchPage(item) : null"
|
||||
>
|
||||
{{ item }}
|
||||
@@ -28,7 +33,9 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
:class="{ disabled: currentPage === pages[pages.length - 1] }"
|
||||
:class="{
|
||||
disabled: currentPage === pages[pages.length - 1],
|
||||
}"
|
||||
class="paginate has-icon"
|
||||
aria-label="Next Page"
|
||||
@click="
|
||||
@@ -76,10 +83,11 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
button {
|
||||
min-width: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
height: 2rem;
|
||||
border-radius: 2rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 2em;
|
||||
background: transparent;
|
||||
&.page-number.current {
|
||||
background: var(--color-button-bg-hover);
|
||||
@@ -100,15 +108,37 @@ button {
|
||||
.has-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.5rem;
|
||||
height: 2rem;
|
||||
height: 2em;
|
||||
svg {
|
||||
width: 1rem;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.page-number-container {
|
||||
.page-number-container,
|
||||
button,
|
||||
.has-icon {
|
||||
display: flex;
|
||||
max-height: 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.paginates {
|
||||
height: 2em;
|
||||
margin: 0.5rem 0;
|
||||
> div {
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
font-size: 80%;
|
||||
@media screen and (min-width: 350px) {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shrink {
|
||||
font-size: 0.9rem;
|
||||
height: 2.225em;
|
||||
width: 2.225em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
loading="lazy"
|
||||
/>
|
||||
</nuxt-link>
|
||||
<Categories :categories="categories" class="left-categories" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="top">
|
||||
@@ -40,7 +41,7 @@
|
||||
>Draft</span
|
||||
>
|
||||
<span v-if="status === 'processing'" class="badge yellow">
|
||||
Processing
|
||||
Under review
|
||||
</span>
|
||||
<span v-if="status === 'unlisted'" class="badge gray">
|
||||
Unlisted
|
||||
@@ -99,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Categories :categories="categories" />
|
||||
<Categories :categories="categories" class="right-categories" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,6 +208,7 @@ export default {
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -280,6 +282,19 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-categories {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.left-categories {
|
||||
display: flex;
|
||||
margin: 0 0 0.75rem 0.75rem;
|
||||
width: 7rem;
|
||||
}
|
||||
.right-categories {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
@extend %column;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user