From b9298451b7b56f2cb54ad51279a2c0c1cfa261cc Mon Sep 17 00:00:00 2001 From: Ro 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 | 40 ++++++++++++++++++--------- 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, 75 insertions(+), 28 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"] a.search-link { - background: var(--secondary); - padding: 5px; - color: var(--primary); - border-radius: 3px; +section[role="start"] h1 { + color: var(--white); +} + +section[role="start"] a.search-link { + 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 @@
- +
- {{ options.count }} - Bad Spaces tracked. Shot by - Ussama Azam -
- {% if options.items is defined %} -
-

Found

+ + +
+ {% if options.items is defined %} +

Found Stuff for: + {{ options.terms }}

{% for item in options.items %} {{ item.name }}
{% endfor %} -
- {% endif %} + {% endif %} + {{ options.count }} + Bad Spaces tracked. Shot by + Ussama Azam +
+
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 %}
-

About - {{ options.location.name }}

- - This is a location +

{{ options.location.name }}

+

Description

+

{{ options.location.description }}

+

Snaps

+ {% for image in options.location.images %} + + + + {% endfor %} +
+ TAGS: + {{ options.location.tags }}
{% endblock %}