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

Add initial support for the v2 of the API (Still WIP) (#250)

Browse Source 
* Functionally implement modpacks

* Add LogoAnimated to logo license

* Fix eslint errors

* Add `z-index: 20` to user dropdown (#287)

* Fix pages not working, add changelog page, redesign versions page

* Update theme colors, add OLED theme, update some project creation text. (#292)

* Update theme colors, add OLED theme, update some project creation text.

* Make summary normal text color

* Update favicons, update logos to use dynamic colors, updated filters panel a bit

* Update wording from #250

* Version page rework

* Manually apply some commits from master, other minor v2 fixes (#296)

* Homepage styling improvements (#285)

* Add border radius to video + example code colors

* Change color + allow overflow scroll

* Minor v2 fixes

- Makes multiple loaders display correctly (used to be `Fabric,Forge` is now `Fabric, Forge`
- Fix oopses in #292
- Allow .jar and .zip in file prompt
- Apply 30cbd3a6c372940d1e86cc8134d0dfc7e8e5ee9c to pages/create/project.vue
- Display `fabric, forge` instead of broken icons on pages/create/project.vue

* Markdown styling fixes (#268)

* Add table color variables (+ prettier fixes)

* Add details and table styling to .markdown-body

* Add indexing meta value depending on the status of the mod. (#261)

* General UI Improvement (again) (#255)

* Add and fix some stuff

* Add warning when leaving to `mod/create`

* Fix mods/create not working

* Fix a bug & add improvements to a couple moderation aspects (#278)

This PR fixes reports on the moderation dashboard going to `/dashboard/mod/_id` instead of to `/mod/_id`.
It also allows the ability for moderators to unlist mods in the queue from the frontend instead of having to do it via the backend.
![image](https://i.imgur.com/x8shSVn.png)
Unlisted mods should have the ability to resubmit for approval, so I've also changed "Submit for Review" to "Submit for approval", allowing unlisted mods to do that as well.
![image](https://i.imgur.com/OC8Vyfo.png)

* Add project guidelines to Terms page (#275)

* Add project guidelines to Terms page

This adds the project guidelines as outlined [here](https://discord.com/channels/734077874708938864/734077874708938867/806556531491471368).
NOTE: I've made a few tweaks in wording to accommodate this format, so this is not an exact copy.

* Move rules to its own page

* Allow users to login from search page when it is rendered serverside (#272)

* Change `this.$route.fullPath` → `this.$route.path`

* Closes modrinth/knossos#256

* Wrap mod icon and title in link (#273)

* Wrap mod icon and title in link

* Fixes #218

* Editor's note

    Skipped #249 (search was rewritten), #266 (couldn't figure out how to apply it), #270 (didn't seem to apply properly), #252 (manually merged in with #292), #262 (superceded by #270), #282, #271, #277, #283, and #281 (those five didn't get wiped)

Co-authored-by: venashial <venashial.levo@aleeas.com>
Co-authored-by: Redblueflame <contact@redblueflame.com>
Co-authored-by: Johan Novak <wickedtree@wickedtree.codes>

* SSR descriptions, version edit page

* Working version editing + dependency management (besides files)

* Version create page, file functionality

* Fix some issues with the version page

* More versions page fixes

* Project gallery

* Box shadows, user profile page, WIP header

* Finish user dashboard

* Finish search and fix minor issues

* Moderator page + messages, notifications page

* Fix dropdown menu, fix XSS, fix team members page

* Change doc url on main page (#309)

* Re-Fix docs url (#313)

* Clean up. Part 1: Fix immediate problems (#316)

* Clean up tabs and cards CSS a little

* Fix project page; Remove bad styles from search

* Yeet and flatten lots of styles; fix font sizes

* Restyle search; fix moderation

* Fix profile page

* Remove injected SCSS entirely

* Fix a mobile layout overflowing

* Apiv2-support fixes (#320)

* Fix member user_id -> user.id

* Fix incorrect report redirect

* Change theme switcher from button to multiselect

* Fix remaining items

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix bugs

* Full mobile support, update create project page, fix various bugs

* New Dark Mode brand colors (#325)

* Use "color-brand-hover" for auth-prompt when hover over

* New dark mode brand colors

* Fix new version featured bug

* Remove old home page, other fixes

* Fix error when merging

* Fix prettier error :(

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: venashial <venashial.levo@aleeas.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
Co-authored-by: Emma <emmaffle@modrinth.com>
Co-authored-by: Johan Novak <wickedtree@wickedtree.codes>
Co-authored-by: Jai A <jaiagr@pm.me>
Co-authored-by: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Co-authored-by: Mikhail Oleynikov <contact@falseresync.ru>
Co-authored-by: Christian Popov <30723811+Xrey274@users.noreply.github.com>
This commit is contained in:
Redblueflame
2022-01-09 23:19:27 +01:00
committed by GitHub
parent c518f373df
commit a2266adb3f
167 changed files with 18841 additions and 18188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
assets/styles/components.scss
View File

@@ -3,27 +3,36 @@
.iconified-input {
align-items: center;
display: inline-flex;
flex-direction: row-reverse;
input {
padding-left: 2.5rem;
padding-left: 2rem;
}
svg {
color: var(--color-icon);
height: 1rem;
z-index: 1;
color: var(--color-text);
margin-right: -2rem;
}
}
.iconified-button {
padding: 0.25rem 0.5rem;
font-size: var(--font-size-sm);
display: flex;
padding: 0.25rem 1rem;
margin: 0 0.25rem 0 0;
font-size: var(--font-size-nm);
align-items: center;
cursor: pointer;
box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
max-height: 2rem;
color: var(--color-button-text);
background-color: var(--color-button-bg);
border-radius: var(--size-rounded-control);
text-decoration: none;
border-radius: 2rem;
&:hover,
&:focus {
@@ -66,14 +75,10 @@
}
.text-link {
color: var(--color-link);
text-decoration: underline;
}
.required:after {
content: ' *';
color: red;
}
.markdown-body {
blockquote,
details,
@@ -92,6 +97,7 @@
padding: 0;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
h1,
@@ -291,104 +297,6 @@
}
}
.tabs {
display: flex;
padding: 0.5rem 1rem;
.filler {
flex-grow: 1;
}
}
.tabs a.tab {
user-select: none;
display: flex;
align-items: center;
padding: 0.5rem 0.25rem 0.2rem;
margin: auto 0.5rem;
span {
border-bottom: 3px solid transparent;
}
svg {
width: 1rem;
height: 1rem;
margin-right: 0.4rem;
}
&:hover,
&:focus {
color: var(--color-text-medium);
span {
border-bottom: 3px solid var(--color-brand-disabled);
}
}
&.nuxt-link-exact-active,
&.active-path {
color: var(--color-text-dark);
span {
border-bottom: 3px solid var(--color-brand);
}
}
}
.sidebar {
.card {
padding: var(--spacing-card-md);
margin-bottom: var(--spacing-card-md);
@extend %card;
&.page-nav {
.tab {
padding: var(--spacing-card-sm);
display: flex;
align-items: center;
border-radius: var(--size-rounded-control);
margin-bottom: 0.5rem;
@extend %transparent-clickable;
svg {
color: var(--color-icon);
margin-right: 5px;
height: 1.25rem;
flex-shrink: 0;
}
&.nuxt-link-exact-active,
&.active-path {
svg {
color: var(--color-brand-light);
}
}
}
.tab:last-child {
margin-bottom: 0;
}
}
}
@media screen and (min-width: 1024px) {
width: 300px;
}
}
.sidebar-l {
@extend .sidebar;
@media screen and (min-width: 1024px) {
margin-right: var(--spacing-card-lg);
}
}
.sidebar-r {
@extend .sidebar;
margin-left: var(--spacing-card-lg);
}
.button {
//width: max-content;
margin: auto 0;
@@ -397,6 +305,7 @@
color: var(--color-button-text);
background-color: var(--color-button-bg);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-nm);
&:focus,
&:hover {
background-color: var(--color-button-bg-hover);
@@ -413,7 +322,24 @@
}
.transparent-button {
@extend %transparent-clickable;
border-radius: var(--size-rounded-control);
color: var(--color-text);
background-color: transparent;
&:focus,
&:hover,
&.selected,
&.nuxt-link-exact-active,
&.active-path {
color: var(--color-transparent-button-text-hover);
background-color: var(--color-transparent-button-bg-hover);
}
&:active {
color: var(--color-transparent-button-text-active);
background-color: var(--color-transparent-button-bg-active);
}
margin: auto 0;
padding: 6px 20px;
text-decoration: underline;
@@ -434,19 +360,45 @@
}
}
.brand-button-colors {
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25);
color: var(--color-brand-inverted);
background-color: var(--color-brand);
&:focus,
&:hover {
background-color: var(--color-brand-hover);
color: var(--color-brand-inverted);
}
&:active {
background-color: var(--color-brand-active);
color: var(--color-brand-inverted);
}
}
.multiselect--above .multiselect__content-wrapper {
border-top: none !important;
}
.multiselect {
color: var(--color-text) !important;
input {
background: transparent;
}
&.top-margin {
.multiselect__tags {
padding-top: 10px;
}
}
.multiselect__tags {
border-radius: 1.25rem;
background: var(--color-dropdown-bg);
border: none;
cursor: pointer;
padding-left: 1rem;
&:active,
&:hover {
background: var(--color-button-bg-hover);
@@ -459,6 +411,7 @@
background: transparent;
}
.multiselect__tag {
border-radius: 2rem;
color: var(--color-text-dark);
background: transparent;
border: 2px solid var(--color-brand);
@@ -469,10 +422,17 @@
color: var(--color-text-dark);
}
}
.multiselect__placeholder {
color: var(--color-text);
font-size: 16px;
line-height: 20px;
}
}
.multiselect__content-wrapper {
background: var(--color-dropdown-bg);
border: none;
overflow-x: hidden;
.multiselect__element {
.multiselect__option--highlight {
background: var(--color-button-bg-active);
@@ -495,17 +455,6 @@
}
}
.section-header {
@extend %card;
padding: var(--spacing-card-md) var(--spacing-card-lg);
margin-bottom: var(--spacing-card-md);
h3 {
margin: auto 0;
color: var(--color-text-dark);
font-weight: var(--font-weight-extrabold);
}
}
label {
display: flex;
flex-direction: column;
@@ -603,3 +552,129 @@ label {
border: 2px solid var(--color-brand);
}
}
.download-button {
display: flex;
align-items: center;
height: 1.75rem;
width: 1.75rem;
border-radius: 1.5rem;
background-color: var(--color-button-bg);
margin-right: var(--spacing-card-sm);
svg {
width: 1.25rem;
margin: auto;
}
flex-shrink: 0;
}
.textarea-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
textarea {
border-radius: var(--size-rounded-sm);
flex: 1;
overflow-y: auto;
resize: none;
max-width: 100%;
}
}
.styled-tabs {
align-items: center;
display: flex;
flex-wrap: wrap;
row-gap: var(--spacing-card-sm);
font-weight: bold;
color: var(--color-text-inactive);
overflow-x: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.tab {
padding: 0;
margin-right: var(--spacing-card-bg);
&:last-child {
margin-right: 0;
}
span {
font-weight: bold;
display: inline-block;
padding-bottom: 6px;
position: relative;
}
span::before {
background-color: transparent;
content: '';
position: absolute;
width: 60%;
height: 4px;
bottom: 0;
left: 20%;
}
&:hover,
&:focus {
color: var(--color-text);
span::before {
background-color: var(--color-brand-disabled);
}
}
&.nuxt-link-active,
&.selected {
color: var(--color-text);
span::before {
background-color: var(--color-brand);
box-shadow: 0 0 1px 0 var(--color-brand);
}
}
}
.right {
margin-left: auto;
}
}
.error {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
.icon {
width: 8rem;
height: 8rem;
margin: 1.5rem 0;
}
.text {
margin-bottom: 2rem;
font-size: 1.25rem;
text-align: center;
}
.link {
text-decoration: underline;
}
}
.card {
min-height: var(--font-size-2xl);
padding: var(--spacing-card-md) var(--spacing-card-lg);
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
margin-bottom: var(--spacing-card-md);
// box-shadow: var(--shadow-card);
}

127
assets/styles/global.scss
View File

@@ -1,32 +1,36 @@
html {
@extend .light-mode;
}
.light-mode {
--color-icon: #718096;
--color-text: #4a5568;
--color-text-medium: #2a303d;
--color-icon: #6b7280;
--color-text: hsl(221, 39%, 11%);
--color-text-secondary: hsl(220, 9%, 46%);
--color-text-inactive: hsl(215, 14%, 34%);
--color-text-dark: #1a202c;
--color-heading: #2c313d;
--color-heading-light: #777e8d;
--color-bg: #edf2f7;
--color-bg: hsl(220, 13%, 91%);
--color-raised-bg: #ffffff;
--color-divider: #eaecef;
--color-divider: hsl(220, 13%, 91%);
--color-divider-dark: #c8cdd3;
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #5da545;
--color-brand-hover: #53923e;
--color-brand-active: #4b8138;
--color-brand-light: #6bac57;
--color-brand: #30b27b;
--color-brand-hover: #1e9565;
--color-brand-active: #177955;
--color-brand-light: #30b27b;
--color-brand-inverted: #ffffff;
--color-brand-2: #5fa33b;
--color-brand-3: #c5ddb7;
--color-brand-2: #30b27b;
--color-brand-3: #30b27b;
--color-brand-disabled: #e2e8f0;
--color-button-bg: var(--color-bg);
--color-button-bg: #e6e7eb;
--color-button-text: var(--color-text-dark);
--color-button-bg-hover: #e0e7ee;
--color-button-bg-hover: #d9dce0;
--color-button-text-hover: #1b1e24;
--color-button-bg-active: #d0d7df;
--color-button-bg-active: #c3c6cb;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #eceef0;
--color-button-text-disabled: #9da3ac;
@@ -57,12 +61,12 @@
--color-badge-gray-text: #646161;
--color-badge-gray-bg: #c8c1c1;
--color-badge-red-text: #9b2c2c;
--color-badge-red-bg: #fed7d7;
--color-badge-green-text: #276749;
--color-badge-green-bg: #c6f6d5;
--color-badge-yellow-text: #675027;
--color-badge-yellow-bg: #f6e8c6;
--color-badge-red-text: #6e1931;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #184e38;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-block-quote: var(--color-tooltip-bg);
--color-header-underline: var(--color-tooltip-text);
@@ -70,39 +74,43 @@
--color-table-border: #dfe2e5;
--color-table-alternate-row: #f6f8fa;
--shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
--shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
}
.dark-mode {
--color-icon: #acacac;
--color-text: #cecece;
--color-text-medium: #e4e4e4;
--color-text-dark: #fbf8ec;
--color-heading: #fbf8ec;
--color-heading-light: #8a8a8a;
--color-bg: #171719;
--color-raised-bg: #222224;
--color-divider: #49494d;
--color-divider-dark: #646468;
--color-icon: #96a2b0;
--color-text: #b0bac5;
--color-text-inactive: #929aa3;
--color-text-dark: #ecf9fb;
--color-heading: #c4cfdd;
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-divider: #474b54;
--color-divider-dark: #646c75;
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #5da545;
--color-brand-hover: #6bac57;
--color-brand-active: #7fc46a;
--color-brand-light: #6bac57;
--color-brand-inverted: #ffffff;
--color-brand-2: #438121;
--color-brand-3: #344d26;
--color-brand: #1bd96a;
--color-brand-hover: #30b366;
--color-brand-active: #55f5ae;
--color-brand-light: #30b27b;
--color-brand-inverted: #000;
--color-brand-2: #30b27b;
--color-brand-3: #30b27b;
--color-brand-disabled: #414146;
--color-button-bg: #343438;
--color-button-bg: #3e434b;
--color-button-text: var(--color-text);
--color-button-bg-hover: #3a3a3f;
--color-button-bg-hover: #494f58;
--color-button-text-hover: #ffffff;
--color-button-bg-active: #49494e;
--color-button-bg-active: #616570;
--color-button-text-active: var(--color-button-text-hover);
--color-button-text-disabled: #444444;
--color-button-text-disabled: #797979;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
--color-transparent-button-bg-active: var(--color-button-bg-hover);
@@ -130,12 +138,12 @@
--color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1;
--color-badge-red-bg: #9b2c2c;
--color-badge-red-text: #fed7d7;
--color-badge-green-bg: #276749;
--color-badge-green-text: #c6f6d5;
--color-badge-yellow-bg: #675027;
--color-badge-yellow-text: #f6e8c6;
--color-badge-red-text: #bd1a48;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #1ebb7b;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-block-quote: var(--color-code-bg);
--color-header-underline: var(--color-tooltip-text);
@@ -145,6 +153,16 @@
--color-table-alternate-row: #262a30;
}
.oled-mode {
@extend .dark-mode;
--color-bg: #000000;
--color-raised-bg: #101013;
--color-button-bg: #222329;
--color-button-bg-hover: #2d2d32;
--color-button-bg-active: #3c3c40;
}
body {
// Defaults
background-color: var(--color-bg);
@@ -156,7 +174,6 @@ body {
font-weight: var(--font-weight-medium);
margin: 0;
padding: 0;
overflow-y: overlay;
// Rounding sizes
--size-rounded-xs: 0.5rem;
@@ -165,14 +182,15 @@ body {
--size-rounded-lg: 1.25rem;
--size-rounded-max: 999999999px;
--size-rounded-card: 0.5rem;
--size-rounded-icon: 0.5rem;
--size-rounded-card: 1rem;
--size-rounded-icon: 1rem;
--size-rounded-control: 0.25rem;
--size-rounded-tooltip: 0.25rem;
--size-navbar-height: 4rem;
--size-navbar-height: 3.5rem;
--spacing-card-lg: 1.5rem;
--spacing-card-bg: 1rem;
--spacing-card-md: 0.75rem;
--spacing-card-sm: 0.5rem;
@@ -225,10 +243,13 @@ button {
@extend .button;
}
input {
border-radius: 2rem;
}
input,
textarea {
background: var(--color-button-bg);
border-radius: var(--size-rounded-control);
color: var(--color-text);
padding: 0.5rem 1rem;
border: 2px solid transparent;

93
assets/styles/injected.scss
View File

@@ -1,93 +0,0 @@
%card {
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
}
%card-spaced-b {
@extend %card;
margin-bottom: var(--spacing-card-md);
}
%row {
display: flex;
flex-direction: row;
}
%column {
display: flex;
flex-direction: column;
}
%transparent-clickable {
border-radius: var(--size-rounded-control);
color: var(--color-text);
background-color: transparent;
&:focus,
&:hover,
&.selected,
&.nuxt-link-exact-active,
&.active-path {
color: var(--color-transparent-button-text-hover);
background-color: var(--color-transparent-button-bg-hover);
}
&:active {
color: var(--color-transparent-button-text-active);
background-color: var(--color-transparent-button-bg-active);
}
}
%label {
color: var(--color-text);
font-weight: var(--font-weight-extrabold);
letter-spacing: 0.02rem;
margin: 0 0 0.25em;
text-transform: uppercase;
}
%small-label {
@extend %label;
color: var(--color-text);
font-size: var(--font-size-xs);
letter-spacing: 0.02rem;
}
%large-label {
@extend %label;
color: var(--color-text);
font-size: var(--font-size-sm);
margin-bottom: 0.5em;
}
%stat {
margin-top: 0.5rem;
margin-right: 1rem;
@extend %row;
@media screen and (min-width: 900px) {
margin-top: 0;
}
svg {
margin: auto 0.5rem auto 0;
height: 1.5rem;
width: 1.5rem;
color: var(--color-icon);
}
.info {
margin: auto 0;
white-space: nowrap;
h4 {
@extend %small-label;
}
.value {
font-size: var(--font-size-sm);
margin: 0;
color: var(--color-text-dark);
}
.capitalize {
text-transform: capitalize;
}
.ellipsis {
text-overflow: ellipsis;
}
}
}

27
assets/styles/layout.scss
View File

@@ -19,7 +19,9 @@
}
}
.page-container {
margin: var(--spacing-card-lg);
margin: var(--spacing-card-md);
margin-top: 0;
.page-contents {
display: flex;
flex-direction: column;
@@ -34,3 +36,26 @@
}
}
}
.normal-page {
display: flex;
flex-direction: column;
margin: 0 0.75rem;
}
@media (min-width: 1024px) {
.normal-page {
flex-direction: row;
margin: 0 auto;
max-width: 80rem;
}
.normal-page__sidebar {
width: 20rem;
}
.normal-page__content {
padding-left: 1rem;
width: 60rem;
}
}