make it more mobile friendly

1 files changed, 29 insertions, 12 deletions

diff --git a/resources/views/list_anime.blade.php b/resources/views/list_anime.blade.php
index 65b45d5..459203d 100644
--- a/resources/views/list_anime.blade.php
+++ b/resources/views/list_anime.blade.php
@@ -3,15 +3,30 @@
 @section('content')
 <div class="container" id="index">
 
-<h1>{{ $title }}</h1>
+<div class="jumbotron">
+	<h1>{{ $title }}</h1>
+		@if ( "airing_anime" == \Request::route()->getName() )
+			<p class="lead text-muted">
+				@php echo getSeason() @endphp @php echo date("Y") @endphp
+			</p>
+		@endif
+</div>
 	<div class="row">
 @foreach($all_anime as $anime)
-<pre>
-<?php //var_dump($anime); ?>
-</pre>
-	<div class="col-sm-4 col-lg-3">
-		<div class="card" style="margin-bottom: 10px;
-				@if( "surprising_anime" == \Request::route()->getName())
+@if ( $anime->season_name != getSeason() )
+	@once
+	</div>
+
+	<div  class="jumbotron">
+		<h2>Continuing from earlier Seasons</h2>
+	</div>
+
+	<div class="row">
+	@endonce
+@endif
+	<div class="col-sm-12 col-lg-3 d-flex align-items-stretch">
+		<div class="card" style="margin-bottom: 10px; width: 100%;
+				@if( "surprising_anime" == \Request::route()->getName() )
 					@if ( 0 < $anime->score_today - $anime->score_begin )
 						border-color: green;
 					@else
@@ -19,9 +34,9 @@
 					@endif
 				@endif
 		">
-			<div class="card-body">
+			<div class="card-body d-flex flex-column">
 			
-				<h5 class="card-title">{{ $anime->title }} @if ( ! compare($anime->title, $anime->title_pref) )<br><span class="text-muted">{{ $anime->title_pref }}</span>@endif</h5>
+				<h5 class="card-title">{{ $anime->title }} @if ( ! compare($anime->title, $anime->title_pref) )<br><span class="text-muted hide-sm">{{ $anime->title_pref }}</span>@endif</h5>
 				<h6 class="card-subtitle mb-2 text-muted">
 					score: {{ $anime->score_today }}, members: {{ $anime->members }}
 					@if( "surprising_anime" == \Request::route()->getName())
@@ -36,11 +51,13 @@
 				</h6>
 				<p class="card-text">
 					<a href="/anime/{{ $anime->mal_id}}" title="Click for more data">
-						<img src="{{ $anime->image_url }}" class="img-fluid float-left" style="margin-bottom: 10px; margin-right: 10px;">
+						<img src="{{ $anime->image_url }}" class="img-fluid float-left-xl" style="margin-bottom: 10px; margin-right: 10px;">
 					</a>
-					{!! replaceSpecialChars(e($anime->synopsis)) !!}
+					<span class="hide-synopsis-sm">
+						{!! replaceSpecialChars(e($anime->synopsis)) !!}
+					</span>
 				</p>
-				<a href="/anime/{{ $anime->mal_id}}" class="card-link" title="Click for more data">More</a>
+				<a href="/anime/{{ $anime->mal_id}}" class="card-link btn btn-primary mt-auto" title="Click for more data">More</a>
 			</div>
 		</div>
 	</div>