Built out Listing Page, font update
Plugged in the layout for the Listings page and turned on pagination. Also updated the font to rubrik. Because it's pretty.
This commit is contained in:
parent
e35dff591f
commit
25d51646ba
25 changed files with 108 additions and 26 deletions
|
@ -7,6 +7,8 @@ use App\Models\Location;
|
||||||
|
|
||||||
class FrontIndexController extends Controller
|
class FrontIndexController extends Controller
|
||||||
{
|
{
|
||||||
|
private $limit = 15;
|
||||||
|
|
||||||
public function start()
|
public function start()
|
||||||
{
|
{
|
||||||
$locations = Location::where("active", true)->get();
|
$locations = Location::where("active", true)->get();
|
||||||
|
@ -21,4 +23,33 @@ class FrontIndexController extends Controller
|
||||||
'title' => "The Bad Space"
|
'title' => "The Bad Space"
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function listings(int $pageNum = 1)
|
||||||
|
{
|
||||||
|
$range = $pageNum * $this->limit - $this->limit;
|
||||||
|
$active = Location::where("active", true)->get();
|
||||||
|
$locations = Location::where("active", true)
|
||||||
|
->limit($this->limit)->offset($range)->orderByDesc('id')->get();
|
||||||
|
$pageCount = ceil(count($active) / $this->limit);
|
||||||
|
|
||||||
|
$next = $pageNum + 1;
|
||||||
|
if ($next > $pageCount) {
|
||||||
|
$next = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
$prev = $pageNum - 1;
|
||||||
|
|
||||||
|
if ($prev <= 0) {
|
||||||
|
$prev = $pageCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
return view('front.listing', [
|
||||||
|
'title' => "Listings",
|
||||||
|
"totalPages" => $pageCount,
|
||||||
|
"prev" => $prev,
|
||||||
|
"next" => $next,
|
||||||
|
'pageNum' => $pageNum,
|
||||||
|
'locations' => $locations
|
||||||
|
]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,16 +18,10 @@ form.index-search-form {
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus {
|
|
||||||
outline: solid var(--highlight);
|
|
||||||
background-color: var(--highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
form.index-search-form > input[type="text"] {
|
form.index-search-form > input[type="text"] {
|
||||||
width: 91%;
|
width: 91%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
font: 44px var(--base-type);
|
font: 44px var(--base-type);
|
||||||
transition: all 0.2s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
form.index-search-form > button {
|
form.index-search-form > button {
|
||||||
|
|
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.ttf
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.ttf
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.woff
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.woff
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.woff2
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-bold.woff2
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-light.ttf
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-light.ttf
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-light.woff
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-light.woff
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-light.woff2
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-light.woff2
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.ttf
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.ttf
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.woff
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.woff
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.woff2
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-medium.woff2
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.ttf
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.ttf
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.woff
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.woff
Normal file
Binary file not shown.
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.woff2
Normal file
BIN
public/assets/css/global/fonts/Rubik/rubik-regular.woff2
Normal file
Binary file not shown.
|
@ -8,6 +8,13 @@ input[type="text"] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus {
|
||||||
|
outline: solid var(--highlight);
|
||||||
|
background-color: var(--highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -1,44 +1,71 @@
|
||||||
|
/* RUBIK */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: altehaasgrotesk;
|
font-family: rubik;
|
||||||
font-weight: 400;
|
src: url("fonts/Rubik/rubik-light.ttf") format("truetype"),
|
||||||
|
url("fonts/Rubik/rubik-light.woff") format("woff"),
|
||||||
|
url("fonts/Rubik/rubik-light.woff2") format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
src: url("type/AlteHaasGroteskRegular.woff") format("woff"),
|
|
||||||
url("type/AlteHaasGroteskRegular.ttf") format("ttf");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: altehaasgrotesk;
|
font-family: rubik;
|
||||||
|
src: url("fonts/Rubik/rubik-regular.ttf") format("truetype"),
|
||||||
|
url("fonts/Rubik/rubik-regular.woff") format("woff"),
|
||||||
|
url("fonts/Rubik/rubik-regular.woff2") format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: rubik;
|
||||||
|
src: url("fonts/Rubik/rubik-medium.ttf") format("truetype"),
|
||||||
|
url("fonts/Rubik/rubik-medium.woff") format("woff"),
|
||||||
|
url("fonts/Rubik/rubik-medium.woff2") format("woff2");
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: rubik;
|
||||||
|
src: url("fonts/Rubik/rubik-bold.ttf") format("truetype"),
|
||||||
|
url("fonts/Rubik/rubik-bold.woff") format("woff"),
|
||||||
|
url("fonts/Rubik/rubik-bold.woff2") format("woff2");
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: oblique;
|
font-style: normal;
|
||||||
src: url("type/AlteHaasGroteskBold.woff") format("woff"),
|
|
||||||
url("type/AlteHaasGroteskBold.ttf") format("ttf");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--base-type: altehaasgrotesk, helvetica, arial, sans-serif;
|
--base-type: rubik, helvetica, arial, sans-serif;
|
||||||
--mono-type: "Lucida Console", monaco, monospace;
|
--mono-type: "Lucida Console", monaco, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
color: var(--secondary);
|
color: var(--white);
|
||||||
|
font-family: var(--title-type);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.5em;
|
font-size: 4em;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
line-height: 1em;
|
font-kerning: normal;
|
||||||
|
letter-spacing: -5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 0.75em;
|
||||||
|
margin: 40px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.8em;
|
font-size: 3em;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
|
line-height: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.2em;
|
font-size: 2em;
|
||||||
font-weight: 500;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > article > h1 {
|
main > article > h1 {
|
||||||
|
|
|
@ -3,6 +3,8 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="theme-color" content="#d66365" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>
|
<title>
|
||||||
@yield('title')
|
@yield('title')
|
||||||
</title>
|
</title>
|
||||||
|
@ -14,7 +16,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="nav-left">
|
<div class="nav-left">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="assets/images/global/logo-dark.svg" title="bad-space-logo" />
|
<img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -25,8 +27,8 @@
|
||||||
<a href="/about" title="about" class="nav-links">
|
<a href="/about" title="about" class="nav-links">
|
||||||
About
|
About
|
||||||
</a><br />
|
</a><br />
|
||||||
<a href="/listings/page/1" title="instance listing" class="nav-links">
|
<a href="/listings/1" title="instance listing" class="nav-links">
|
||||||
Listing
|
Listings
|
||||||
</a><br />
|
</a><br />
|
||||||
<a href="/den" title="login" class="nav-links">
|
<a href="/den" title="login" class="nav-links">
|
||||||
The Den
|
The Den
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
@extends('frame')
|
||||||
|
@section('title', 'The Bad Space|Listings')
|
||||||
|
@section('main-content')
|
||||||
|
@parent
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<h1>Page {{$pageNum}}</h1>
|
||||||
|
|
||||||
|
<a href="/listings/{{$prev}}">PREV</a>
|
||||||
|
{{$pageNum}} of {{$totalPages}}
|
||||||
|
<a href="/listings/{{$next}}">NEXT</a><br />
|
||||||
|
@foreach($locations as $location)
|
||||||
|
{{$location->name}}<br />
|
||||||
|
@endforeach
|
||||||
|
<a href="/listings/{{$prev}}">PREV</a>
|
||||||
|
{{$pageNum}} of {{$totalPages}}
|
||||||
|
<a href="/listings/{{$next}}">NEXT</a>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
@endsection
|
|
@ -19,6 +19,7 @@ use App\Http\Controllers\LocationController;
|
||||||
|
|
||||||
//front
|
//front
|
||||||
Route::get("/", [FrontIndexController::class, 'start']);
|
Route::get("/", [FrontIndexController::class, 'start']);
|
||||||
|
Route::get("/listings/{pageNum}", [FrontIndexController::class, 'listings']);
|
||||||
|
|
||||||
//auth
|
//auth
|
||||||
Route::get("/login", [AuthController::class, 'showLogin']);
|
Route::get("/login", [AuthController::class, 'showLogin']);
|
||||||
|
|
Loading…
Reference in a new issue