Link Updates, Recent Links on Index clean up

Started the front end refresh by starting to plug in the new design on
the index page. The search methodology was still not consistent, so that
process was cleaned up to display what is actually being tracked based
on the two action criteria, then updating the design for the location
links to be clear and display the heat rating.

Added a repo link to the About section.

app/Http/Controllers/FrontIndexController.php

@@ -13,17 +13,23 @@ class FrontIndexController extends Controller
 
     public function start()
     {
-        $locations = Location::where("active", true)->get();
+        $sources   = Source::where("active", true)->get();
-        $count     = count($locations);
+        $locations = Location::where("active", true)->orderByDesc('updated_at')->get();
-        $recent    = Location::where("active", true)
+        $list      = [];
+        foreach ($locations as $location) {
+            if (($location->block_count + $location->silence_count) > 2) {
+                array_push($list, $location);
+            }
+        }
+
+        $recentList = Location::where("active", true)
             ->where('block_count', '>', 2)
             ->limit(10)->orderByDesc('updated_at')->get();
 
-        //$result = DB::select("SELECT * FROM searchlocations('$terms')");
-
         return view('front.index', [
-            'count'  => $count,
+            'count'   => count($list),
-            'recent' => $recent,
+            'sources' => count($sources),
+            'recent'  => $list,
             'title'   => "The Bad Space"
         ]);
     }

public/assets/css/front/listing.css

@@ -37,7 +37,47 @@ section[role="listings"] div[role="paginate"] span {
 
 a.list-link {
   display: grid;
-  grid-template-columns: 30px 50px 30px 50px 300px;
+  grid-template-columns: 70px 80% 80px 80px;
+  gap: 10px;
   width: 80%;
   height: 45px;
+  padding-bottom: 20px;
+}
+
+a.list-link > .item-rating {
+  background: var(--secondary);
+  border-radius: 3px;
+  color: var(--white);
+  font-weight: 500;
+  padding: 10px;
+}
+
+a.list-link > .item-name {
+  background: var(--white);
+  border-radius: 3px;
+  color: var(--black);
+  font-weight: 400;
+  padding: 9px 5px;
+}
+
+a.list-link > .item-silence {
+  background: var(--silence);
+  border-radius: 3px;
+  color: var(--black);
+  font-weight: 500;
+  padding: 10px;
+}
+
+a.list-link > .item-block {
+  background: var(--suspend);
+  border-radius: 3px;
+  color: var(--black);
+  font-weight: 500;
+  padding: 10px;
+}
+
+a.list-link > .item-silence > .item-icon,
+a.list-link > .item-block > .item-icon {
+  width: 30px;
+  vertical-align: top;
 }

public/assets/css/global/colors.css

@@ -2,12 +2,12 @@
   /* BASE COLORS */
   --primary: #140c08;
   --secondary: #d66365;
-  --highlight: #69b04f;
+  --highlight: #5c934c;
   --white: #efebe3;
   --grey: #abb7b7;
   --black: #32302f;
   --error: #b62520;
-  --silence: #ea6010;
+  --silence: #bd8d61;
-  --suspend: #fb263a;
+  --suspend: #bd6190;
   --primary-rgb: 20 13 13;
 }

