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.
This commit is contained in:
parent
c13f144e20
commit
0785e76df6
4 changed files with 69 additions and 14 deletions
|
@ -14,8 +14,43 @@ section[role="location"] img {
|
||||||
vertical-align: top;
|
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 {
|
.rating-icon {
|
||||||
width: 45px;
|
width: 35px;
|
||||||
top: 10px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -63,6 +63,6 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.5em;
|
font-size: 1em;
|
||||||
font-weight: 300;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
5
public/assets/images/global/heat.svg
Normal file
5
public/assets/images/global/heat.svg
Normal 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>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -6,25 +6,40 @@
|
||||||
@parent
|
@parent
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<h1 class="location-title">{{$title}}</h1>
|
|
||||||
<h2>Description</h2>
|
<h2>Description</h2>
|
||||||
{{$location->description}}<br />
|
{{$location->description}}<br />
|
||||||
<h2>Screens</h2>
|
<h2>References</h2>
|
||||||
|
<h3>Images</h3>
|
||||||
@if($images != null)
|
@if($images != null)
|
||||||
@foreach($images as $image)
|
@foreach($images as $image)
|
||||||
<a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
|
<a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
|
||||||
</a>
|
</a>
|
||||||
@endforeach
|
@endforeach
|
||||||
@endif
|
@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" />
|
<img class="rating-icon" src="/assets/images/global/status-silence.svg" title="silenced" />
|
||||||
<strong>Silenced: {{$location->silence_count}}</strong>
|
<span>SILENCED: {{$location->silence_count}}</span>
|
||||||
<br /><br />
|
</div>
|
||||||
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>
|
<div>
|
||||||
|
<img class="rating-icon" src="/assets/images/global/status-suspend.svg" title="suspended" />
|
||||||
|
<span>SUSPENDED: {{$location->block_count}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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}}
|
<br />UPDATED : {{$updated}}
|
||||||
</article>
|
</article>
|
||||||
|
|
Loading…
Reference in a new issue