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:
Ro 2023-08-17 19:50:38 -07:00
parent e35dff591f
commit 25d51646ba
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
25 changed files with 108 additions and 26 deletions

View file

@ -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
]);
}
} }

View file

@ -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 {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -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 {

View file

@ -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 {

View file

@ -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

View file

@ -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

View file

@ -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']);