On air indicator in programmering

This commit is contained in:
NH Gooi
2024-09-23 22:02:53 +02:00
parent cff9948dda
commit 7f07a28b98
2 changed files with 17 additions and 5 deletions

14
public/css/style.css vendored
View File

@@ -1320,8 +1320,10 @@ div.pp_default .pp_close:hover {
float: left;
margin-right: 10px;
}
.post_tags li a {
.post_tags li a,
#schedule .onair {
display: block;
width: 4rem;
padding: 6px 15px 7px;
border-radius: 3px;
background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
@@ -1337,6 +1339,16 @@ div.pp_default .pp_close:hover {
#schedule a {
text-decoration: none;
}
@keyframes tilt-shaking {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.onair {
animation: tilt-shaking 1s linear infinite;
}
#schedule .program-title {
font-family: Montserrat, serif;
font-size: 14px;

View File

@@ -9,14 +9,14 @@
<a class="box full-width full-height" href="{{route('programma') . $item['program']->url}}"
title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
<img src="{{$item['program']->image ?? 'images/noimage.png'}}">
@if($isCurrent)
<div href="{{route('luister.live')}}" class="onair" title="Nu live!">Nu live!</div>
@endif
<div class="program-title">
@if($isCurrent)
<div class="current-marker"><span>On air</span></div>
@endif
{{$item['program']->name}}
</div>
<div class="program-times"><i class="fa-regular fa-clock"></i>
{{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}}
{{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}}
</div>
</a>
</div>