From 3f0368713366cfb619fa7ef18a873c09925dafab Mon Sep 17 00:00:00 2001
From: horus
Date: Fri, 18 Sep 2020 19:42:40 +0200
Subject: make it more mobile friendly

---
 public/css/app.css                   |  26 ++++++++++++++++++++++
 public/img/sakamoto-mobile.jpg       | Bin 0 -> 30942 bytes
 resources/sass/app.scss              |  18 +++++++++++++++
 resources/views/list_anime.blade.php |  41 +++++++++++++++++++++++++----------
 4 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 public/img/sakamoto-mobile.jpg

diff --git a/public/css/app.css b/public/css/app.css
index c4b929a..7fe76d6 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10915,3 +10915,29 @@ body {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
+.float-left-xl {
+  float: left !important;
+}
+
+/*@media( max-width: 768px ) {*/
+
+@media (max-width: 500px) {
+  .hide-sm {
+    display: none;
+  }
+
+  .float-left-xl {
+    float: inherit !important;
+  }
+
+  .hide-synopsis-sm {
+    display: none;
+  }
+
+  .hide-synopsis-sm::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
diff --git a/public/img/sakamoto-mobile.jpg b/public/img/sakamoto-mobile.jpg
new file mode 100644
index 0000000..5d055f8
Binary files /dev/null and b/public/img/sakamoto-mobile.jpg differ
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index bd9430b..521c226 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -34,3 +34,21 @@ body {
 .bg-white-transparent {
 	background-color: rgb(255,255,255,0.5);
 }
+
+.float-left-xl {
+	float: left !important;
+}
+
+/*@media( max-width: 768px ) {*/
+@media( max-width: 500px ) {
+	.hide-sm {
+		display: none;
+	}
+	.float-left-xl {
+		float: inherit !important;
+	}
+	.hide-synopsis-sm {
+		display: none;
+		@include clearfix;
+	}
+}
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>
-- 
cgit v1.2.3