mirror of
https://koodu.h-i.works/projects/thebadspace
synced 2025-05-06 14:41:02 -05:00
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:
parent
5c9b982b1f
commit
cbf2dcb450
@ -46,7 +46,7 @@ class FrontIndexController extends Controller
|
|||||||
$raw = DB::select("SELECT * FROM searchlocations(?)", [$terms]);
|
$raw = DB::select("SELECT * FROM searchlocations(?)", [$terms]);
|
||||||
$results = [];
|
$results = [];
|
||||||
foreach ($raw as $item) {
|
foreach ($raw as $item) {
|
||||||
if (($item->block_count + $item->silence_count) > 2) {
|
if (($item->block_count + $item->silence_count) >= 2) {
|
||||||
array_push($results, $item);
|
array_push($results, $item);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -50,6 +50,7 @@ a.list-link > .item-rating {
|
|||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.list-link > .item-name {
|
a.list-link > .item-name {
|
||||||
@ -59,6 +60,7 @@ a.list-link > .item-name {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 9px 5px;
|
padding: 9px 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.list-link > .item-silence {
|
a.list-link > .item-silence {
|
||||||
@ -67,6 +69,7 @@ a.list-link > .item-silence {
|
|||||||
color: var(--black);
|
color: var(--black);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.list-link > .item-block {
|
a.list-link > .item-block {
|
||||||
@ -75,6 +78,7 @@ a.list-link > .item-block {
|
|||||||
color: var(--black);
|
color: var(--black);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.list-link > .item-silence > .item-icon,
|
a.list-link > .item-silence > .item-icon,
|
||||||
@ -82,3 +86,40 @@ a.list-link > .item-block > .item-icon {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
vertical-align: top;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user