From 9be54fa13cc2696c842dd327725568ea59f255b0 Mon Sep 17 00:00:00 2001 From: ro Date: Thu, 8 Feb 2024 13:07:49 -0600 Subject: [PATCH] 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 --- app/Http/Controllers/AppealMailController.php | 2 +- app/Mail/LocationAppeal.php | 2 +- public/assets/css/front/index.css | 41 +++++++++++++++++++ public/assets/css/front/listing.css | 32 ++++++++++++++- public/assets/css/front/location.css | 28 +++++++++++++ public/assets/css/global/frame.css | 29 +++++++++++-- public/assets/css/global/typography.css | 20 +++++++++ resources/views/front/index.blade.php | 3 +- 8 files changed, 149 insertions(+), 8 deletions(-) diff --git a/app/Http/Controllers/AppealMailController.php b/app/Http/Controllers/AppealMailController.php index 504e0d6..476c830 100644 --- a/app/Http/Controllers/AppealMailController.php +++ b/app/Http/Controllers/AppealMailController.php @@ -21,7 +21,7 @@ class AppealMailController extends Controller 'error' => 'Invalid Request', ]); } 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 back()->with('message', "Appeal Filed"); diff --git a/app/Mail/LocationAppeal.php b/app/Mail/LocationAppeal.php index d61f2fb..d8345ef 100644 --- a/app/Mail/LocationAppeal.php +++ b/app/Mail/LocationAppeal.php @@ -27,7 +27,7 @@ class LocationAppeal extends Mailable public function envelope(): 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', ); } diff --git a/public/assets/css/front/index.css b/public/assets/css/front/index.css index 356716b..b7389b9 100644 --- a/public/assets/css/front/index.css +++ b/public/assets/css/front/index.css @@ -32,6 +32,18 @@ form.index-search-form > button { 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 { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--highlight); @@ -65,3 +77,32 @@ div.index-meta > label:nth-child(6) { 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; + } +} diff --git a/public/assets/css/front/listing.css b/public/assets/css/front/listing.css index ad61fa9..3fdcf2f 100644 --- a/public/assets/css/front/listing.css +++ b/public/assets/css/front/listing.css @@ -39,7 +39,7 @@ a.list-link { display: grid; grid-template-columns: 70px 1fr 80px 80px; gap: 10px; - height: 45px; + height: auto; padding-bottom: 20px; cursor: pointer; } @@ -123,3 +123,33 @@ a.list-link > .item-block > .item-icon { 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; + } +} diff --git a/public/assets/css/front/location.css b/public/assets/css/front/location.css index f0689e0..320ba4a 100644 --- a/public/assets/css/front/location.css +++ b/public/assets/css/front/location.css @@ -54,3 +54,31 @@ div.location-rating > div > span { width: 35px; 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%; + } +} diff --git a/public/assets/css/global/frame.css b/public/assets/css/global/frame.css index 3d52e62..5c1edec 100644 --- a/public/assets/css/global/frame.css +++ b/public/assets/css/global/frame.css @@ -205,9 +205,6 @@ footer > div:nth-child(1) { */ @media only screen and (max-width: 960px) { - header > div:nth-child(1) { - } - header > div nav { 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; + } } diff --git a/public/assets/css/global/typography.css b/public/assets/css/global/typography.css index e18cfa6..c2bfe01 100644 --- a/public/assets/css/global/typography.css +++ b/public/assets/css/global/typography.css @@ -66,3 +66,23 @@ h3 { font-size: 1em; 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; +} diff --git a/resources/views/front/index.blade.php b/resources/views/front/index.blade.php index 6d76f0d..3fd0f76 100644 --- a/resources/views/front/index.blade.php +++ b/resources/views/front/index.blade.php @@ -6,7 +6,8 @@
@csrf