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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user