projects/thebadspace
projects/thebadspace
1
0
Fork 2
Code Issues 11 Pull requests 1 Projects 1 Releases 3 Packages Wiki Activity

Updated Location Page design

Browse source 
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.
This commit is contained in:
ro 2024-01-26 14:50:20 -06:00
parent c13f144e20
commit 0785e76df6
4 changed files with 69 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
public/assets/css/front/location.css
View file

@ -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;
top: 10px;
width: 35px;
position: relative;
}

4
public/assets/css/global/typography.css
View file

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

5
public/assets/images/global/heat.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

35
resources/views/front/location.blade.php
View file

@ -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 />
<strong>Total Actions:</strong> {{$actions}}/{{$sources_count}}<br />
<img class="rating-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
<strong>Suspended: {{$location->block_count}}</strong>
@php
$action = $location->block_count + $location->silence_count;
$rating = ($action / $sources_count)*100;
@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 />
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>
<br />
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>