Updated Location Page design

Updated the design for pages displaying information about specifiic
locations to clearly display heat rating, silence and suspeneded
statistics.

Also inlcude a descriptor for heat rating.

public/assets/css/front/location.css

@@ -14,8 +14,43 @@ section[role="location"] img {
   vertical-align: top;
 }
 
+div.location-rating {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  width: 98%;
+  font-weight: 500;
+  font-size: 0.8em;
+  color: var(--secondary);
+}
+
+div.location-rating > div {
+  border-radius: 3px;
+  color: var(--primary);
+  padding: 5px 5px 0;
+}
+
+div.location-rating > div:nth-child(1) {
+  background: var(--secondary);
+}
+
+div.location-rating > div:nth-child(2) {
+  background: var(--silence);
+}
+
+div.location-rating > div:nth-child(3) {
+  background: var(--suspend);
+}
+
+div.location-rating > div > span {
+  position: relative;
+  top: 6px;
+  float: right;
+  width: 80%;
+  text-align: center;
+}
+
 .rating-icon {
-  width: 45px;
+  width: 35px;
-  top: 10px;
   position: relative;
 }

public/assets/css/global/typography.css

@@ -63,6 +63,6 @@ h2 {
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 1em;
-  font-weight: 300;
+  font-weight: 500;
 }

public/assets/images/global/heat.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.4.3 -->
+<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+    <path id="Ellipse" fill="#efebe3" stroke="none" d="M 250 500 C 111.928947 500 0 388.071045 0 250 C 0 111.928955 111.928947 0 250 0 C 388.071045 0 500 111.928955 500 250 C 500 388.071045 388.071045 500 250 500 Z M 249.5 425.849609 C 334.610199 425.849609 403 351.977203 403 264.537109 C 403 244.390259 393.74881 215.814362 379.837891 187.855469 C 365.721375 159.485382 345.643799 129.607941 321.933594 106.994141 C 316.519958 101.854614 308.159698 101.854797 302.746094 106.925781 C 293.494965 115.697205 284.928558 126.45636 277.390625 136.324219 C 260.807159 115.62915 243.057907 96.510132 224.144531 78.761719 C 218.799438 73.759277 210.509155 73.690887 205.164063 78.693359 C 173.230606 108.296906 146.230286 141.942657 127.111328 174.21875 C 108.197952 206.015137 96 238.15448 96 264.46875 C 96 351.908844 163.43045 425.849609 249.5 425.849609 Z M 250.664063 360.0625 C 207.423721 360.0625 172.750168 332.241577 172.681641 285.300781 C 172.681641 264.674225 184.33017 246.309418 207.492188 217.185547 C 211.877914 211.7034 220.102753 211.771759 224.419922 217.253906 C 235.932419 231.850098 256.14621 257.546875 267.453125 271.9375 C 271.701782 277.351105 279.858093 277.489319 284.380859 272.28125 L 301.648438 252.203125 C 306.102661 246.995087 313.98465 247.404846 317.068359 253.572266 C 334.405609 285.231598 326.660309 325.525024 297.810547 345.671875 C 283.35141 355.265625 268.001312 360.0625 250.664063 360.0625 Z"/>
+</svg>

resources/views/front/location.blade.php

@@ -6,25 +6,40 @@
     @parent
     <section>
       <article>
-        <h1 class="location-title">{{$title}}</h1>
         <h2>Description</h2>
         {{$location->description}}<br />
-        <h2>Screens</h2>
+        <h2>References</h2>
+        <h3>Images</h3>
         @if($images != null)
           @foreach($images as $image)
             <a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
             </a>
           @endforeach
         @endif
-        <br />
+        @php
-        <strong>Total Actions:</strong> {{$actions}}/{{$sources_count}}<br />
+          $action = $location->block_count + $location->silence_count;
-        <img class="rating-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
+          $rating = ($action / $sources_count)*100;
-        <strong>Suspended: {{$location->block_count}}</strong>
+        @endphp
+        <h3>Links</h3>
+        <div class="location-rating">
+          <div>
+            <img class="rating-icon" src="/assets/images/global/heat.svg" title="heat-rating" />
+            <span>RATING: {{$rating}}%</span>
+          </div>
+          <div>
+            <img class="rating-icon" src="/assets/images/global/status-silence.svg" title="silenced" />
+            <span>SILENCED: {{$location->silence_count}}</span>
+          </div>
+          <div>
+            <img class="rating-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
+            <span>SUSPENDED: {{$location->block_count}}</span>
+          </div>
+        </div>
 
-        <img class="rating-icon" src="/assets/images/global/status-silence.svg" title="silenced" />
+
-        <strong>Silenced: {{$location->silence_count}}</strong>
+
-        <br /><br />
+        <br />
-        Total Actions represent the number of actions, silences or suspensions, that have been taken against an instance by <a href="/about#how">Current Sources</a>
+        Heat Rating is the percentage of <a href="/about#how">Current Sources</a> that have taken action against an instance. The higher the number of Sources that have silenced and/or suspended an instance, the higher the Heat Rating.
 
         <br />UPDATED : {{$updated}}
       </article>