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.
This commit is contained in:
Ro
parent
477d6727f4
commit
b9298451b7
8 changed files with 75 additions and 28 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
15
public/assets/css/front/location.css
Normal file
15
public/assets/css/front/location.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -6,3 +6,4 @@
|
|||
@import "index.css";
|
||||
@import "about.css";
|
||||
@import "listing.css";
|
||||
@import "location.css";
|
||||
|
|
|
|||
|
|
@ -6,4 +6,5 @@
|
|||
--white: #efebe3;
|
||||
--grey: #abb7b7;
|
||||
--black: #32302f;
|
||||
--primary-rgb: 20 13 13;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{% 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 %}
|
||||
{{ options.count }}
|
||||
Bad Spaces tracked. Shot by
|
||||
<a href="https://unsplash.com/photos/935EcPU1pBI">Ussama Azam</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue