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

Project, Search, User redesign (#1281)

Browse Source 
* 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
2024-08-20 23:03:16 -07:00
committed by GitHub
parent a19ce0458a
commit 2d416d491c
101 changed files with 5361 additions and 4488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
apps/frontend/src/assets/styles/components.scss
View File

@@ -367,35 +367,6 @@
Other
*/
// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
// which allows to have just one wrapper div
.iconified-input {
align-items: center;
display: inline-flex;
position: relative;
input {
padding-left: 2.25rem;
width: 100%;
}
&:focus-within svg {
color: var(--color-button-text-active);
opacity: 1;
}
svg {
position: absolute;
left: 0.75rem;
height: 1.25rem;
width: 1.25rem;
z-index: 1;
color: var(--color-button-text);
opacity: 0.6;
}
}
.text-link {
color: var(--color-link);
@@ -691,122 +662,6 @@ tr.button-transparent {
}
}
.multiselect {
&.raised-multiselect {
.multiselect__tags,
.multiselect__content-wrapper,
.multiselect__spinner {
background-color: var(--color-raised-bg);
box-shadow: none;
}
}
color: var(--color-text) !important;
outline: none !important;
input {
background: transparent;
box-shadow: none;
}
input::placeholder {
color: var(--color-text);
}
.multiselect__tags {
border-radius: var(--size-rounded-sm);
background: var(--color-dropdown-bg);
box-shadow: var(--shadow-inset-sm);
border: none;
cursor: pointer;
padding-left: 7px;
padding-top: 10px;
outline: 2px solid transparent;
transition: background-color 0.1s ease-in-out;
&:active {
background: var(--color-button-bg-hover);
.multiselect__spinner {
background: var(--color-button-bg-hover);
}
}
.multiselect__single {
background: transparent;
}
.multiselect__tag {
border-radius: var(--size-rounded-sm);
color: var(--color-text-dark);
background: transparent;
border: 2px solid var(--color-brand);
}
.multiselect__tag-icon {
background: transparent;
&:after {
color: var(--color-text-dark);
}
}
.multiselect__placeholder {
color: var(--color-button-text);
margin-left: 8px;
margin-bottom: 8px;
opacity: 0.6;
font-size: 16px;
line-height: 16px;
}
}
.multiselect__content-wrapper {
background: var(--color-dropdown-bg);
border: none;
overflow-x: hidden;
border-bottom-left-radius: var(--size-rounded-sm);
border-bottom-right-radius: var(--size-rounded-sm);
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
outline: 2px solid transparent;
.multiselect__element {
.multiselect__option {
outline: 1px solid transparent;
}
.multiselect__option--highlight {
background: var(--color-button-bg-active);
color: var(--color-text-dark);
}
.multiselect__option--selected {
background: var(--color-brand);
font-weight: bold;
color: var(--color-brand-inverted);
}
}
}
.multiselect__spinner {
background: var(--color-dropdown-bg);
&:active {
background: var(--color-button-bg-hover);
}
}
&.multiselect--disabled {
background: none;
.multiselect__current,
.multiselect__select {
background: none;
}
}
}
.switch {
-webkit-appearance: none;
-moz-appearance: none;
@@ -916,9 +771,9 @@ tr.button-transparent {
}
.card-divider {
background-color: var(--color-divider);
background-color: var(--color-button-bg);
border: none;
color: var(--color-divider);
color: var(--color-button-bg);
height: 1px;
margin: var(--spacing-card-bg) 0;
}
@@ -1298,7 +1153,7 @@ svg.inline-svg {
.tag-list__item {
background-color: var(--color-button-bg);
padding: var(--gap-2) var(--gap-6);
padding: var(--gap-4) var(--gap-8);
border-radius: var(--radius-max);
font-weight: var(--weight-bold);
font-size: var(--text-14);
@@ -1415,6 +1270,10 @@ svg.inline-svg {
width: var(--icon-16);
height: var(--icon-16);
}
> svg:first-child {
flex-shrink: 0;
}
}
.links-list {
@@ -1442,23 +1301,4 @@ svg.inline-svg {
font-size: var(--text-14);
}
}
.icon {
--_size: 1rem;
width: var(--_size, var(--icon-16)) !important;
height: var(--_size, var(--icon-16)) !important;
border: 1px solid var(--color-button-border);
&[data-size="32"] {
--_size: var(--icon-32);
}
&[data-shape="circle"] {
border-radius: var(--radius-max) !important;
}
&[data-shape="square"] {
border-radius: calc(2.25 * (var(--_size) / 16)) !important;
}
}
}