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:
parent
efe568bf60
commit
9be54fa13c
8 changed files with 149 additions and 8 deletions
|
@ -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");
|
||||||
|
|
|
@ -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',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue