feat: move/refactor navigation

moves the navigation code into its own component. this also refactors it into a list, this is generally helpful for AT as those can now announce the number of links. another thing is that the open button is moved into the <nav>-element. this makes it so that if someone were to navigate to the <nav>-element they’d be able open the menu from there.
Merge pull request 'Refactor home search' (#21 ) from moiety/search into develop
2025-05-05 22:45:59 +02:00 · 2025-05-05 22:44:21 +02:00 · 2025-05-05 22:40:59 +02:00 · 2025-05-05 22:40:59 +02:00 · 2025-05-05 22:40:59 +02:00 · 2025-05-05 22:40:59 +02:00
9 changed files with 205 additions and 147 deletions
--- a/public/assets/css/front/index.css
+++ b/public/assets/css/front/index.css
@ -3,6 +3,12 @@ section.index-search {
  background: var(--white);
 }

+/* TODO: move to a global file? it’s not only for forms. */
+section.index-search :focus-visible {
+  outline: 2px solid var(--white);
+  outline-offset: -4px;
+}
+
 section.start a.search-link {
  color: var(--highlight);
  font-size: 2.5em;
@ -12,36 +18,57 @@ section.start a.search-link {
 }

 form.index-search-form {
+  display: grid;
+  grid-template-columns: auto max-content;
+  gap: 15px;
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
 }

+form.index-search-form > input,
+form.index-search-form > button {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 60px;
+  box-sizing: border-box;
+}
+
+form.index-search-form > input:focus {
+  color: var(--white);
+}
+
 form.index-search-form > input[type="text"] {
-  width: 88%;
-  height: 50px;
  font: 44px var(--base-type);
 }

+form.index-search-form > input[type="hidden"] {
+  /* This removes it from the grid calculations */
+  position: absolute;
+}
+
 form.index-search-form > button {
-  height: 60px;
+  display: grid;
+  grid-template-columns: auto;
+  align-items: center;
+  padding: 0;
  width: 60px;
-  position: relative;
-  top: 9px;
-  right: 0;
+  text-transform: uppercase;
 }

-form.index-search-form > button > img#search-icon {
-  float: none;
+form.index-search-form > button > svg {
+  justify-self: center;
+  width: 48px;
+  height: 48px;
 }

-form.index-search-form > button > label {
-  font-weight: 500;
-  top: 15px;
-  position: relative;
-  font-size: 1.5em;
+form.index-search-form > button > span {
  display: none;
+  margin-top: 3px;
+  font-weight: 500;
+  font-size: 1.5em;
 }

 ::placeholder {
@ -50,59 +77,65 @@ form.index-search-form > button > label {
 }

 section.index-meta article {
-  margin-top: 20px;
+  padding-block: 30px;
 }

-div.index-meta {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  gap: 10px;
-  width: 98%;
-  font-weight: 500;
-  color: var(--secondary);
-}
-
-div.index-meta > label:nth-child(2),
-div.index-meta > label:nth-child(4),
-div.index-meta > label:nth-child(6) {
-  color: var(--white);
+table.index-meta {
  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table.index-meta tr + tr > * {
+  padding-block-start: 10px;
+}
+
+table.index-meta :is(th, td) {
+  padding: 0;
+  font-weight: 500;
+}
+
+table.index-meta th {
+  color: var(--secondary);
+  text-align: left;
+}
+
+table.index-meta td {
+  padding-inline-start: 10px;
+  color: var(--white);
  text-align: right;
 }

@media only screen and (max-width: 800px) {
  form.index-search-form > input[type="text"] {
-    width: 85%;
-    height: 50px;
    font: 34px var(--base-type);
  }
 }

@media only screen and (max-width: 650px) {
  form.index-search-form > input[type="text"] {
-    width: 80%;
-    height: 50px;
    font: 34px var(--base-type);
  }
 }

@media only screen and (max-width: 480px) {
+  form.index-search-form {
+    grid-template-columns: auto;
+  }
  form.index-search-form > input[type="text"] {
-    width: 99%;
-    height: 50px;
    font: 27px var(--base-type);
  }

+  form.index-search-form > input[type="text"],
  form.index-search-form > button {
-    width: 99%;
-    top: 15px;
+    width: 100%;
  }

-  form.index-search-form > button > label {
-    display: inline;
+  form.index-search-form > button {
+    grid-template-columns: auto 60px;
  }

-  form.index-search-form > button > img#search-icon {
-    float: right;
+  form.index-search-form > button span {
+    display: block;
  }
 }
--- a/public/assets/css/front/start.css
+++ b/public/assets/css/front/start.css
@ -1,3 +1,4 @@
+@import "../global/utilities.css";
@import "../global/colors.css";
@import "../global/forms.css";
@import "../global/typography.css";
--- a/public/assets/css/global/forms.css
+++ b/public/assets/css/global/forms.css
@ -8,16 +8,25 @@ input[type="text"] {
  display: inline-block;
  background: var(--white);
  color: var(--primary);
-  transition: all 0.2s linear;
+  transition: 0.2s linear;
+  transition-property: color, background-color;
  height: 30px;
 }

 input[type="text"]:focus,
 input[type="password"]:focus {
-  outline: solid var(--highlight);
  background-color: var(--highlight);
 }

+/* TODO: generalise this a bit */
+button:focus,
+input[type="submit"]:focus,
+input[type="text"]:focus,
+input[type="password"]:focus {
+  outline: 2px solid var(--white);
+  outline-offset: -4px;
+}
+
 textarea {
  border: 0;
  border-radius: 3px;
@ -34,7 +43,8 @@ input[type="submit"] {
  position: relative;
  cursor: pointer;
  border: 0;
-  transition: all 0.3s linear;
+  transition: 0.3s linear;
+  transition-property: color, background-color;
  height: 35px;
  margin-top: 15px;
 }
--- a/public/assets/css/global/typography.css
+++ b/public/assets/css/global/typography.css
@ -67,6 +67,11 @@ h3 {
  font-weight: 500;
 }

+h3.strong {
+  color: var(--secondary);
+  font-weight: bolder;
+}
+
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 2em;
--- a/public/assets/css/global/utilities.css
+++ b/public/assets/css/global/utilities.css
@ -0,0 +1,13 @@
+/**
+ * Utilities
+ */
+
+.visually-hidden:not(:focus):not(:active) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
--- a/public/assets/images/global/icon-search.svg
+++ b/public/assets/images/global/icon-search.svg
@ -1,8 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated by Pixelmator Pro 3.3.8 -->
-<svg width="101" height="100" viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
-    <g id="Group-copy">
-        <path id="Path-copy-2" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
-        <path id="Path-copy" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
-    </g>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id="search">
+    <path fill="none" stroke="currentcolor" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
+    <path fill="none" stroke="currentcolor" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
 </svg>
--- a/resources/views/frame.blade.php
+++ b/resources/views/frame.blade.php
@ -6,11 +6,11 @@
    <meta name="theme-color" content="#c3639e" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
-        @yield('title') 
+        @yield('title')
    </title>
    @if(isset($front) && $front == false)
        <link rel="stylesheet" type="text/css" href="/assets/css/back/start.css?=sdfsdf">
-    @elseif(!isset($front) || $front == true) 
+    @elseif(!isset($front) || $front == true)
        <link rel="stylesheet" type="text/css" href="/assets/css/front/start.css?=sdfsdf">
    @endif

@ -24,7 +24,7 @@
        <div>
            <div class="header-left">
                <a href="/">
-                    <img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
+                    <img src="/assets/images/global/logo-dark.svg" alt="The Bad Space" />
                </a>
            </div>
            <div class="header-center">
@ -59,6 +59,5 @@
        </div>
    </footer>
 </body>
-</body>

-</html>
+</html>
--- a/resources/views/front/about.blade.php
+++ b/resources/views/front/about.blade.php
@ -1,89 +1,81 @@
@extends('frame') 
@section('title', 'The Bad Space|About')
-  @section('main-content')
-    @parent
-    <section>
-      <article>
-        <h2 id="what">What is The Bad Space?</h2>
-        <p>The Bad Space arose from a need to identify instances that house bad actors, are poorly moderated, and/or contain inappropriate/offensive content (CSAM, hate speech, fascist ideology, etc.) that puts marginalized communities at risk.
-        </p>
-        <p>
-          It is an extension of the
-          <strong>#fediblock</strong>
-          hashtag - orginally created by
-          <a href="https://www.artistmarciax.com/">Artist Marcia X</a>
-          with additional support from
-          <a href="https://digital.rooting.garden">Ginger</a>
-          to provide a catalog of instances that seek to cause harm and reduce the quality of experience in the fediverse.
-        </p>
-        <p>
-          The searchable online catalog is built and maintained by
-          <a href="https://roiskinda.cool/profile.html">Ro</a>. The repo can be found <a href="https://koodu.h-i.works/projects/thebadspace">here</a>.
-        </p>
-        <p>Custom silence and suspend icons graciously provided by <a href="https://rage.love/@puf">puf</a>.</p>
-        <h2 id="how">How does it work?</h2>
-        <p>The Bad Space is a collaboration of communities, referred to as Current Sources, committed to actively moderating against racism, sexism, heterosexism, transphobia, ableism, casteism, or religion.</p>
+    @section('main-content')
+        @parent
+        <section>
+            <article>
+                <h2 id="what">What is The Bad Space?</h2>
+                <p>The Bad Space arose from a need to identify instances that house bad actors, are poorly moderated, and/or contain inappropriate/offensive content (CSAM, hate speech, fascist ideology, etc.) that puts marginalized communities at risk.</p>
+                <p>It is an extension of the <strong>#fediblock</strong> hashtag - orginally created by <a href="https://www.artistmarciax.com/">Artist Marcia X</a> with additional support from <a href="https://digital.rooting.garden">Ginger</a> to provide a catalog of instances that seek to cause harm and reduce the quality of experience in the fediverse.</p>
+                <p>The searchable online catalog is built and maintained by <a href="https://roiskinda.cool/profile.html">Ro</a>. The repo can be found <a href="https://koodu.h-i.works/projects/thebadspace">here</a>.</p>
+                <p>Custom silence and suspend icons graciously provided by <a href="https://rage.love/@puf">puf</a>.</p>

-        <p>These communities have permitted The Bad Space to ingest their respective blocklists detailing their silences and suspension to create a composite directory of sites that engage in the behavior(s) listed in the section above. For each behavior, the directory of locations can be searched and, through The Bad Space's public API, integrated into external services.</p>
+                <h2 id="how">How does it work?</h2>
+                <p>The Bad Space is a collaboration of communities, referred to as Current Sources, committed to actively moderating against racism, sexism, heterosexism, transphobia, ableism, casteism, or religion.</p>
+                <p>These communities have permitted The Bad Space to ingest their respective blocklists detailing their silences and suspension to create a composite directory of sites that engage in the behavior(s) listed in the section above. For each behavior, the directory of locations can be searched and, through The Bad Space's public API, integrated into external services.</p>

-        <h2>Adding Locations</h2>
-        <p>
-          Current Sources continually review the #fediblock hashtag and update their silences and suspensions when warranted. If an instance meets the criteria of a Current Source to be suspended or silenced, The Bad Space will automatically be updated according to said Current Sources' curated data.
+                <h2>Adding Locations</h2>
+                <p>Current Sources continually review the #fediblock hashtag and update their silences and suspensions when warranted. If an instance meets the criteria of a Current Source to be suspended or silenced, The Bad Space will automatically be updated according to said Current Sources' curated data.</p>
+                <p>For an instance to be listed on The Bad Space, at least two (2) Current Sources must have that location silenced and/or suspended. Instances will not display in the directory until two (2) Current Sources have taken moderation action against them.</p>

-          For an instance to be listed on The Bad Space, at least two (2) Current Sources must have that location silenced and/or suspended. Instances will not display in the directory until two (2) Current Sources have taken moderation action against them.
-        </p>
-        <h2>Removing Locations</h2>
-        Locations that are displayed in The Bad Space may petition to be removed from the catalog by sending an appeal request to The Bad Space. The appeal process is outlined <a href="/appeals">here</a>.
+                <h2>Removing Locations</h2>
+                <p>Locations that are displayed in The Bad Space may petition to be removed from the catalog by sending an appeal request to The Bad Space. The appeal process is outlined <a href="/appeals">here</a>.</p>

-        <p><strong>Current Sources:</strong></p>
-        Maston:<br />
-        @foreach($sources as $source)
-          @if($source->format == 'json')
-            <a href="https://{{$source->url}}">{{$source->url}}</a><br />
-          @endif
-        @endforeach
-        Custom CSV<br />
-        @foreach($sources as $source)
-          @if($source->format == 'csv')
-            <a href="{{$source->url}}">{{$source->url}}</a><br />
-          @endif
-        @endforeach
+                <h3 class="strong">Current Sources:</h3>

-        <h2>How do I use it?</h2>
-        <p>
-          The Bad Space is meant to be a resource for anyone looking to improve the quality of their online experience by creating a tool that catalogs sources for harassment and abuse. There are several options for how it can be used.
-        <h3>Search</h3>
-        To see if a site is listed in the database, use the
-        <a href="/">search feature</a>
-        to search for that URL. If it is in the database, information for that instance will be returned and associated instances if applicable.
-        <h3>CSV Exports</h3>
-        For a list of the current locations being tracked, click on one of the links below to download a dynamically generated CSV file that can be consumed as a blocklist. More formats will be added over time.
-        <br />
-        <a href="/exports/mastodon">For Mastodon</a>
-        <h3>API</h3>
-        The Bad Space has a public api that can be used to search the database programatically and return results in the JSON format. The API can be accsess at<br />
-        <code>https://thebad.space/api/v1/search</code>
-        by posting a JSON object with the following format:
-        <code>{"url":"search.url"}</code><br />
-        Data from API request will be returned in the follow format:<br />
+                <h4>Maston:</h4>
+                <ul>
+                    @foreach($sources as $source)
+                        @if($source->format == 'json')
+                            <li><a href="https://{{$source->url}}">{{$source->url}}</a></li>
+                        @else
+                            <li>None</li>
+                        @endif
+                    @endforeach
+                </ul>

-        <pre>
-        <code>{
-            data:{
-                "listingCount":1,
-                  "locations":
-                  [
-                    {
-                      "url":"search.url",
-                      "name":"Instance Name",
-                      "description":"instance description",
-                      "link":"bad-space-instance-link"
-                    }
-                  ]
+                <h4>Custom CSV</h4>
+                <ul>
+                    @foreach($sources as $source)
+                        @if($source->format == 'csv')
+                            <li><a href="{{$source->url}}">{{$source->url}}</a></li>
+                        @else
+                            <!--
+                            <li>None</li>
+                            -->
+                        @endif
+                    @endforeach
+                </ul>
+
+                <h2>How do I use it?</h2>
+                <p>The Bad Space is meant to be a resource for anyone looking to improve the quality of their online experience by creating a tool that catalogs sources for harassment and abuse. There are several options for how it can be used.</p>
+
+                <h3>Search</h3>
+                <p>To see if a site is listed in the database, use the <a href="/">search feature</a> to search for that URL. If it is in the database, information for that instance will be returned and associated instances if applicable.</p>
+
+                <h3>CSV Exports</h3>
+                <p>For a list of the current locations being tracked, click on one of the links below to download a dynamically generated CSV file that can be consumed as a blocklist. More formats will be added over time.</p>
+                <p><a href="/exports">Exports</a></p>
+
+                <h3>API</h3>
+                <p>The Bad Space has a public api that can be used to search the database programatically and return results in the JSON format. The API can be accsess at <code>https://thebad.space/api/v1/search</code> by posting a JSON object with the following format: <code>{"url":"search.url"}</code>. Data from API request will be returned in the follow format:</p>
+
+                <pre>
+<code>{
+    data:{
+        "listingCount":1,
+          "locations":
+          [
+            {
+              "url":"search.url",
+              "name":"Instance Name",
+              "description":"instance description",
+              "link":"bad-space-instance-link"
            }
-        }</code>
-        </pre>
-        </p>
-      </article>
-    </section>
-  @endsection
+          ]
+    }
+}</code>
+</pre>
+            </article>
+        </section>
+    @endsection
--- a/resources/views/front/index.blade.php
+++ b/resources/views/front/index.blade.php
@ -1,13 +1,15 @@
-@extends('frame') 
+@extends('frame')
@section('title', 'This is The Bad Space')
  @section('main-content')
    @parent
    <section class="index-search">
      <form class="index-search-form" action="/search" method="post" enctype="multipart/form-data">
        <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
-        <button aria-label="search-button">
-          <label id="search-label">LOOK FOR IT</label>
-          <img id="search-icon" class="button-icon" src="assets/images/global/icon-search.svg" />
+        <button aria-labelledby="search-label">
+          <span id="search-label">Look for it</span>
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="trye">
+              <use href="assets/images/global/icon-search.svg#search" />
+          </svg>
        </button>
        @csrf
      </form>
@ -38,14 +40,21 @@
    @endisset
    <section class="index-meta">
      <article>
-        <div class="index-meta">
-          <label>Active Locations Tracked</label>
-          <label>{{$count}}</label>
-          <label>Total Sources</label>
-          <label>{{$sources}}</label>
-          <label>Latest Update</label>
-          <label>{{$latest_date}}</label>
-        </div>
+        <table class="index-meta">
+          <caption class="visually-hidden">Meta</caption>
+          <tr>
+            <th>Active Locations Tracked</th>
+            <td>{{$count}}</td>
+          </tr>
+          <tr>
+            <th>Total Sources</th>
+            <td>{{$sources}}</td>
+          </tr>
+          <tr>
+            <th>Latest Update</th>
+            <td>{{$latest_date}}</td>
+          </tr>
+        </table>
      </article>
    </section>
-  @endsection
+  @endsection
Author	SHA1	Message	Date
Zoë	b921134002	feat: move/refactor navigation moves the navigation code into its own component. this also refactors it into a list, this is generally helpful for AT as those can now announce the number of links. another thing is that the open button is moved into the <nav>-element. this makes it so that if someone were to navigate to the <nav>-element they’d be able open the menu from there.	2025-05-05 22:45:59 +02:00
RXP	d310cf4fb9	Merge pull request 'Refactor home search' (#21 ) from moiety/search into develop Reviewed-on: #21 Reviewed-by: RXP <ro@noreply.koodu.h-i.works>	2025-05-05 22:44:21 +02:00
Zoë	fed8748923	refactor: rework the search form with CSS Grid	2025-05-05 22:40:59 +02:00
Zoë	04ac27ea04	fix: only transition form control colors the blanket statement `all` causes some weird animations when resizing the page. setting this to only transition specific properties fixes this.	2025-05-05 22:40:59 +02:00
Zoë	4dafad447d	fix: set accessible name for search button also changes the CSS for the text transform	2025-05-05 22:40:59 +02:00
Zoë	d165d0c2bd	feat: replace search icon with an SVG this change allows us to use the font colour for the icon. it might also be nice to use a sprite.svg for all icons. this would use the same <use> mechanism as i did here. this also optimises the SVG a bit	2025-05-05 22:40:59 +02:00
Zoë	3e070676e4	feat: add accessible form element focus indicator adds a focus indicator that passes the accessibility requirements WCAG 2.2: §1.4.11 & §2.4.7	2025-05-05 22:40:59 +02:00
Zoë	c9c3b88f4d	style: apply editorconfig	2025-05-05 22:40:59 +02:00
ro	66b43b2d4e	manual edit for pr #13 pr was old has a hell, so just made the change manually to avoid updating a super old branch	2025-05-05 14:35:58 -06:00
ro	c2be80c005	removed CSV listing if not CSV present when reading sources, CSV file were being listed as 'none' when going through the loop and no file was present. commented that part out so 'none' is not being repeated	2025-05-05 14:29:25 -06:00
RXP	7cdd284968	Merge pull request 'fix: set alt text for the logo' (#17 ) from moiety/logo-alt into develop Reviewed-on: #17 Reviewed-by: RXP <ro@noreply.koodu.h-i.works>	2025-05-05 22:27:32 +02:00
RXP	7f7f324163	Merge branch 'develop' into moiety/logo-alt	2025-05-05 22:27:21 +02:00
RXP	67d40bd166	Merge pull request 'fix: removes an errand `<body>`-tag' (#20 ) from moiety/body into develop Reviewed-on: #20 Reviewed-by: RXP <ro@noreply.koodu.h-i.works>	2025-05-05 22:17:48 +02:00
RXP	aeaca3e0f0	Merge branch 'develop' into moiety/body	2025-05-05 22:17:34 +02:00
RXP	0ad5208638	Merge pull request 'Refactor: about page' (#23 ) from moiety/about into develop Reviewed-on: #23 Reviewed-by: RXP <ro@noreply.koodu.h-i.works>	2025-05-05 22:13:35 +02:00
RXP	8ed702bd59	Merge branch 'develop' into moiety/about	2025-05-05 22:12:04 +02:00
RXP	a0fee9b6b1	Merge pull request 'Refactor index meta' (#22 ) from moiety/infex-meta into develop Reviewed-on: #22 Reviewed-by: RXP <ro@noreply.koodu.h-i.works>	2025-05-05 22:08:45 +02:00
Zoë	cf11d246d1	refactor: current sources changes: - `<strong>` → `<h3>` - add a `.strong` class to mimic the `<strong>` behaviour - wrap lists in `<ul>` - provide feedback when no sources are available	2025-05-02 20:58:16 +02:00
Zoë	2c88d45e52	style: make indentation consistent also adds some HTML tags here and there but doesn’t change any content.	2025-05-02 20:37:34 +02:00
Zoë	5515503117	fix: set meta-index padding	2025-05-02 19:08:06 +02:00
Zoë	0f16b275a0	refactor: use a <table>-element for index-meta	2025-05-02 19:00:21 +02:00
Zoë	d138198305	feat: add visually-hidden utility	2025-05-02 18:54:51 +02:00
Zoë	c0e05c13e6	fix: removes an errand `<body>`-tag also adds a new line at eof and trims some spaces	2025-05-02 00:50:00 +02:00
Zoë	dbea3ff219	fix: set alt text for the logo	2025-05-02 00:13:32 +02:00