From b9298451b7b56f2cb54ad51279a2c0c1cfa261cc Mon Sep 17 00:00:00 2001
From: Ro <are0h@ubiqueros.com>
Date: Sun, 22 Jan 2023 14:03:45 -0800
Subject: [PATCH] Front end clean up continued

Cleaned up the front end structure a bit more so the layout is unified
across pages, excluding the index which will serve as the main search
page, which has it's own style.

Location page was also added to display details of instances listed in
the database. It's mostly just informational so it will be kept simple.
---
 public/assets/css/front/index.css     | 38 ++++++++++++++++++---------
 public/assets/css/front/listing.css   |  4 +++
 public/assets/css/front/location.css  | 15 +++++++++++
 public/assets/css/front/start.css     |  1 +
 public/assets/css/global/colors.css   |  1 +
 src/Controller/Routes/Front/Index.php |  3 ++-
 templates/front/index.twig            | 23 +++++++++-------
 templates/front/location.twig         | 16 ++++++++---
 8 files changed, 74 insertions(+), 27 deletions(-)
 create mode 100644 public/assets/css/front/location.css

diff --git a/public/assets/css/front/index.css b/public/assets/css/front/index.css
index d22d13d..44edf29 100644
--- a/public/assets/css/front/index.css
+++ b/public/assets/css/front/index.css
@@ -11,23 +11,32 @@ section[role="start"] {
 section[role="start"] div[role="index-wrapper"] {
   margin: 0 auto;
   width: 100%;
-  max-width: 600px;
-  padding-top: 30px;
 }
 
 section[role="start"] div[role="index-search"] {
-  background: var(--primary);
-  border-radius: 5px;
-  padding: 15px;
+  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"] {
-  font-size: 2em;
-  width: 87%;
+  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: top;
+  vertical-align: text-bottom;
   width: 57px;
   height: 57px;
 }
@@ -36,9 +45,14 @@ section[role="start"] div button i {
   font-size: 1.5em;
 }
 
+section[role="start"] h1 {
+  color: var(--white);
+}
+
 section[role="start"] a.search-link {
-  background: var(--secondary);
-  padding: 5px;
-  color: var(--primary);
-  border-radius: 3px;
+  color: var(--highlight);
+  font-size: 2.5em;
+  font-weight: bold;
+  border: 0;
+  display: block;
 }
diff --git a/public/assets/css/front/listing.css b/public/assets/css/front/listing.css
index a2db055..81423e0 100644
--- a/public/assets/css/front/listing.css
+++ b/public/assets/css/front/listing.css
@@ -9,4 +9,8 @@ section[role="listings"] {
 
 section[role="listings"] a {
   color: var(--highlight);
+  font-size: 2.5em;
+  font-weight: bold;
+  border: 0;
+  display: block;
 }
diff --git a/public/assets/css/front/location.css b/public/assets/css/front/location.css
new file mode 100644
index 0000000..a28c2fe
--- /dev/null
+++ b/public/assets/css/front/location.css
@@ -0,0 +1,15 @@
+section[role="location"] {
+  background: var(--primary);
+  width: 100%;
+  max-width: 600px;
+  padding: 10px;
+  margin: 0 auto;
+  color: var(--white);
+}
+
+section[role="location"] img {
+  width: 33%;
+  border-radius: 3px;
+  overflow: hidden;
+  vertical-align: top;
+}
diff --git a/public/assets/css/front/start.css b/public/assets/css/front/start.css
index 1a340dd..106e4bb 100644
--- a/public/assets/css/front/start.css
+++ b/public/assets/css/front/start.css
@@ -6,3 +6,4 @@
 @import "index.css";
 @import "about.css";
 @import "listing.css";
+@import "location.css";
diff --git a/public/assets/css/global/colors.css b/public/assets/css/global/colors.css
index 3264b5f..92447c8 100644
--- a/public/assets/css/global/colors.css
+++ b/public/assets/css/global/colors.css
@@ -6,4 +6,5 @@
   --white: #efebe3;
   --grey: #abb7b7;
   --black: #32302f;
+  --primary-rgb: 20 13 13;
 }
diff --git a/src/Controller/Routes/Front/Index.php b/src/Controller/Routes/Front/Index.php
index d3eea1d..b5c15c8 100644
--- a/src/Controller/Routes/Front/Index.php
+++ b/src/Controller/Routes/Front/Index.php
@@ -27,7 +27,8 @@ class Index extends AbstractController
             $results = $locations->searchLocations($request->request->get("index_search"));
             return $render->page(
                 ["count"    => count($list),
-                    "items" => $results['items']
+                    "items" => $results['items'],
+                    "terms" => $results["terms"]
                 ],
                 "This is The Bad Space",
                 "front/index.twig"
diff --git a/templates/front/index.twig b/templates/front/index.twig
index 4d04dfe..8b07bb9 100644
--- a/templates/front/index.twig
+++ b/templates/front/index.twig
@@ -8,24 +8,27 @@
 			<div role="index-wrapper">
 				<div role="index-search">
 					<form action="{{ path('index') }}" method="post" enctype="multipart/form-data">
-						<input type="text" name="index_search" value="" placeholder="Take a look"/>
+						<input type="text" name="index_search" value="" placeholder="SEARCH ME!"/>
 						<button>
 							<i class="ti ti-search"></i>
 						</button>
 					</form>
-					{{ options.count }}
-					Bad Spaces tracked. Shot by
-					<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
-
 				</div>
-				{% if options.items is defined %}
-					<div role="index-results">
-						<h3>Found</h3>
+
+
+				<div role="index-results">
+					{% if options.items is defined %}
+						<h1>Found Stuff for:
+							{{ options.terms }}</h1>
 						{% for item in options.items %}
 							<a class="search-link" href="/location/{{ item.uuid }}">{{ item.name }}</a><br/>
 						{% endfor %}
-					</div>
-				{% endif %}
+					{% endif %}
+					{{ options.count }}
+					Bad Spaces tracked. Shot by
+					<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
+				</div>
+
 			</div>
 
 
diff --git a/templates/front/location.twig b/templates/front/location.twig
index 86e14d5..6fafadc 100644
--- a/templates/front/location.twig
+++ b/templates/front/location.twig
@@ -5,9 +5,17 @@
 
 	{% block main %}
 		<section role="location">
-			<h1>About
-				{{ options.location.name }}</h1>
-
-			This is a location
+			<h1>{{ options.location.name }}</h1>
+			<h2>Description</h2>
+			<p>{{ options.location.description }}</p>
+			<h3>Snaps</h3>
+			{% for image in options.location.images %}
+				<a target="_blank" href="/assets/images/examples/{{ image.path }}">
+					<img src="/assets/images/examples/{{ image.path }}"/>
+				</a>
+			{% endfor %}
+			<br/>
+			<strong>TAGS:</strong>
+			{{ options.location.tags }}
 		</section>
 	{% endblock %}