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

Tweak styles for narrower screens, add indicator for no results

Browse Source 
Makes the styles of search results work better with narrower
screens.  The category badges on each result collapse to just an
icon (with title text) when the screen is too narrow.

Adds a text label for the Forge/Fabric icons.

Adds a message for when a query returns no results.
This commit is contained in:
Aeledfyr
2020-06-25 16:46:56 -05:00
parent 23503dc439
commit ebc073a52e
3 changed files with 118 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
static/css/search.css
View File

@@ -156,6 +156,7 @@
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.mod-info img {
@@ -163,9 +164,22 @@
padding: 0;
}
.mod-info p {
.mod-info span {
font-size: 12px;
padding: 0 15px 0 5px !important;
padding-right: 15px;
white-space: nowrap;
}
.mod-info > span > img {
padding-right: 5px;
vertical-align: top;
}
.loader-icons > * {
vertical-align: top;
white-space: nowrap;
display: inline-block;
}
.loader-icons img {
padding-right: 5px;
}
.results {
@@ -173,9 +187,12 @@
margin: 0 auto;
}
.search-error {
text-align: center;
}
.result {
display: flex;
height: 100px;
min-height: 100px;
margin: 15px auto;
padding: 5px;
width: 100%;
@@ -194,17 +211,30 @@
flex-direction: column;
}
.result-info * {
.result-info > * {
padding: 0 5px 0 0;
margin: 0;
}
.result-title {
display: flex;
flex-direction: row;
align-items: baseline;
text-decoration: none;
}
.result-title * {
display: inline;
padding-right: 5px;
}
.result-author-container {
white-space: nowrap;
}
@media screen and (max-width: 1340px) {
.result-badge.result-badge {
width: initial;
}
.result-badge > p {
display: none;
}
}
.result-name {
text-decoration: none;
@@ -326,14 +356,14 @@
.forge {
height: 12px;
padding-top: 5px !important;
fill: var(--forge-color);
}
.back-to-top {
position: fixed;
top: 80%;
left: 19%;
/* left column = 25%, width ~= 90px, left column padding = 20px */
left: calc(25% - 90px - 20px);
background-color: var(--highlight);
text-align: center;
padding: 20px;