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; display: inline-flex;
position: relative; 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 { input {
padding-left: 2rem; padding-left: 2rem;
width: 100%; width: 100%;
@ -42,7 +65,7 @@
color: var(--color-button-text-hover); color: var(--color-button-text-hover);
} }
&:active, { &:active {
background-color: var(--color-button-bg-active); background-color: var(--color-button-bg-active);
color: var(--color-button-text-active); color: var(--color-button-text-active);
} }
@ -85,13 +108,26 @@
.text-link { .text-link {
color: var(--color-link); color: var(--color-link);
text-decoration: underline; text-decoration: underline;
&:focus-visible,
&:hover {
color: var(--color-link-hover);
}
&:active {
color: var(--color-link-active);
}
} }
.title-link { .title-link {
&:hover {
color: var(--color-link);
}
text-decoration: underline; text-decoration: underline;
&:focus-visible,
&:hover {
color: var(--color-heading);
}
&:active {
color: var(--color-text-dark);
}
} }
.markdown-body { .markdown-body {
@ -331,9 +367,11 @@
} }
&:disabled, &:disabled,
&[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; pointer-events: none;
cursor: not-allowed; cursor: default;
} }
} }
@ -443,6 +481,12 @@
line-height: 20px; 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 { .multiselect__content-wrapper {
background: var(--color-dropdown-bg); background: var(--color-dropdown-bg);
border: none; border: none;
@ -661,6 +705,7 @@ label {
height: 4px; height: 4px;
bottom: 0; bottom: 0;
left: 20%; left: 20%;
border-radius: var(--size-rounded-max);
} }
&:hover, &:hover,

20
assets/styles/global.scss
View File

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

13
components/ui/Pagination.vue
View File

@ -99,13 +99,20 @@ button {
} }
&.paginate.disabled { &.paginate.disabled {
background-color: var(--color-button-bg); background-color: transparent;
cursor: default; 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 { &: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); 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> <nuxt-link :to="`/${type}/${id}`">{{ name }}</nuxt-link>
</h2> </h2>
<p v-if="author" class="author"> <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> </p>
</div> </div>
<div class="side-type"> <div class="side-type">
@ -253,10 +256,6 @@ export default {
.author { .author {
margin: auto 0 0 0; margin: auto 0 0 0;
color: var(--color-text); color: var(--color-text);
a {
text-decoration: underline;
}
} }
} }

10
pages/_type/_id.vue
View File

@ -929,11 +929,19 @@ export default {
line-height: 2rem; line-height: 2rem;
} }
&:focus-visible,
&:hover { &:hover {
svg, svg,
img, img,
span { 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; flex: 1;
} }
} }
button {
margin: 0.5rem 0;
}
} }
.footer { .footer {

2
pages/index.vue
View File

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

156
pages/search.vue
View File

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

4
pages/settings/index.vue
View File

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