forked from projects/thebadspace
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
fe49ca8699
commit
efe568bf60
2 changed files with 42 additions and 1 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue