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.
This commit is contained in:
Ro 2023-08-17 15:14:01 -07:00
parent 62a11168ec
commit e35dff591f
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
12 changed files with 156 additions and 123 deletions

View file

@ -9,7 +9,7 @@
"options": { "options": {
"tabWidth": 2, "tabWidth": 2,
"semi": false, "semi": false,
"singleQuote": true, "singleQuote": false,
"printWidth": 90 "printWidth": 90
} }
}, },

View file

@ -13,7 +13,7 @@ class AuthController extends Controller
//$token = $request->session()->token(); //$token = $request->session()->token();
//$token = csrf_token(); //$token = csrf_token();
return view('back.login'); return view('back.login', ["title" => "The Den Login"]);
} }
public function memberAuth(Request $request): Response public function memberAuth(Request $request): Response

View file

@ -16,6 +16,9 @@ class FrontIndexController extends Controller
//$result = DB::select("SELECT * FROM searchlocations('$terms')"); //$result = DB::select("SELECT * FROM searchlocations('$terms')");
return view('front.index', ['count' => $count]); return view('front.index', [
'count' => $count,
'title' => "The Bad Space"
]);
} }
} }

View file

@ -19,7 +19,6 @@ class Location extends Model
protected $primaryKey = 'id'; protected $primaryKey = 'id';
public $incrementing = true; public $incrementing = true;
protected $fillable = [ protected $fillable = [
"id",
"uuid", "uuid",
"name", "name",
"url", "description", "images", "active", "rating", "added_by", "tags", "created_at", "updated_at"]; "url", "description", "images", "active", "rating", "added_by", "tags", "created_at", "updated_at"];

View file

@ -1,58 +1,43 @@
section[role="start"] { section.index-search {
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;
width: 100%; width: 100%;
background: var(--white);
} }
section[role="start"] div[role="index-search"] { section.start a.search-link {
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 {
color: var(--highlight); color: var(--highlight);
font-size: 2.5em; font-size: 2.5em;
font-weight: bold; font-weight: bold;
border: 0; border: 0;
display: block; 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);
}

View file

@ -16,31 +16,62 @@ html body {
overflow-x: hidden; overflow-x: hidden;
} }
a {
color: var(--highlight);
text-decoration: none;
/*
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
*/
}
header { header {
width: 100%; width: 100%;
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
} }
header > nav { header > div:nth-child(1) {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 200px 50% 1fr;
padding: 10px; 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); color: var(--primary);
} }
header > nav i { header > div i {
font-size: 1.3em; font-size: 1.3em;
} }
header > nav > div[role="nav-right"] { header > div nav {
text-align: right; position: absolute;
bottom: 20px;
right: 0;
} }
div[role="system-notice"] { div.system-notice {
background: var(--highlight); background: var(--highlight);
color: var(--primary); color: var(--primary);
padding: 10px; padding: 10px;
@ -50,16 +81,15 @@ main {
height: 100%; height: 100%;
} }
/* GLOBALS */ main > section > article {
width: 80%;
a { max-width: 1000px;
color: var(--highlight); margin: 0 auto;
text-decoration: none;
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
} }
a[role="nav-links"] { /* GLOBALS */
a.nav-links {
padding: 7px; padding: 7px;
border-bottom: none; border-bottom: none;
} }
@ -87,3 +117,8 @@ sup {
vertical-align: baseline; vertical-align: baseline;
font-family: var(--mono-type); font-family: var(--mono-type);
} }
.button-icon {
height: 90%;
padding-top: 3px;
}

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Pixelmator Pro 3.3.8 -->
<svg width="101" height="100" viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-copy">
<path id="Path-copy-2" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
<path id="Path-copy" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 729 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

View file

@ -7,15 +7,17 @@
@if($errors->any()) @if($errors->any())
<h4>{{$errors->first()}}</h4> <h4>{{$errors->first()}}</h4>
@endif @endif
<div> <section>
<article>
<form action="/login" method="post" enctype="multipart/form-data"> <form action="/login" method="post" enctype="multipart/form-data">
@csrf @csrf
<label>Handle</label><br /> <label>Handle</label><br />
<input type="text" name="handle" value="" /> <input type="text" name="handle" value="" />
<br /> <br />
<label>Password</label><br /> <label>Password</label><br />
<input type="password" name="password" value="" /> <input type="password" name="password" value="" /><br />
<input type="submit" value="Knock Knock" name="submit_button"> <input type="submit" value="Knock Knock" name="submit_button">
</form> </form>
</div> </article>
</section>
@endsection @endsection

View file

@ -11,33 +11,37 @@
<body> <body>
<header> <header>
<nav> <div>
<div role="nav-left"> <div class="nav-left">
<a href="/" title="home" role="nav-links"> <a href="/">
<i class="ti ti-biohazard-off"></i> <img src="assets/images/global/logo-dark.svg" title="bad-space-logo" />
</a> </a>
<a href="/about" title="about" role="nav-links">
<i class="ti ti-info-circle"></i>
</a>
<a href="/listings/page/1" title="instance listing" role="nav-links">
<i class="ti ti-list"></i>
</a>
</div> </div>
<div role="nav-right"> <div>
<a href="/den" title="login" role="nav-links"> <span title="page-title">{{$title}}</span>
<i class="ti ti-door-enter" title="login"></i> </div>
<div>
<nav>
<a href="/about" title="about" class="nav-links">
About
</a><br />
<a href="/listings/page/1" title="instance listing" class="nav-links">
Listing
</a><br />
<a href="/den" title="login" class="nav-links">
The Den
</a> </a>
</nav> </nav>
</div>
</div>
</header> </header>
@if($errors->any()) @if($errors->any())
<div role="system-notice"> <div class="system-notice">
<i class="ti ti-alert-circle"></i> {{$errors->first()}} <i class="ti ti-alert-circle"></i> {{$errors->first()}}
</div> </div>
@endif @endif
@if(session('message')) @if(session('message'))
<div role="system-notice"> <div class="system-notice">
<i class="ti ti-alert-circle"></i> {!! session('message') !!} <i class="ti ti-alert-circle"></i> {!! session('message') !!}
</div> </div>
@endif @endif

View file

@ -1,31 +1,18 @@
@extends('frame') @extends('frame')
@section('title', 'This is The Bad Space') @section('title', 'This is The Bad Space')
@section('main-content') @section('main-content')
@parent @parent
<section class="index-search">
<section role="start"> <form class="index-search-form" action="/search" method="post" enctype="multipart/form-data">
<div role="index-wrapper"> <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
<div role="index-search"> <button aria-label="search-button">
<form action="/search" method="post" enctype="multipart/form-data"> <img class="button-icon" src="assets/images/global/icon-search.svg" />
<input type="text" name="index_search" value="" placeholder="SEARCH ME!" />
<button>
<i class="ti ti-search"></i>
</button> </button>
</form> </form>
</div> </section>
<section>
<article>
<div role="index-results"> tracking {{$count}} sites;
</article>
{{$count}}
Bad Spaces tracked. Shot by
<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
</div>
</div>
</section> </section>
@endsection @endsection