Responsive Part 2, environment changes

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 efe568bf60
commit 9be54fa13c
8 changed files with 149 additions and 8 deletions

View file

@ -21,7 +21,7 @@ class AppealMailController extends Controller
'error' => 'Invalid Request', 'error' => 'Invalid Request',
]); ]);
} else { } else {
Mail::to('ro@h-i.works')->send(new LocationAppeal($request->location, $request->sponsor)); Mail::to(env('TBS_ADMIN_EMAIL'))->send(new LocationAppeal($request->location, $request->sponsor));
//return redirect('/appeals'); //return redirect('/appeals');
return back()->with('message', "Appeal Filed"); return back()->with('message', "Appeal Filed");

View file

@ -27,7 +27,7 @@ class LocationAppeal extends Mailable
public function envelope(): Envelope public function envelope(): Envelope
{ {
return new Envelope( return new Envelope(
from: new Address('thebadspace@h-i.works', 'TBS Appeal Request'), from: new Address(env('TBS_FROM_ADDRESS'), 'TBS Appeal Request'),
subject: 'Location Appeal', subject: 'Location Appeal',
); );
} }

View file

@ -32,6 +32,18 @@ form.index-search-form > button {
right: 0; 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 { ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */ /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--highlight); color: var(--highlight);
@ -65,3 +77,32 @@ div.index-meta > label:nth-child(6) {
font: 34px var(--base-type); 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;
}
}

View file

@ -39,7 +39,7 @@ a.list-link {
display: grid; display: grid;
grid-template-columns: 70px 1fr 80px 80px; grid-template-columns: 70px 1fr 80px 80px;
gap: 10px; gap: 10px;
height: 45px; height: auto;
padding-bottom: 20px; padding-bottom: 20px;
cursor: pointer; cursor: pointer;
} }
@ -123,3 +123,33 @@ a.list-link > .item-block > .item-icon {
height: 100%; 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;
}
}

View file

@ -54,3 +54,31 @@ div.location-rating > div > span {
width: 35px; width: 35px;
position: relative; 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%;
}
}

View file

@ -205,9 +205,6 @@ footer > div:nth-child(1) {
*/ */
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
header > div:nth-child(1) {
}
header > div nav { header > div nav {
bottom: 17px; bottom: 17px;
} }
@ -224,5 +221,29 @@ footer > div:nth-child(1) {
} }
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 650px) {
header > div:nth-child(1) {
grid-template-columns: 150px 65% 1fr;
grid-template-rows: 75% 1fr;
height: auto;
gap: 15px;
}
header > div > div.header-left {
grid-row: 1/2;
position: relative;
width: 100px;
}
header > div > div.header-center {
grid-row: 2/3;
grid-column: 1/4;
position: relative;
}
}
@media only screen and (max-width: 440px) {
header > div:nth-child(1) {
grid-template-columns: 150px 40% 1fr;
}
} }

View file

@ -66,3 +66,23 @@ h3 {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
} }
@media only screen and (max-width: 800px) {
h1 {
font-size: 2em;
}
}
@media only screen and (max-width: 650px) {
h1 {
font-size: 1.5em;
letter-spacing: -3px;
width: 100%;
position: relative;
}
}
@media only screen and (max-width: 480px) {
font-size: 1.5em;
letter-spacing: -3px;
}

View file

@ -6,7 +6,8 @@
<form class="index-search-form" action="/search" method="post" enctype="multipart/form-data"> <form class="index-search-form" action="/search" method="post" enctype="multipart/form-data">
<input type="text" name="index_search" value="" placeholder="Hi! This is where you search." /> <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
<button aria-label="search-button"> <button aria-label="search-button">
<img class="button-icon" src="assets/images/global/icon-search.svg" /> <label id="search-label">LOOK FOR IT</label>
<img id="search-icon" class="button-icon" src="assets/images/global/icon-search.svg" />
</button> </button>
@csrf @csrf
</form> </form>