mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-06-25 16:04:37 -05:00
Code Packages Releases Activity

Responsive Part 2, environment changes

Browse Source 
Hit the major friction points in the responsive UI. Still have some
polishing to do but there shouldn't be any show stoppers at this points.

Also moved some variable to the env so they can be changed easily when
necessary
This commit is contained in:
ro
2024-02-08 13:07:49 -06:00
parent cbf2dcb450
commit 09442e6d4a
8 changed files with 149 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
public/assets/css/front/index.css
View File

@ -32,6 +32,18 @@ form.index-search-form > button {
right: 0;
}
form.index-search-form > button > img#search-icon {
float: none;
}
form.index-search-form > button > label {
font-weight: 500;
top: 15px;
position: relative;
font-size: 1.5em;
display: none;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--highlight);
@ -65,3 +77,32 @@ div.index-meta > label:nth-child(6) {
font: 34px var(--base-type);
}
}
@media only screen and (max-width: 650px) {
form.index-search-form > input[type="text"] {
width: 80%;
height: 50px;
font: 34px var(--base-type);
}
}
@media only screen and (max-width: 480px) {
form.index-search-form > input[type="text"] {
width: 99%;
height: 50px;
font: 27px var(--base-type);
}
form.index-search-form > button {
width: 99%;
top: 15px;
}
form.index-search-form > button > label {
display: inline;
}
form.index-search-form > button > img#search-icon {
float: right;
}
}

32
public/assets/css/front/listing.css
View File

@ -39,7 +39,7 @@ a.list-link {
display: grid;
grid-template-columns: 70px 1fr 80px 80px;
gap: 10px;
height: 45px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
@ -123,3 +123,33 @@ a.list-link > .item-block > .item-icon {
height: 100%;
}
}
@media only screen and (max-width: 480px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 100% auto 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/2;
height: 100%;
}
a.list-link > .item-silence {
grid-row: 3/4;
grid-column: 2/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
grid-column: 4/6;
}
}

28
public/assets/css/front/location.css
View File

@ -54,3 +54,31 @@ div.location-rating > div > span {
width: 35px;
position: relative;
}
@media only screen and (max-width: 800px) {
div.location-rating {
font-size: 0.65em;
}
div.location-rating > div > span {
width: 75%;
}
}
@media only screen and (max-width: 670px) {
div.location-rating {
grid-template-columns: 1fr 1fr;
font-size: 0.7em;
}
}
@media only screen and (max-width: 480px) {
div.location-rating {
grid-template-columns: 1fr;
font-size: 0.8em;
}
div.location-rating > div > span {
width: 85%;
}
}