From e35dff591f263e15635265268a6984a320546c01 Mon Sep 17 00:00:00 2001 From: Ro Date: Thu, 17 Aug 2023 15:14:01 -0700 Subject: [PATCH] Started CSS and Layout upgrades Functionality is coming along at a good pace, so it was time to start adjusting the templates and styles to the new layout. Responsive will come after all of the pages have been updated. --- .prettierrc | 2 +- app/Http/Controllers/AuthController.php | 2 +- app/Http/Controllers/FrontIndexController.php | 5 +- app/Models/Location.php | 1 - public/assets/css/front/index.css | 83 ++++++++----------- public/assets/css/global/frame.css | 65 +++++++++++---- public/assets/images/global/icon-search.svg | 8 ++ public/assets/images/global/logo-dark.svg | 5 ++ public/assets/images/global/logo-light.svg | 5 ++ resources/views/back/login.blade.php | 24 +++--- resources/views/frame.blade.php | 42 +++++----- resources/views/front/index.blade.php | 37 +++------ 12 files changed, 156 insertions(+), 123 deletions(-) create mode 100644 public/assets/images/global/icon-search.svg create mode 100644 public/assets/images/global/logo-dark.svg create mode 100644 public/assets/images/global/logo-light.svg diff --git a/.prettierrc b/.prettierrc index 66e2302..5caa4b9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -9,7 +9,7 @@ "options": { "tabWidth": 2, "semi": false, - "singleQuote": true, + "singleQuote": false, "printWidth": 90 } }, diff --git a/app/Http/Controllers/AuthController.php b/app/Http/Controllers/AuthController.php index 3c012b6..d8c7ea5 100644 --- a/app/Http/Controllers/AuthController.php +++ b/app/Http/Controllers/AuthController.php @@ -13,7 +13,7 @@ class AuthController extends Controller //$token = $request->session()->token(); //$token = csrf_token(); - return view('back.login'); + return view('back.login', ["title" => "The Den Login"]); } public function memberAuth(Request $request): Response diff --git a/app/Http/Controllers/FrontIndexController.php b/app/Http/Controllers/FrontIndexController.php index 8f6c7d1..3ed63f4 100644 --- a/app/Http/Controllers/FrontIndexController.php +++ b/app/Http/Controllers/FrontIndexController.php @@ -16,6 +16,9 @@ class FrontIndexController extends Controller //$result = DB::select("SELECT * FROM searchlocations('$terms')"); - return view('front.index', ['count' => $count]); + return view('front.index', [ + 'count' => $count, + 'title' => "The Bad Space" + ]); } } diff --git a/app/Models/Location.php b/app/Models/Location.php index 3b10a77..5efbe54 100644 --- a/app/Models/Location.php +++ b/app/Models/Location.php @@ -19,7 +19,6 @@ class Location extends Model protected $primaryKey = 'id'; public $incrementing = true; protected $fillable = [ - "id", "uuid", "name", "url", "description", "images", "active", "rating", "added_by", "tags", "created_at", "updated_at"]; diff --git a/public/assets/css/front/index.css b/public/assets/css/front/index.css index 44edf29..9523734 100644 --- a/public/assets/css/front/index.css +++ b/public/assets/css/front/index.css @@ -1,58 +1,43 @@ -section[role="start"] { - background-image: url("../../images/global/special-trash.jpg"); - height: 100%; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - align-items: center; - justify-content: center; -} - -section[role="start"] div[role="index-wrapper"] { - margin: 0 auto; +section.index-search { width: 100%; + background: var(--white); } -section[role="start"] div[role="index-search"] { - width: 100%; - border-bottom: 1px solid var(--secondary); -} - -section[role="start"] div[role="index-results"] { - width: 100%; - padding: 10px; - background: rgb(var(--primary-rgb) / 60%); - border-bottom: 1px solid var(--white); -} - -section[role="start"] div input[type="text"] { - background: none; - font-weight: bold; - font-size: 3.5em; - width: 91%; - color: var(--white); - text-shadow: 1px 1px 1px var(--primary); - outline: none; -} - -section[role="start"] div button { - vertical-align: text-bottom; - width: 57px; - height: 57px; -} - -section[role="start"] div button i { - font-size: 1.5em; -} - -section[role="start"] h1 { - color: var(--white); -} - -section[role="start"] a.search-link { +section.start a.search-link { color: var(--highlight); font-size: 2.5em; font-weight: bold; border: 0; display: block; } + +form.index-search-form { + width: 80%; + max-width: 1000px; + margin: 0 auto; + padding: 30px 0; +} + +input[type="text"]:focus { + outline: solid var(--highlight); + background-color: var(--highlight); +} + +form.index-search-form > input[type="text"] { + width: 91%; + height: 50px; + font: 44px var(--base-type); + transition: all 0.2s linear; +} + +form.index-search-form > button { + height: 60px; + width: 60px; + position: relative; + top: 9px; +} + +::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: var(--highlight); +} diff --git a/public/assets/css/global/frame.css b/public/assets/css/global/frame.css index 173b313..5513e0c 100644 --- a/public/assets/css/global/frame.css +++ b/public/assets/css/global/frame.css @@ -16,31 +16,62 @@ html body { overflow-x: hidden; } +a { + color: var(--highlight); + text-decoration: none; + + /* + border-bottom: 1px solid var(--white); + transition: all 0.2s linear; + */ +} + header { width: 100%; color: var(--primary); background: var(--secondary); } -header > nav { +header > div:nth-child(1) { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 200px 50% 1fr; padding: 10px; + gap: 10px; + height: 200px; + width: 80%; + margin: 0 auto; + max-width: 1000px; + position: relative; } -header > nav a { +header > div span { + font-size: 3em; + font-weight: bold; + position: absolute; + bottom: 25px; + width: 50%; + line-height: 0.8em; +} + +header > div img { + width: 100%; +} + +header > div a { color: var(--primary); } -header > nav i { +header > div i { font-size: 1.3em; } -header > nav > div[role="nav-right"] { - text-align: right; +header > div nav { + position: absolute; + bottom: 20px; + right: 0; } -div[role="system-notice"] { +div.system-notice { background: var(--highlight); color: var(--primary); padding: 10px; @@ -50,16 +81,15 @@ main { height: 100%; } -/* GLOBALS */ - -a { - color: var(--highlight); - text-decoration: none; - border-bottom: 1px solid var(--white); - transition: all 0.2s linear; +main > section > article { + width: 80%; + max-width: 1000px; + margin: 0 auto; } -a[role="nav-links"] { +/* GLOBALS */ + +a.nav-links { padding: 7px; border-bottom: none; } @@ -87,3 +117,8 @@ sup { vertical-align: baseline; font-family: var(--mono-type); } + +.button-icon { + height: 90%; + padding-top: 3px; +} diff --git a/public/assets/images/global/icon-search.svg b/public/assets/images/global/icon-search.svg new file mode 100644 index 0000000..47a3125 --- /dev/null +++ b/public/assets/images/global/icon-search.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/images/global/logo-dark.svg b/public/assets/images/global/logo-dark.svg new file mode 100644 index 0000000..157f499 --- /dev/null +++ b/public/assets/images/global/logo-dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/global/logo-light.svg b/public/assets/images/global/logo-light.svg new file mode 100644 index 0000000..d41c38a --- /dev/null +++ b/public/assets/images/global/logo-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/resources/views/back/login.blade.php b/resources/views/back/login.blade.php index b1ba1cf..4841ea7 100644 --- a/resources/views/back/login.blade.php +++ b/resources/views/back/login.blade.php @@ -7,15 +7,17 @@ @if($errors->any())

{{$errors->first()}}

@endif -
-
- @csrf -
- -
-
- - -
-
+
+
+
+ @csrf +
+ +
+
+
+ +
+
+
@endsection \ No newline at end of file diff --git a/resources/views/frame.blade.php b/resources/views/frame.blade.php index 9605183..307a845 100644 --- a/resources/views/frame.blade.php +++ b/resources/views/frame.blade.php @@ -11,33 +11,37 @@
- +
+ {{$title}} +
+
+ +
+
@if($errors->any()) -
+
{{$errors->first()}}
@endif @if(session('message')) -
+
{!! session('message') !!}
@endif diff --git a/resources/views/front/index.blade.php b/resources/views/front/index.blade.php index 160c833..3e70fa5 100644 --- a/resources/views/front/index.blade.php +++ b/resources/views/front/index.blade.php @@ -1,31 +1,18 @@ @extends('frame') - @section('title', 'This is The Bad Space') - @section('main-content') @parent - -
-
-
-
- - -
-
- - -
- - {{$count}} - Bad Spaces tracked. Shot by - Ussama Azam -
- -
- - +
+
+ + +
+
+
+
+ tracking {{$count}} sites; +
@endsection \ No newline at end of file