Responsive Edits: Part 1

Responsive styles are non-existent so it was time to get that sorted.
This first pass was just getting a feel for what can be done with
list items since that's one of the main components of the site.

Second pass will clean this up as well as the majority of text styling
so it all smoothly adapts.

Ha, or that's the plan anyway.
This commit is contained in:
ro 2024-02-06 15:39:19 -06:00
parent fe49ca8699
commit efe568bf60
2 changed files with 42 additions and 1 deletions

View file

@ -46,7 +46,7 @@ class FrontIndexController extends Controller
$raw = DB::select("SELECT * FROM searchlocations(?)", [$terms]);
$results = [];
foreach ($raw as $item) {
if (($item->block_count + $item->silence_count) > 2) {
if (($item->block_count + $item->silence_count) >= 2) {
array_push($results, $item);
}
}

View file

@ -50,6 +50,7 @@ a.list-link > .item-rating {
color: var(--white);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-name {
@ -59,6 +60,7 @@ a.list-link > .item-name {
font-weight: 400;
padding: 9px 5px;
cursor: pointer;
position: relative;
}
a.list-link > .item-silence {
@ -67,6 +69,7 @@ a.list-link > .item-silence {
color: var(--black);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-block {
@ -75,6 +78,7 @@ a.list-link > .item-block {
color: var(--black);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-silence > .item-icon,
@ -82,3 +86,40 @@ a.list-link > .item-block > .item-icon {
width: 30px;
vertical-align: top;
}
/*
responsive
*/
@media only screen and (max-width: 800px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 100% 100px 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/4;
height: 100%;
}
a.list-link > .item-name {
grid-row: 2/3;
grid-column: 1/6;
}
a.list-link > .item-silence {
grid-row: 3/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
}
}