projects/thebadspace
projects/thebadspace
1
0
Fork 2
Code Issues 11 Pull requests 1 Projects 1 Releases 3 Packages Wiki Activity

Responsive Edits: Part 1

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Controllers/FrontIndexController.php
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);
}
}

41
public/assets/css/front/listing.css
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%;
}
}