Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Continue the cleanup train (#396)

Browse Source 
* Improve links and search page controls... I know it looks kinda insane

* Fix donation padding Fixes #393

* Improve text field styling

* white icon

* Improve pagination and disabled button colors

* Round tab indicator

* Fix rounding of home page points card

* I hate browsers

* Change verbiage of legacy options
This commit is contained in:
Prospector 2022-03-06 19:34:40 -08:00 committed by GitHub
parent a50e109043
commit b82efb6e3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 196 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
assets/styles/components.scss
View File

@ -5,6 +5,29 @@
display: inline-flex;
position: relative;
&:hover:not([disabled]):not(:focus-within) {
input:not(:focus) {
background-color: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
border-color: var(--color-divider-dark);
}
svg {
color: var(--color-button-text-hover);
}
}
&:focus-within {
input {
outline: none !important;
border-color: var(--color-brand);
}
svg {
color: var(--color-button-text-active) !important;
}
}
input {
padding-left: 2rem;
width: 100%;
@ -42,7 +65,7 @@
color: var(--color-button-text-hover);
}
&:active, {
&:active {
background-color: var(--color-button-bg-active);
color: var(--color-button-text-active);
}
@ -85,13 +108,26 @@
.text-link {
color: var(--color-link);
text-decoration: underline;
&:focus-visible,
&:hover {
color: var(--color-link-hover);
}
&:active {
color: var(--color-link-active);
}
}
.title-link {
&:hover {
color: var(--color-link);
}
text-decoration: underline;
&:focus-visible,
&:hover {
color: var(--color-heading);
}
&:active {
color: var(--color-text-dark);
}
}
.markdown-body {
@ -331,9 +367,11 @@
}
&:disabled,
&[disabled] {
opacity: 0.6;
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--color-button-bg-disabled);
color: var(--color-button-text-disabled);
pointer-events: none;
cursor: not-allowed;
cursor: default;
}
}
@ -443,6 +481,12 @@
line-height: 20px;
}
}
.multiselect--above {
.multiselect__content-wrapper {
border-top-left-radius: var(--size-rounded-card);
border-top-right-radius: var(--size-rounded-card);
}
}
.multiselect__content-wrapper {
background: var(--color-dropdown-bg);
border: none;
@ -661,6 +705,7 @@ label {
height: 4px;
bottom: 0;
left: 20%;
border-radius: var(--size-rounded-max);
}
&:hover,

20
assets/styles/global.scss
View File

@ -30,7 +30,7 @@ html {
--color-button-text-hover: #1b1e24;
--color-button-bg-active: #c3c6cb;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #eceef0;
--color-button-bg-disabled: #cacdd2;
--color-button-text-disabled: #9da3ac;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
@ -55,7 +55,12 @@ html {
--shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-grey-link: var(--color-text);
--color-grey-link-hover: var(--color-heading);
--color-grey-link-active: var(--color-text-dark);
--color-link: #2089ff;
--color-link-hover: #1a76e7;
--color-link-active: #146fd7;
--color-badge-gray-text: #646161;
--color-badge-gray-bg: #c8c1c1;
@ -106,7 +111,8 @@ html {
--color-button-text-hover: #ffffff;
--color-button-bg-active: #616570;
--color-button-text-active: var(--color-button-text-hover);
--color-button-text-disabled: #797979;
--color-button-bg-disabled: #3a434d;
--color-button-text-disabled: #555d65;
--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);
@ -131,6 +137,8 @@ html {
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-link: #74b6f3;
--color-link-hover: #92c0f5;
--color-link-active: #b5d5fd;
--color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1;
@ -253,12 +261,14 @@ textarea {
&:hover:not([disabled]):not(:focus) {
background: var(--color-button-bg-hover);
color: var(--color-text);
color: var(--color-button-text-hover);
border-color: var(--color-divider-dark);
}
&:focus {
background: var(--color-raised-bg);
border-color: var(--color-divider-dark);
outline: none !important;
border-color: var(--color-brand);
color: var(--color-button-text-active);
}
&:disabled,

13
components/ui/Pagination.vue
View File

@ -99,13 +99,20 @@ button {
}
&.paginate.disabled {
background-color: var(--color-button-bg);
background-color: transparent;
cursor: default;
color: var(--color-icon);
color: var(--color-button-text-disabled);
box-shadow: inset 0 0 0 1px var(--color-button-bg-disabled);
}
&:focus-visible,
&:hover {
background: var(--color-button-bg-active);
background-color: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
}
&:active {
background-color: var(--color-button-bg-active);
color: var(--color-button-text-active);
}
}

9
components/ui/ProjectCard.vue
View File

@ -18,7 +18,10 @@
<nuxt-link :to="`/${type}/${id}`">{{ name }}</nuxt-link>
</h2>
<p v-if="author" class="author">
by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
by
<nuxt-link class="title-link" :to="'/user/' + author">{{
author
}}</nuxt-link>
</p>
</div>
<div class="side-type">
@ -253,10 +256,6 @@ export default {
.author {
margin: auto 0 0 0;
color: var(--color-text);
a {
text-decoration: underline;
}
}
}

10
pages/_type/_id.vue
View File

@ -929,11 +929,19 @@ export default {
line-height: 2rem;
}
&:focus-visible,
&:hover {
svg,
img,
span {
color: var(--color-link);
color: var(--color-heading);
}
}
&:active {
svg,
img,
span {
color: var(--color-text-dark);
}
}

4
pages/create/project.vue
View File

@ -1526,10 +1526,6 @@ section.donations {
flex: 1;
}
}
button {
margin: 0.5rem 0;
}
}
.footer {

2
pages/index.vue
View File

@ -436,7 +436,7 @@ export default {
@media screen and (min-width: 1200px) {
.points {
border-radius: var(--spacing-card-lg);
border-radius: var(--size-rounded-card);
.point {
flex-direction: row;

156
pages/search.vue
View File

@ -154,39 +154,41 @@
@input="onSearchChange(1)"
/>
</div>
<div class="labeled-control">
<span class="labeled-control__label">Sort by</span>
<Multiselect
v-model="sortType"
placeholder="Select one"
class="search-controls__sorting labeled-control__control"
track-by="display"
label="display"
:options="sortTypes"
:searchable="false"
:close-on-select="true"
:show-labels="false"
:allow-empty="false"
@input="onSearchChange(1)"
>
<template slot="singleLabel" slot-scope="{ option }">{{
option.display
}}</template>
</Multiselect>
</div>
<div class="labeled-control">
<span class="labeled-control__label">Show per page</span>
<Multiselect
v-model="maxResults"
placeholder="Select one"
class="labeled-control__control"
:options="[5, 10, 15, 20, 50, 100]"
:searchable="false"
:close-on-select="true"
:show-labels="false"
:allow-empty="false"
@input="onSearchChange(currentPage)"
/>
<div class="sort-controls">
<div class="labeled-control">
<span class="labeled-control__label">Sort by</span>
<Multiselect
v-model="sortType"
placeholder="Select one"
class="search-controls__sorting labeled-control__control"
track-by="display"
label="display"
:options="sortTypes"
:searchable="false"
:close-on-select="true"
:show-labels="false"
:allow-empty="false"
@input="onSearchChange(1)"
>
<template slot="singleLabel" slot-scope="{ option }">{{
option.display
}}</template>
</Multiselect>
</div>
<div class="labeled-control">
<span class="labeled-control__label">Show per page</span>
<Multiselect
v-model="maxResults"
placeholder="Select one"
class="labeled-control__control"
:options="[5, 10, 15, 20, 50, 100]"
:searchable="false"
:close-on-select="true"
:show-labels="false"
:allow-empty="false"
@input="onSearchChange(currentPage)"
/>
</div>
</div>
</div>
<pagination
@ -584,32 +586,88 @@ export default {
.search-controls {
display: flex;
flex-direction: column;
flex-direction: row;
gap: var(--spacing-card-md);
.sort-controls {
width: 100%;
display: flex;
flex-direction: row;
gap: var(--spacing-card-md);
flex-wrap: wrap;
.labeled-control {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
.labeled-control__label {
white-space: nowrap;
}
}
}
.iconified-input {
margin-left: 6px;
flex: 1;
input {
width: calc(100% + 8px);
min-width: 15rem;
width: 100%;
}
}
}
.search-controls__sorting {
min-width: 15rem;
min-width: 14rem;
}
.labeled-control__label,
.labeled-control__control {
display: block;
margin: 0.5rem 0;
}
.no-results {
text-align: center;
}
@media (min-width: 1024px) {
@media screen and (min-width: 700px) {
.search-controls {
flex-wrap: nowrap;
flex-direction: row;
}
.sort-controls {
min-width: fit-content;
max-width: fit-content;
flex-wrap: nowrap;
}
.labeled-control {
align-items: center;
display: flex;
flex-direction: column !important;
flex-wrap: wrap;
gap: 0.5rem;
max-width: fit-content;
}
.labeled-control__label {
flex-shrink: 0;
margin-bottom: 0 !important;
}
}
@media screen and (min-width: 860px) {
.labeled-control {
flex-wrap: nowrap !important;
flex-direction: row !important;
}
}
@media screen and (min-width: 1024px) {
.sidebar-menu {
display: block;
margin-top: 0;
@ -619,22 +677,16 @@ export default {
display: none;
}
.search-controls {
flex-direction: row;
}
.labeled-control {
align-items: center;
display: flex;
flex-wrap: wrap !important;
flex-direction: column !important;
}
}
.labeled-control__label,
.labeled-control__control {
margin: 0 0 0 1rem;
}
.labeled-control__label {
flex-shrink: 0;
@media screen and (min-width: 1100px) {
.labeled-control {
flex-wrap: nowrap !important;
flex-direction: row !important;
}
}
</style>

4
pages/settings/index.vue
View File

@ -107,7 +107,7 @@
:allow-empty="false"
/>
</label>
<h3>Legacy search layout</h3>
<h3>Search sidebar on right side</h3>
<label>
<span>
Sets the sidebar direction for search pages. Enabling this will put
@ -120,7 +120,7 @@
@change="changeLayout"
/>
</label>
<h3>Legacy project layout</h3>
<h3>Project sidebar on right side</h3>
<label>
<span>
Sets the sidebar direction for project pages. Enabling this will