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
@@ -110,5 +110,6 @@ export default {
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--color-link);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
authUrl() {
|
||||
return `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${this.$route.fullPath}`
|
||||
return `https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${this.$route.fullPath}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
async logout() {
|
||||
this.$cookies.set('auth-token-reset', true)
|
||||
await this.$router.replace(
|
||||
'https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com/'
|
||||
`https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${this.$route.fullPath}`
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -171,7 +171,7 @@ fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data =
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<m-footer class="footer" centered />
|
||||
<m-footer class="footer" centered padded />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -188,6 +188,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
currentText: 'Open source',
|
||||
increasing: true,
|
||||
texts: ['Open source', 'Easy to use', 'Developer focused', 'API Based'],
|
||||
}
|
||||
},
|
||||
@@ -205,16 +206,29 @@ export default {
|
||||
})
|
||||
},
|
||||
typeWriter(text, i, callback) {
|
||||
if (!text || i >= text.length) {
|
||||
setTimeout(callback, 1000 + Math.random() * 500)
|
||||
if (!this.increasing && i <= 0) {
|
||||
this.increasing = true
|
||||
setTimeout(callback, 300 + Math.random() * 50)
|
||||
return
|
||||
}
|
||||
|
||||
this.currentText = text.substring(0, i + 1)
|
||||
setTimeout(
|
||||
() => this.typeWriter(text, i + 1, callback),
|
||||
150 + Math.random() * 50
|
||||
)
|
||||
const step = this.increasing ? 1 : -1
|
||||
|
||||
if (i >= text.length && this.increasing) {
|
||||
this.increasing = false
|
||||
|
||||
setTimeout(
|
||||
() => this.typeWriter(text, i + step, callback),
|
||||
1300 + Math.random() * 500
|
||||
)
|
||||
} else {
|
||||
this.currentText = text.substring(0, i + step)
|
||||
const speed = this.increasing ? 140 : 50
|
||||
setTimeout(
|
||||
() => this.typeWriter(text, i + step, callback),
|
||||
speed + Math.random() * 20
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -233,6 +247,9 @@ export default {
|
||||
.left {
|
||||
padding-top: 75px;
|
||||
padding-left: 100px;
|
||||
@media screen and (min-width: 1500px) {
|
||||
padding-left: 15%;
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
display: inline-block;
|
||||
@@ -287,6 +304,11 @@ export default {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
@media screen and (min-width: 2048px) {
|
||||
max-width: 15vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
@@ -311,7 +333,7 @@ export default {
|
||||
background: inherit;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -323,12 +345,18 @@ export default {
|
||||
&:before {
|
||||
top: 0;
|
||||
transform: skewY(5deg);
|
||||
@media screen and (min-width: 2048px) {
|
||||
transform: skewY(2deg);
|
||||
}
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transform: skewY(-5deg);
|
||||
@media screen and (min-width: 2048px) {
|
||||
transform: skewY(-2deg);
|
||||
}
|
||||
transform-origin: 100%;
|
||||
}
|
||||
}
|
||||
@@ -388,6 +416,12 @@ export default {
|
||||
padding-left: 0 !important;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
h1,
|
||||
h3,
|
||||
p {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
|
||||
@@ -228,4 +228,9 @@ export default {
|
||||
@extend %card;
|
||||
padding: var(--spacing-card-sm) var(--spacing-card-lg);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--color-link);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -201,4 +201,9 @@ export default {
|
||||
@extend %card;
|
||||
padding: var(--spacing-card-sm) var(--spacing-card-lg);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--color-link);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -84,13 +84,6 @@
|
||||
>
|
||||
<span>Versions</span>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
v-if="currentMember"
|
||||
:to="'/mod/' + (mod.slug ? mod.slug : mod.id) + '/settings'"
|
||||
class="tab"
|
||||
>
|
||||
<span>Settings</span>
|
||||
</nuxt-link>
|
||||
<a
|
||||
v-if="mod.wiki_url"
|
||||
:href="mod.wiki_url"
|
||||
@@ -127,7 +120,14 @@
|
||||
<ExternalIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<div class="filler" />
|
||||
<nuxt-link
|
||||
v-if="currentMember"
|
||||
:to="'/mod/' + mod.id + '/settings'"
|
||||
class="tab settings-tab"
|
||||
>
|
||||
<SettingsIcon />
|
||||
<span>Settings</span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-content">
|
||||
@@ -162,7 +162,7 @@
|
||||
"
|
||||
class="value"
|
||||
>
|
||||
{{ $dayjs(mod.published).fromNow() }}
|
||||
{{ formatTime(mod.published) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,7 +195,7 @@
|
||||
"
|
||||
class="value"
|
||||
>
|
||||
{{ $dayjs(mod.updated).fromNow() }}
|
||||
{{ formatTime(mod.updated) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -368,6 +368,7 @@ import ReportIcon from '~/assets/images/utils/report.svg?inline'
|
||||
import FollowIcon from '~/assets/images/utils/heart.svg?inline'
|
||||
|
||||
import ExternalIcon from '~/assets/images/utils/external.svg?inline'
|
||||
import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
|
||||
|
||||
import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
|
||||
import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
|
||||
@@ -380,6 +381,7 @@ export default {
|
||||
MFooter,
|
||||
Categories,
|
||||
ExternalIcon,
|
||||
SettingsIcon,
|
||||
ForgeIcon,
|
||||
FabricIcon,
|
||||
DownloadIcon,
|
||||
@@ -501,6 +503,13 @@ export default {
|
||||
|
||||
this.userFollows.splice(this.userFollows.indexOf(this.mod.id), 1)
|
||||
},
|
||||
formatTime(date) {
|
||||
let defaultMessage = this.$dayjs(date).fromNow()
|
||||
if (defaultMessage.length > 13) {
|
||||
defaultMessage = defaultMessage.replace('minutes', 'min.')
|
||||
}
|
||||
return defaultMessage
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
@@ -557,32 +566,42 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
|
||||
@extend %card-spaced-b;
|
||||
width: 100%;
|
||||
.icon {
|
||||
margin: auto 0;
|
||||
margin: unset 0;
|
||||
height: 6.08rem;
|
||||
@media screen and (min-width: 1024px) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin: var(--spacing-card-md);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border-radius: var(--size-rounded-icon);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
@extend %column;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: calc(100% - 0.2rem);
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.title {
|
||||
margin: var(--spacing-card-md) var(--spacing-card-md) 0 0;
|
||||
margin: 0;
|
||||
color: var(--color-text-dark);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
.description {
|
||||
margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
|
||||
margin-top: var(--spacing-card-sm);
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
.alt-nav {
|
||||
margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
|
||||
margin-top: auto;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -590,30 +609,73 @@ export default {
|
||||
}
|
||||
.buttons {
|
||||
@extend %row;
|
||||
margin: var(--spacing-card-md) var(--spacing-card-md) var(--spacing-card-md)
|
||||
0;
|
||||
|
||||
button,
|
||||
a {
|
||||
margin: 0.2rem 0 0 0.2rem;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0.5rem;
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
@media screen and (min-width: 1024px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-bottom: 1rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
align-items: unset;
|
||||
text-align: unset;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
padding: 1rem;
|
||||
grid-gap: 1rem;
|
||||
text-align: left;
|
||||
|
||||
.buttons {
|
||||
align-self: flex-start;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mod-navigation {
|
||||
@extend %card-spaced-b;
|
||||
padding-bottom: 0.2rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
.tabs {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
|
||||
.tab {
|
||||
padding: 0;
|
||||
margin: 0.9rem 0.5rem 0.8rem 0.5rem;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
@media screen and (min-width: 1024px) {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mod-info {
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
</label>
|
||||
</section>
|
||||
<div class="section-header columns">
|
||||
<div class="section-header columns team-invite">
|
||||
<h3 class="column-grow-1">Team members</h3>
|
||||
<div class="column">
|
||||
<input
|
||||
@@ -417,12 +417,30 @@ export default {
|
||||
|
||||
.main-info {
|
||||
margin-bottom: var(--spacing-card-lg);
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
label {
|
||||
align-items: center;
|
||||
input {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.permissions {
|
||||
margin: 1rem 0;
|
||||
max-width: 45rem;
|
||||
display: grid;
|
||||
grid-template-columns: 10rem 10rem 10rem;
|
||||
grid-template-rows: 1.5rem 1.5rem 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
label {
|
||||
flex-direction: row;
|
||||
input {
|
||||
flex: none;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,10 +487,37 @@ section {
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
flex: 1;
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
}
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-invite {
|
||||
@media screen and (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -613,9 +613,11 @@ export default {
|
||||
|
||||
this.currentPage = newPageNumber
|
||||
if (pageAmount > 4) {
|
||||
if (this.currentPage + 1 >= pageAmount) {
|
||||
if (this.currentPage + 3 >= pageAmount) {
|
||||
this.pages = [
|
||||
1,
|
||||
'-',
|
||||
pageAmount - 4,
|
||||
pageAmount - 3,
|
||||
pageAmount - 2,
|
||||
pageAmount - 1,
|
||||
@@ -624,13 +626,15 @@ export default {
|
||||
} else if (this.currentPage > 4) {
|
||||
this.pages = [
|
||||
1,
|
||||
'-',
|
||||
this.currentPage - 1,
|
||||
this.currentPage,
|
||||
this.currentPage + 1,
|
||||
'-',
|
||||
pageAmount,
|
||||
]
|
||||
} else {
|
||||
this.pages = [1, 2, 3, 4, pageAmount]
|
||||
this.pages = [1, 2, 3, 4, 5, '-', pageAmount]
|
||||
}
|
||||
} else {
|
||||
this.pages = Array.from({ length: pageAmount }, (_, i) => i + 1)
|
||||
@@ -716,6 +720,12 @@ export default {
|
||||
margin-right: 0.5rem;
|
||||
display: flex;
|
||||
width: auto;
|
||||
@media screen and (max-width: 350px) {
|
||||
flex-direction: column;
|
||||
.mobile-filters-button {
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
}
|
||||
.per-page {
|
||||
margin-left: 0.5rem;
|
||||
display: none;
|
||||
@@ -739,7 +749,7 @@ export default {
|
||||
.search-bottom {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
background: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-card);
|
||||
padding: 0 1rem;
|
||||
@@ -752,6 +762,7 @@ export default {
|
||||
}
|
||||
@media screen and (min-width: 550px) {
|
||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||
justify-content: flex-end;
|
||||
.per-page {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
@@ -227,6 +227,8 @@ export default {
|
||||
.buttons {
|
||||
@extend %column;
|
||||
|
||||
margin-top: 16px;
|
||||
|
||||
.iconified-button {
|
||||
max-width: 4.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user