public/assets/images/global/status-silence.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated by Pixelmator Pro 3.3.8 -->
+<!-- Generated by Pixelmator Pro 3.4.3 -->
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
-    <path id="path1" fill="#ea6010" stroke="none" d="M 17 3.34 C 21.1674 5.746208 23.030024 10.779379 21.433001 15.318825 C 19.835976 19.858273 15.232252 22.616514 10.476249 21.883377 C 5.720245 21.15024 2.160861 17.133654 2.005 12.324 L 2 12 L 2.005 11.676 C 2.118919 8.162982 4.068822 4.967705 7.140892 3.259882 C 10.212963 1.552061 13.95609 1.582479 17 3.34 Z M 15 14 L 9 14 L 8.883 14.007 C 8.37995 14.066836 8.001114 14.493402 8.001114 15 C 8.001114 15.506598 8.37995 15.933164 8.883 15.993 L 9 16 L 15 16 L 15.117 15.993 C 15.62005 15.933164 15.998886 15.506598 15.998886 15 C 15.998886 14.493402 15.62005 14.066836 15.117 14.007 L 15 14 Z M 9.01 9 L 8.883 9.007 C 8.37995 9.066836 8.001114 9.493402 8.001114 10 C 8.001114 10.506598 8.37995 10.933164 8.883 10.993 L 9 11 L 9.127 10.993 C 9.630051 10.933164 10.008885 10.506598 10.008885 10 C 10.008885 9.493402 9.630051 9.066836 9.127 9.007 L 9.01 9 Z M 15.01 9 L 14.883 9.007 C 14.37995 9.066836 14.001114 9.493402 14.001114 10 C 14.001114 10.506598 14.37995 10.933164 14.883 10.993 L 15 11 L 15.127 10.993 C 15.630051 10.933164 16.008886 10.506598 16.008886 10 C 16.008886 9.493402 15.630051 9.066836 15.127 9.007 L 15.01 9 Z"/>
+    <path id="path1" fill="#efebe3" stroke="none" d="M 17 3.34 C 21.1674 5.746208 23.030024 10.779379 21.433001 15.318825 C 19.835976 19.858273 15.232252 22.616514 10.476249 21.883377 C 5.720245 21.15024 2.160861 17.133654 2.005 12.324 L 2 12 L 2.005 11.676 C 2.118919 8.162982 4.068822 4.967705 7.140892 3.259882 C 10.212963 1.552061 13.95609 1.582479 17 3.34 Z M 15 14 L 9 14 L 8.883 14.007 C 8.37995 14.066836 8.001114 14.493402 8.001114 15 C 8.001114 15.506598 8.37995 15.933164 8.883 15.993 L 9 16 L 15 16 L 15.117 15.993 C 15.62005 15.933164 15.998886 15.506598 15.998886 15 C 15.998886 14.493402 15.62005 14.066836 15.117 14.007 L 15 14 Z M 9.01 9 L 8.883 9.007 C 8.37995 9.066836 8.001114 9.493402 8.001114 10 C 8.001114 10.506598 8.37995 10.933164 8.883 10.993 L 9 11 L 9.127 10.993 C 9.630051 10.933164 10.008885 10.506598 10.008885 10 C 10.008885 9.493402 9.630051 9.066836 9.127 9.007 L 9.01 9 Z M 15.01 9 L 14.883 9.007 C 14.37995 9.066836 14.001114 9.493402 14.001114 10 C 14.001114 10.506598 14.37995 10.933164 14.883 10.993 L 15 11 L 15.127 10.993 C 15.630051 10.933164 16.008886 10.506598 16.008886 10 C 16.008886 9.493402 15.630051 9.066836 15.127 9.007 L 15.01 9 Z"/>
 </svg>

public/assets/images/global/status-suspend.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated by Pixelmator Pro 3.3.8 -->
+<!-- Generated by Pixelmator Pro 3.4.3 -->
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
-    <path id="path1" fill="#fb263a" stroke="none" d="M 17 3.34 C 21.1674 5.746208 23.030024 10.779379 21.433001 15.318825 C 19.835976 19.858273 15.232252 22.616514 10.476249 21.883377 C 5.720245 21.15024 2.160861 17.133654 2.005 12.324 L 2 12 L 2.005 11.676 C 2.118919 8.162982 4.068822 4.967705 7.140892 3.259882 C 10.212963 1.552061 13.95609 1.582479 17 3.34 Z M 15.57 13.502 C 13.250918 13.340779 10.940379 13.918414 8.97 15.152 C 8.501662 15.444711 8.359289 16.061663 8.652 16.530001 C 8.944711 16.998337 9.561663 17.140711 10.03 16.848 C 11.642129 15.838702 13.53257 15.366092 15.43 15.498 C 15.98118 15.53666 16.459339 15.121181 16.497999 14.57 C 16.536659 14.01882 16.12118 13.54066 15.57 13.502 Z M 9.01 9 L 8.883 9.007 C 8.37995 9.066836 8.001114 9.493402 8.001114 10 C 8.001114 10.506598 8.37995 10.933164 8.883 10.993 L 9 11 L 9.127 10.993 C 9.630051 10.933164 10.008885 10.506598 10.008885 10 C 10.008885 9.493402 9.630051 9.066836 9.127 9.007 L 9.01 9 Z M 15.01 9 L 14.883 9.007 C 14.37995 9.066836 14.001114 9.493402 14.001114 10 C 14.001114 10.506598 14.37995 10.933164 14.883 10.993 L 15 11 L 15.127 10.993 C 15.630051 10.933164 16.008886 10.506598 16.008886 10 C 16.008886 9.493402 15.630051 9.066836 15.127 9.007 L 15.01 9 Z"/>
+    <path id="path1" fill="#efebe3" stroke="none" d="M 17 3.34 C 21.1674 5.746208 23.030024 10.779379 21.433001 15.318825 C 19.835976 19.858273 15.232252 22.616514 10.476249 21.883377 C 5.720245 21.15024 2.160861 17.133654 2.005 12.324 L 2 12 L 2.005 11.676 C 2.118919 8.162982 4.068822 4.967705 7.140892 3.259882 C 10.212963 1.552061 13.95609 1.582479 17 3.34 Z M 15.57 13.502 C 13.250918 13.340779 10.940379 13.918414 8.97 15.152 C 8.501662 15.444711 8.359289 16.061663 8.652 16.530001 C 8.944711 16.998337 9.561663 17.140711 10.03 16.848 C 11.642129 15.838702 13.53257 15.366092 15.43 15.498 C 15.98118 15.53666 16.459339 15.121181 16.497999 14.57 C 16.536659 14.01882 16.12118 13.54066 15.57 13.502 Z M 9.01 9 L 8.883 9.007 C 8.37995 9.066836 8.001114 9.493402 8.001114 10 C 8.001114 10.506598 8.37995 10.933164 8.883 10.993 L 9 11 L 9.127 10.993 C 9.630051 10.933164 10.008885 10.506598 10.008885 10 C 10.008885 9.493402 9.630051 9.066836 9.127 9.007 L 9.01 9 Z M 15.01 9 L 14.883 9.007 C 14.37995 9.066836 14.001114 9.493402 14.001114 10 C 14.001114 10.506598 14.37995 10.933164 14.883 10.993 L 15 11 L 15.127 10.993 C 15.630051 10.933164 16.008886 10.506598 16.008886 10 C 16.008886 9.493402 15.630051 9.066836 15.127 9.007 L 15.01 9 Z"/>
 </svg>

resources/views/front/about.blade.php

@@ -18,7 +18,7 @@
         </p>
         <p>
           Technical support provided by
-          <a href="https://roiskinda.cool/profile.html">Ro</a>.
+          <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>
         <h2 id="how">How does it work?</h2>
         <p>The Bad Space is a collaboration of instances committed to actively moderating against racism, sexism, heterosexism, transphobia, ableism, casteism, or religion.</p>

resources/views/front/index.blade.php

@@ -17,27 +17,38 @@
           <strong>
             Found {{count($results)}} results:
           </strong><br>
-          @foreach($results as $location)
+          @for($i = 0; $i < 10; $i++)
-            <a role="listitem" href="/location/{{$location->uuid}}">{{$location->name}}</a></a><br />
+            <a role="listitem" href="/location/{{$recent[$i]->uuid}}">{{$recent[$i]->name}}</a></a><br />
-          @endforeach
+          @endfor
         </article>
       </section>
     @endisset
     <section class="index-meta">
       <article>
+        <h2>Recent Updates</h2>
+        @for($i = 0; $i < 10; $i++)
+
+          @php
+            $action = $recent[$i]->block_count + $recent[$i]->silence_count;
+            $rating = ($action / $sources)*100;
+          @endphp
+          <a class="list-link" role="listitem" href="/location/{{$recent[$i]->uuid}}">
+            <span class="item-rating">{{$rating}}%</span>
+            <label class="item-name">{{$recent[$i]->name}}</label>
+            <div class="item-silence">
+              <img class="item-icon" src="/assets/images/global/status-silence.svg" title="silenced" />
+              {{$recent[$i]->silence_count}}
+            </div>
+            <div class="item-block">
+              <img class="item-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
+              {{$recent[$i]->block_count}}
+            </div>
+          </a>
+        @endfor
         <h2>Bad Space Stats</h2>
         <strong>{{$count}}</strong><br />
         Instances being tracked.
-        <h2>Recent Updates</h2>
+
-        @foreach($recent as $location)
-          <a class="list-link" role="listitem" href="/location/{{$location->uuid}}">
-            <span>{{$location->block_count}}</span>
-            <img class="menu-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
-            <span>{{$location->silence_count}}</span>
-            <img class="menu-icon" src="/assets/images/global/status-silence.svg" title="silenced" />
-            <label>{{$location->name}}</label>
-          </a>
-        @endforeach
       </article>
     </section>
   @endsection