Front End Templating

Began the process of getting the front end together by adding about and
listing pages and applied some light styling to it doesn't look like
garbage.

Still need to turn on the indivial instance display pages, so that will
be next.
symfony-version
Ro 2 years ago
parent 5ad29f78f6
commit e897453664

@ -0,0 +1,12 @@
section[role="about"] {
background: var(--primary);
width: 100%;
max-width: 600px;
padding: 100px;
margin: 0 auto;
color: var(--white);
}
section[role="about"] a {
color: var(--highlight);
}

@ -1,15 +1,37 @@
section[role="intro"] { section[role="start"] {
padding: 10px; background-image: url("../../images/global/special-trash.jpg");
width: 300px; height: 100%;
color: var(--highlight); background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
section[role="start"] div {
background: var(--primary);
width: 400px;
border-radius: 3px;
padding: 5px;
} }
section[role="intro"] span[role="title"] { section[role="start"] span[role="title"] {
font-size: 100px; font-size: 100px;
line-height: 80px; line-height: 80px;
font-weight: bold;
color: var(--secondary); color: var(--secondary);
} }
section[role="intro"] p { section[role="start"] p {
color: var(--white); color: var(--white);
display: inline-block;
vertical-align: top;
margin: 6px auto;
font-size: 1.87em;
}
section[role="start"] p a {
color: var(--highlight);
margin-top: 5px;
} }

@ -0,0 +1,13 @@
section[role="listings"] {
background: var(--primary);
width: 100%;
max-width: 600px;
border-radius: 3px;
padding: 100px;
margin: 0 auto;
color: var(--white);
}
section[role="listings"] a {
color: var(--highlight);
}

@ -3,5 +3,6 @@
@import "../global/typography.css"; @import "../global/typography.css";
@import "../global/frame.css"; @import "../global/frame.css";
@import "../global/icons.css"; @import "../global/icons.css";
@import "index.css"; @import "index.css";
@import "about.css";
@import "listing.css";

@ -24,7 +24,7 @@ header {
header > nav { header > nav {
display: grid; display: grid;
grid-template-columns: 200px 1fr; grid-template-columns: 1fr 1fr;
padding: 10px; padding: 10px;
} }
@ -36,6 +36,16 @@ header > nav > div[role="nav-right"] {
text-align: right; text-align: right;
} }
div[role="system-notice"] {
background: var(--highlight);
color: var(--primary);
padding: 10px;
}
main {
height: 100%;
}
/* GLOBALS */ /* GLOBALS */
a { a {
@ -45,6 +55,11 @@ a {
transition: all 0.2s linear; transition: all 0.2s linear;
} }
a[role="nav-links"] {
padding: 7px;
border-bottom: none;
}
a:hover { a:hover {
border-bottom: 1px solid var(--primary); border-bottom: 1px solid var(--primary);
} }

@ -28,6 +28,7 @@ h3 {
h1 { h1 {
font-size: 2.5em; font-size: 2.5em;
font-weight: 700; font-weight: 700;
line-height: 1em;
} }
h2 { h2 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 648 KiB

@ -11,26 +11,42 @@ use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use App\Service\Auth; use App\Service\Auth;
use App\Service\Render; use App\Service\Render;
use App\Service\HandleLocations;
class Index extends AbstractController class Index extends AbstractController
{ {
/** /**
* @Route("/", name="index") * @Route("/", name="index")
*/ */
public function showIndex(Request $request, Auth $auth, Render $render): Response public function showIndex(Request $request, Auth $auth, Render $render, HandleLocations $locations): Response
{ {
$check = $auth->status(); $list = $locations->getActiveLocations();
return $render->page(["count" => count($list)], "This is The Bad Space", "front/index.twig");
}
return $render->page([], "This is The Bad Space", "front/index.twig"); /**
* @Route("/about", name="about")
*/
public function showAbout(
Request $request,
Auth $auth,
Render $render,
HandleLocations $locations
): Response {
return $render->page([], "About The Bad Space", "front/about.twig");
} }
/** /**
* @Route("/knockknock", name="access") * @Route("/listings/page/{pageNum}", name="listings")
*/ */
public function access(Request $request): Response public function showListing(
{ Request $request,
return $this->render("front/knock.twig", [ Auth $auth,
"title" => "Wipe Your feet", Render $render,
]); HandleLocations $locations,
string $pageNum
): Response {
$list = $locations->getLocationsPage($pageNum, "true");
return $render->page(["list" => $list, "page" => $pageNum], "About The Bad Space", "front/listing.twig");
} }
} }

@ -48,13 +48,14 @@ class HandleLocations
return $this->entityManager->getRepository(Location::class)->findBy(["uuid" => $uuid]); return $this->entityManager->getRepository(Location::class)->findBy(["uuid" => $uuid]);
} }
public function getLocationsPage(int $page) public function getLocationsPage(int $page, string $active = "all")
{ {
$locations = $this->entityManager->getRepository(Location::class); $locations = $this->entityManager->getRepository(Location::class);
$list = $locations->findBy( if ($active == "true" || $active == "false") {
[], $list = $locations->findBy(["active" => $active], ["id" => "ASC"]);
["id" => "ASC"] } else {
); $list = $locations->findBy([], ["id" => "ASC"]);
}
$count = ceil(count($list) / $this->limit); $count = ceil(count($list) / $this->limit);
$totalCount = count($list); $totalCount = count($list);
@ -121,7 +122,7 @@ class HandleLocations
$location->setAddedBy($memberId); $location->setAddedBy($memberId);
$this->entityManager->persist($location); $this->entityManager->persist($location);
} else { } else {
$active = ($request->request->get("rating") == "true" ? true : false); $active = ($request->request->get("active") == "true" ? true : false);
$location->setActive($active); $location->setActive($active);
} }

@ -16,12 +16,7 @@
{% else %} {% else %}
<section role="den-login"> <section role="den-login">
<h1>This is the Den</h1><br/> <h1>The Den</h1><br/>
{% if options.notice is defined %}
<div role="system-notice">
{{ options.notice }}
</div>
{% endif %}
{{ include("forms/login-form.twig") }} {{ include("forms/login-form.twig") }}
</section> </section>

@ -8,12 +8,6 @@
<h1> <h1>
Location Listing Location Listing
</h1> </h1>
{% if options.notice is defined %}
<div role="system-notice">
{{ options.notice }}
</div>
{% endif %}
{% if options.mode == "add" %} {% if options.mode == "add" %}
<h2>Add New Location</h2> <h2>Add New Location</h2>
{{ include("forms/add-location.twig") }} {{ include("forms/add-location.twig") }}

@ -13,33 +13,50 @@
<header> <header>
<nav> <nav>
<div role="nav-left"> <div role="nav-left">
<a href="/" title="home" role="nav-links">
<i class="ti ti-biohazard-off"></i> <i class="ti ti-biohazard-off"></i>
<a href="/">The Bad Space</a> </a>
<a href="/about" title="about" role="nav-links">
<i class="ti ti-info-circle"></i>
</a>
<a href="/listings/page/1" title="instance listing" role="nav-links">
<i class="ti ti-list"></i>
</a>
</div> </div>
<div role="nav-right"></a> <div role="nav-right">
{% if loggedIn == true %} {% if loggedIn == true %}
<a href="/den" title="den index"> <a href="/den" title="den index" role="nav-links">
<i class="ti ti-door" title="den index"></i> <i class="ti ti-door" title="den index"></i>
</a> </a>
<a href="/den/members" title="members"> <a href="/den/members" title="members" role="nav-links">
<i class="ti ti-users" title="members"></i> <i class="ti ti-users" title="members"></i>
</a> </a>
<a href="/den/locations/page/1" title="locations"> <a href="/den/locations/page/1" title="locations" role="nav-links">
<i class="ti ti-list-details" title="locations"></i> <i class="ti ti-list-details" title="locations"></i>
</a> </a>
<a href="/logout" title="logout"> <a href="/logout" title="logout" role="nav-links">
<i class="ti ti-door-exit" title="logout"></i> <i class="ti ti-door-exit" title="logout"></i>
</a> </a>
{% else %} {% else %}
<a href="/den" title="login"> <a href="/den" title="login" role="nav-links">
<i class="ti ti-door-enter" title="login"></i> <i class="ti ti-door-enter" title="login"></i>
</a> </a>
{% endif %} {% endif %}
</nav>
</header>
{% if options.notice is defined %}
<div role="system-notice">
<i class="ti ti-alert-circle"></i>
{{ options.notice }}
</div> </div>
{% endif %}
</nav> <main>
{% block main %}{% endblock %}
</main>
</body>
</body> </body>
</html></header><main> </html>
{% block main %}{% endblock %}</main>{% block javascripts %}{% endblock %}</body></html>

@ -0,0 +1,25 @@
{% extends "base/frame.twig" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/front/start.css?=sdfsdf">
{% endblock %}
{% block main %}
<section role="about">
<h1>About The Bad Space</h1>
<p>The Bad Space project was born from a need to effectively identify instances that house bad actors and are poorly moderated, which puts marginalized communities at risk. It is an extension of the
<strong>#fediblock</strong>
hashtag created
<a href="https://www.artistmarciax.com/">by Arist Maricia X
</a>with additional support from
<a href="https://digital.rooting.garden">Ginger</a>
to provide a catolog of instances seek to cause harm and reduce the quality of experience in the fediverse.
</p>
<p>
Technial support provided by
<a href="https://roiskinda.cool/profile.html">Ro</a>.
</p>
</section>
{% endblock %}

@ -4,11 +4,13 @@
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<section role="intro"> <section role="start">
<span role="title">The Bad Space</span><br/> <div>
Because some people are just awful humans. <span role="title">{{ options.count }}</span>
<p>Coming Soonish... <p>
Bad Spaces tracked.<br/>
Pace yourself.
</p> </p>
</div>
</section> </section>
{% endblock %} {% endblock %}

@ -0,0 +1,18 @@
{% extends "base/frame.twig" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/front/start.css?=sdfsdf">
{% endblock %}
{% block main %}
<section role="listings">
<h1>The Bad Space Listings</h1>
<h2>Page
{{ options.page }}</h2>
{% for location in options.list.locations %}
<sup>ID:{{ location.id }}</sup>
<a href="/location/{{ location.uuid }}">
{{ location.name }}</a><br/>
{% endfor %}
</section>
{% endblock %}
Loading…
Cancel
Save