forked from projects/thebadspace
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
parent
62a11168ec
commit
e35dff591f
12 changed files with 156 additions and 123 deletions
|
|
@ -9,7 +9,7 @@
|
|||
"options": {
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"singleQuote": false,
|
||||
"printWidth": 90
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"];
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
8
public/assets/images/global/icon-search.svg
Normal file
8
public/assets/images/global/icon-search.svg
Normal 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 |
5
public/assets/images/global/logo-dark.svg
Normal file
5
public/assets/images/global/logo-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
5
public/assets/images/global/logo-light.svg
Normal file
5
public/assets/images/global/logo-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -7,15 +7,17 @@
|
|||
@if($errors->any())
|
||||
<h4>{{$errors->first()}}</h4>
|
||||
@endif
|
||||
<div>
|
||||
<form action="/login" method="post" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<label>Handle</label><br />
|
||||
<input type="text" name="handle" value="" />
|
||||
<br />
|
||||
<label>Password</label><br />
|
||||
<input type="password" name="password" value="" />
|
||||
<input type="submit" value="Knock Knock" name="submit_button">
|
||||
</form>
|
||||
</div>
|
||||
<section>
|
||||
<article>
|
||||
<form action="/login" method="post" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<label>Handle</label><br />
|
||||
<input type="text" name="handle" value="" />
|
||||
<br />
|
||||
<label>Password</label><br />
|
||||
<input type="password" name="password" value="" /><br />
|
||||
<input type="submit" value="Knock Knock" name="submit_button">
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -11,33 +11,37 @@
|
|||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<div role="nav-left">
|
||||
<a href="/" title="home" role="nav-links">
|
||||
<i class="ti ti-biohazard-off"></i>
|
||||
<div>
|
||||
<div class="nav-left">
|
||||
<a href="/">
|
||||
<img src="assets/images/global/logo-dark.svg" title="bad-space-logo" />
|
||||
</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 role="nav-right">
|
||||
<a href="/den" title="login" role="nav-links">
|
||||
<i class="ti ti-door-enter" title="login"></i>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
<div>
|
||||
<span title="page-title">{{$title}}</span>
|
||||
</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>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@if($errors->any())
|
||||
<div role="system-notice">
|
||||
<div class="system-notice">
|
||||
<i class="ti ti-alert-circle"></i> {{$errors->first()}}
|
||||
</div>
|
||||
@endif
|
||||
@if(session('message'))
|
||||
<div role="system-notice">
|
||||
<div class="system-notice">
|
||||
<i class="ti ti-alert-circle"></i> {!! session('message') !!}
|
||||
</div>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -1,31 +1,18 @@
|
|||
@extends('frame')
|
||||
|
||||
@section('title', 'This is The Bad Space')
|
||||
|
||||
@section('main-content')
|
||||
@parent
|
||||
|
||||
<section role="start">
|
||||
<div role="index-wrapper">
|
||||
<div role="index-search">
|
||||
<form action="/search" method="post" enctype="multipart/form-data">
|
||||
<input type="text" name="index_search" value="" placeholder="SEARCH ME!" />
|
||||
<button>
|
||||
<i class="ti ti-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div role="index-results">
|
||||
|
||||
{{$count}}
|
||||
Bad Spaces tracked. Shot by
|
||||
<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="index-search">
|
||||
<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." />
|
||||
<button aria-label="search-button">
|
||||
<img class="button-icon" src="assets/images/global/icon-search.svg" />
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<article>
|
||||
tracking {{$count}} sites;
|
||||
</article>
|
||||
</section>
|
||||
@endsection
|
||||
Loading…
Reference in a new issue