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.

app/Http/Controllers/FrontIndexController.php

@@ -7,6 +7,8 @@ use App\Models\Location;
 
 class FrontIndexController extends Controller
 {
+    private $limit = 15;
+
     public function start()
     {
         $locations = Location::where("active", true)->get();
@@ -21,4 +23,33 @@ class FrontIndexController extends Controller
             '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
+        ]);
+    }
 }

public/assets/css/front/index.css

@@ -18,16 +18,10 @@ form.index-search-form {
   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 {

public/assets/css/global/forms.css

@@ -8,6 +8,13 @@ input[type="text"] {
   display: inline-block;
   background: var(--white);
   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 {

public/assets/css/global/typography.css

@@ -1,44 +1,71 @@
+/* RUBIK  */
 @font-face {
-  font-family: altehaasgrotesk;
+  font-family: rubik;
+  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-face {
+  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;
-  src: url("type/AlteHaasGroteskRegular.woff") format("woff"),
-    url("type/AlteHaasGroteskRegular.ttf") format("ttf");
 }
 
 @font-face {
-  font-family: altehaasgrotesk;
+  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-style: oblique;
-  src: url("type/AlteHaasGroteskBold.woff") format("woff"),
-    url("type/AlteHaasGroteskBold.ttf") format("ttf");
+  font-style: normal;
 }
 
 :root {
-  --base-type: altehaasgrotesk, helvetica, arial, sans-serif;
+  --base-type: rubik, helvetica, arial, sans-serif;
   --mono-type: "Lucida Console", monaco, monospace;
 }
 
 h1,
 h2,
 h3 {
-  color: var(--secondary);
+  color: var(--white);
+  font-family: var(--title-type);
 }
 
 h1 {
-  font-size: 2.5em;
-  font-weight: 700;
-  line-height: 1em;
+  font-size: 4em;
+  font-weight: 500;
+  font-kerning: normal;
+  letter-spacing: -5px;
+  text-transform: uppercase;
+  line-height: 0.75em;
+  margin: 40px 0;
 }
 
 h2 {
-  font-size: 1.8em;
-  font-weight: 600;
+  font-size: 3em;
+  font-weight: 400;
+  line-height: 0.8em;
 }
 
 h3 {
-  font-size: 1.2em;
-  font-weight: 500;
+  font-size: 2em;
+  font-weight: 300;
 }
 
 main > article > h1 {

resources/views/frame.blade.php

@@ -3,6 +3,8 @@
 
 <head>
   <meta charset="UTF-8">
+  <meta name="theme-color" content="#d66365" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>
     @yield('title') 
   </title>
@@ -14,7 +16,7 @@
     <div>
       <div class="nav-left">
         <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>
       </div>
       <div>
@@ -25,8 +27,8 @@
           <a href="/about" title="about" class="nav-links">
             About
           </a><br />
-          <a href="/listings/page/1" title="instance listing" class="nav-links">
-            Listing
+          <a href="/listings/1" title="instance listing" class="nav-links">
+            Listings
           </a><br />
           <a href="/den" title="login" class="nav-links">
             The Den

resources/views/front/listing.blade.php

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

routes/web.php

@@ -19,6 +19,7 @@ use App\Http\Controllers\LocationController;
 
 //front
 Route::get("/", [FrontIndexController::class, 'start']);
+Route::get("/listings/{pageNum}", [FrontIndexController::class, 'listings']);
 
 //auth
 Route::get("/login", [AuthController::class, 'showLogin']);