diff options
Diffstat (limited to 'resources/views/cinema.blade.php')
| -rw-r--r-- | resources/views/cinema.blade.php | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/resources/views/cinema.blade.php b/resources/views/cinema.blade.php new file mode 100644 index 0000000..bc08fc8 --- /dev/null +++ b/resources/views/cinema.blade.php @@ -0,0 +1,194 @@ +@extends('layouts.app') + +@section('styles') +@include ('layouts.footer-style') + +html { + height: inherit; +} + +.movie-grid { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-top: 20px; +} + +.movie-card { + flex: 1 1 280px; + min-width: 250px; + max-width: 320px; +} + +.movie-card .poster { + width: 100%; + aspect-ratio: 2 / 3; + object-fit: cover; + background-color: #333; + border-radius: 4px 4px 0 0; +} + +.movie-card .year { + color: #868e96; + font-size: 0.85rem; +} + +.movie-card .rating { + font-size: 0.9rem; + color: #868e96; +} + +.movie-card .synopsis { + font-size: 0.875rem; + color: #6c757d; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.movie-card h1 { + font-size: 1rem; + padding: 10px 12px 4px; + margin: 0; +} + +.movie-card h1 a { + color: inherit; + text-decoration: none; +} + +.movie-card h1 a:hover { + text-decoration: underline; +} + +.movie-card .card-body { + padding: 0 12px 12px; +} + +.no-poster { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + aspect-ratio: 2 / 3; + background-color: #495057; + color: #adb5bd; + font-size: 3rem; + border-radius: 4px 4px 0 0; +} + +.permalink:hover { + text-decoration: none; +} + +@endsection + +@section('content') +<div class="container"> + <div style="margin-top: 20px"></div> + + <div class="card"> + <h1 class="card-header"> + @if ( isset($search_query) && $search_query != '' ) + Movies matching <strong>"{{ $search_query }}"</strong> + @if ( "1" != $movies->currentPage() ) + (Page {{ $movies->currentPage() }}) + @endif + @else + Movies + @if ( "1" != $movies->currentPage() ) + (Page {{ $movies->currentPage() }}) + @endif + @endif + </h1> + <div class="card-body"> + <p class="card-text"> + @if ( isset($search_query) && $search_query != '' ) + Found {{ $count }} movies matching <strong>"{{ $search_query }}"</strong>. + @else + Browse {{ number_format($count) }} movies from the database, mentioned on Hacker News, ranked by rating or popularity. + @endif + </p> + <form class="form-inline" action="{{ route('cinema.search') }}" method="GET"> + <input name="q" class="form-control mr-sm-2" type="text" placeholder="Search movies..." aria-label="Search" value="{{ isset($search_query) ? $search_query : '' }}"> + <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> + </form> + <div class="mt-2"> + <span class="text-muted">Sort by:</span> + @foreach ([ + ['ref_count', 'Hacker News Mentions'], + ['score', 'Rating'], + ['num_votes', 'Number of Votes'], + ['num_accolades', 'Accolades'], + ['start_year', 'Release Date'], + ] as [$key, $label]) + @if ( (isset($order) ? $order : 'ref_count') == $key ) + @if ( (isset($direction) ? $direction : 'desc') == 'desc' ) + <a class="btn btn-sm btn-primary my-1" href="{{ url()->current() }}?order={{ $key }}&direction=asc">{{ $label }} ▲</a> + @else + <a class="btn btn-sm btn-primary my-1" href="{{ url()->current() }}?order={{ $key }}&direction=desc">{{ $label }} ▼</a> + @endif + @else + <a class="btn btn-sm btn-outline-secondary my-1" href="{{ url()->current() }}?order={{ $key }}&direction=desc">{{ $label }}</a> + @endif + @endforeach + </div> + </div> + </div> + + @if ( 0 != $movies->count() ) + <div class="movie-grid"> + @foreach( $movies as $movie) + <div class="card movie-card"> + <a href="{{ route('cinema.show', $movie->imdb_id) }}"> + @if ( ! empty($movie->poster_url) ) + <img class="poster" src="{{ $movie->poster_url }}" alt="{{ $movie->primary_title }} poster" loading="lazy"> + @else + <div class="no-poster">🎬</div> + @endif + </a> + <h1> + <a href="{{ route('cinema.show', $movie->imdb_id) }}"> + {{ $movie->primary_title }} + </a> + </h1> + <div class="card-body"> + <div> + @if ( ! is_null($movie->start_year) ) + <span class="year">{{ $movie->start_year }}</span> + @endif + @if ( ! is_null($movie->runtime_minutes) ) + @if ( ! is_null($movie->start_year) ) + <span class="year"> · </span> + @endif + <span class="year">{{ $movie->runtime_minutes }} min</span> + @endif + </div> + <div class="mt-1"> + @if ( ! is_null($movie->average_rating) ) + <span class="rating">⭐ {{ number_format($movie->average_rating, 1) }}</span> + @if ( ! is_null($movie->num_votes) ) + <span class="year"> ({{ number_format($movie->num_votes) }} votes)</span> + @endif + @endif + </div> + @if ( ! empty($movie->synopsis) ) + <p class="card-text synopsis mt-2"> + {{ strip_tags($movie->synopsis) }} + </p> + @endif + </div> + </div> + @endforeach + </div> + + <div style="margin-bottom: 20px"></div> + {{ $movies->appends(Request::input())->links() }} + @endif +</div> +@endsection + +@section('footer') + @include ('layouts.footer') +@endsection |