From b7323b93e6ed353d6b668c6e9751914bed3496b5 Mon Sep 17 00:00:00 2001
From: "Timothy J. Warren" <tim@timshomepage.net>
Date: Thu, 18 Jun 2015 10:30:28 -0400
Subject: [PATCH] Resize images on caching

---
 app/base/BaseModel.php   |  29 +++++-
 composer.json            |   3 +-
 public/css/base.css      | 218 +++++++++++++++++++++------------------
 public/css/base.myth.css | 177 +++++++++++++++++++++++++++++++
 4 files changed, 323 insertions(+), 104 deletions(-)
 create mode 100644 public/css/base.myth.css

diff --git a/app/base/BaseModel.php b/app/base/BaseModel.php
index d9a6bc09..5d2b35bb 100644
--- a/app/base/BaseModel.php
+++ b/app/base/BaseModel.php
@@ -3,6 +3,8 @@
  * Base for base models
  */
 
+use abeautifulsite\SimpleImage;
+
 /**
  * Common base for all Models
  */
@@ -34,14 +36,16 @@ class BaseModel {
 	 */
 	public function get_cached_image($api_path, $series_slug, $type="anime")
 	{
+		$api_path = str_replace("jjpg", "jpg", $api_path);
 		$path_parts = explode('?', basename($api_path));
 		$path = current($path_parts);
 		$ext_parts = explode('.', $path);
 		$ext = end($ext_parts);
-		
+		/*$ext = $ext = strtolower(pathinfo($api_path, PATHINFO_EXTENSION));*/
+
 		// Workaround for some broken extensions
 		if ($ext == "jjpg") $ext = "jpg";
-		
+
 		// Failsafe for weird urls
 		if (strlen($ext) > 3) return $api_path;
 
@@ -71,9 +75,30 @@ class BaseModel {
 			{
 				throw new Exception("Couldn't cache images because they couldn't be downloaded.");
 			}
+
+			// Resize the image
+			if ($type == 'anime')
+			{
+				$resize_width = 220;
+				$resize_height = 319;
+				$this->_resize($cached_path, $resize_width, $resize_height);
+			}
 		}
 
 		return "/public/images/{$type}/{$cached_image}";
 	}
+
+	/**
+	 * Resize an image
+	 *
+	 * @param string $path
+	 * @param string $width
+	 * @param string $height
+	 */
+	private function _resize($path, $width, $height)
+	{
+		$img = new SimpleImage($path);
+		$img->resize($width,$height)->save();
+	}
 }
 // End of BaseModel.php
\ No newline at end of file
diff --git a/composer.json b/composer.json
index cbf24110..0e781e3d 100644
--- a/composer.json
+++ b/composer.json
@@ -4,6 +4,7 @@
 		"filp/whoops": "1.1.*",
 		"aura/router": "2.2.*",
 		"aviat4ion/query": "2.0.*",
-		"robmorgan/phinx": "*"
+		"robmorgan/phinx": "*",
+		"abeautifulsite/simpleimage": "*"
 	}
 }
\ No newline at end of file
diff --git a/public/css/base.css b/public/css/base.css
index 8e35cb10..59acd785 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -1,112 +1,125 @@
 body {
-	margin: 0.5em;
+  margin: 0.5em;
 }
 
 table {
-	width:85%;
-	margin: 0 auto;
+  width: 85%;
+  margin: 0 auto;
 }
 
 tbody > tr:nth-child(odd) {
-	background: #ddd;
+  background: #ddd;
 }
 
 .align_left {
-	text-align:left;
+  text-align: left;
 }
 
 .align_right {
-	text-align:right;
+  text-align: right;
 }
 
 .round_all {
-	border-radius:0.5em;
+  border-radius: 0.5em;
 }
 
 .round_top {
-	border-radius: 0;
-	border-top-right-radius:0.5em;
-	border-top-left-radius:0.5em;
+  border-radius: 0;
+  border-top-right-radius: 0.5em;
+  border-top-left-radius: 0.5em;
 }
 
 .round_bottom {
-	border-radius: 0;
-	border-bottom-right-radius:0.5em;
-	border-bottom-left-radius:0.5em;
+  border-radius: 0;
+  border-bottom-right-radius: 0.5em;
+  border-bottom-left-radius: 0.5em;
 }
 
 .media-wrap {
-	display:flex;
-	justify-content: center;
-	align-content: space-around;
-	align-items: center;
-	flex-wrap: wrap;
-	text-align:center;
-	margin:0 auto;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: space-around;
+  -ms-flex-line-pack: distribute;
+  align-content: space-around;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  text-align: center;
+  margin: 0 auto;
 }
 
 .media {
-	position:relative;
-	vertical-align:top;
-	display:inline-block;
-	text-align:center;
-	width:220px;
-	height:319px;
-	margin:0.25em;
+  position: relative;
+  vertical-align: top;
+  display: inline-block;
+  text-align: center;
+  width: 220px;
+  height: 319px;
+  margin: 0.25em;
 }
 
-	.name, .media_type, .airing_status, .user_rating, .completion, .age_rating {
-		text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
-		background: rgba(0, 0, 0, 0.45);
-		color: #fff;
-		padding:0.25em;
-		text-align:right;
-	}
+.name,
+.media_metadata > div,
+.medium_metadata > div,
+.row {
+  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  padding: 0.25em;
+  text-align: right;
+}
 
-	.media_type, .age_rating {
-		text-align:left;
-	}
+.media_type,
+.age_rating {
+  text-align: left;
+}
 
-	.media > .media_metadata {
-		position:absolute;
-		bottom:0;
-		right:0;
-	}
+.media > .media_metadata {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
 
-	.media > .medium_metadata {
-		position:absolute;
-		bottom: 0;
-		left:0;
-	}
+.media > .medium_metadata {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 
-	.media > .name {
-		position:absolute;
-		top: 0;
-	}
+.media > .name {
+  position: absolute;
+  top: 0;
+}
 
-		.media:hover > .name,
-		.media:hover > .media_metadata > div,
-		.media:hover > .medium_metadata > div,
-		.media:hover > .table .row
-		{
-			background:rgba(0,0,0,0.75);
-		}
-
-		.media > .name > a {
-			text-align:justify;
-			background:none;
-			color:#fff;
-			text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
-		}
+.media:hover > .name,
+.media:hover > .media_metadata > div,
+.media:hover > .medium_metadata > div,
+.media:hover > .table .row {
+  background: rgba(0,0,0,0.75);
+}
 
+.media > .name > a {
+  text-align: justify;
+  background: none;
+  color: #fff;
+  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+}
 
 /* -----------------------------------------------------------------------------
 	Anime-list-specific styles
 ------------------------------------------------------------------------------*/
+
 .anime .name {
-	text-align:center;
-	width:100%;
-	padding:0.5em 0.6em;;
+  text-align: center;
+  width: 100%;
+  padding: 0.5em 0.6em;
 }
 
 .anime .media_type,
@@ -114,35 +127,42 @@ tbody > tr:nth-child(odd) {
 .anime .user_rating,
 .anime .completion,
 .anime .age_rating {
-	background: none;
-	text-align:center;
+  background: none;
+  text-align: center;
 }
 
-
 .anime .table {
-	position:absolute;
-	bottom:0;
-	left:0;
-	width:100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
 }
 
 .anime .row {
-	width:100%;
-	background: rgba(0, 0, 0, 0.45);
-	display:table;
-	display:flex;
-	align-content:center;
-	justify-content: space-around;
-	text-align:center;
-	padding:0 inherit;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.45);
+  display: table;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  text-align: center;
+  padding: 0 inherit;
 }
 
 .anime .row > div {
-	font-size:0.8em;
-	display:flex-item;
-	align-self:center;
-	text-align:center;
-	vertical-align:middle;
+  font-size: 0.8em;
+  display: flex-item;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  text-align: center;
+  vertical-align: middle;
 }
 
 /* -----------------------------------------------------------------------------
@@ -150,22 +170,18 @@ tbody > tr:nth-child(odd) {
 ------------------------------------------------------------------------------*/
 
 .manga .media > .name {
-	padding:0.5em;
-	margin:1em;
+  padding: 0.5em;
+  margin: 1em;
 }
 
 .manga .media {
-	border:1px solid #ddd;
-	width:200px;
-	height:290px;
-	margin:0.25em;
-}
-
-.manga .completion::before {
-	content: "";
+  border: 1px solid #ddd;
+  width: 200px;
+  height: 290px;
+  margin: 0.25em;
 }
 
 .manga .media_metadata {
-	padding: 0.25em;
-	margin: 0.75em;
-}
+  padding: 0.25em;
+  margin: 0.75em;
+}
\ No newline at end of file
diff --git a/public/css/base.myth.css b/public/css/base.myth.css
new file mode 100644
index 00000000..91862b50
--- /dev/null
+++ b/public/css/base.myth.css
@@ -0,0 +1,177 @@
+:root {
+	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+	--title-overlay: rgba(0, 0, 0, 0.45);
+	--text-color: #ffffff;
+	--normal-padding: 0.25em;
+}
+
+body {
+	margin: 0.5em;
+}
+
+table {
+	width:85%;
+	margin: 0 auto;
+}
+
+tbody > tr:nth-child(odd) {
+	background: #ddd;
+}
+
+.align_left {
+	text-align:left;
+}
+
+.align_right {
+	text-align:right;
+}
+
+.round_all {
+	border-radius:0.5em;
+}
+
+.round_top {
+	border-radius: 0;
+	border-top-right-radius:0.5em;
+	border-top-left-radius:0.5em;
+}
+
+.round_bottom {
+	border-radius: 0;
+	border-bottom-right-radius:0.5em;
+	border-bottom-left-radius:0.5em;
+}
+
+.media-wrap {
+	display:flex;
+	justify-content: center;
+	align-content: space-around;
+	align-items: center;
+	flex-wrap: wrap;
+	text-align:center;
+	margin:0 auto;
+}
+
+.media {
+	position:relative;
+	vertical-align:top;
+	display:inline-block;
+	text-align:center;
+	width:220px;
+	height:319px;
+	margin: var(--normal-padding);
+}
+
+	.name,
+	.media_metadata > div,
+	.medium_metadata > div,
+	.row {
+		text-shadow: var(--shadow);
+		background: var(--title-overlay);
+		color: var(--text-color);
+		padding: var(--normal-padding);
+		text-align:right;
+	}
+
+	.media_type, .age_rating {
+		text-align:left;
+	}
+
+	.media > .media_metadata {
+		position:absolute;
+		bottom:0;
+		right:0;
+	}
+
+	.media > .medium_metadata {
+		position:absolute;
+		bottom: 0;
+		left:0;
+	}
+
+	.media > .name {
+		position:absolute;
+		top: 0;
+	}
+
+		.media:hover > .name,
+		.media:hover > .media_metadata > div,
+		.media:hover > .medium_metadata > div,
+		.media:hover > .table .row
+		{
+			background:rgba(0,0,0,0.75);
+		}
+
+		.media > .name > a {
+			text-align:justify;
+			background:none;
+			color:#fff;
+			text-shadow: var(--shadow);
+		}
+
+
+/* -----------------------------------------------------------------------------
+	Anime-list-specific styles
+------------------------------------------------------------------------------*/
+.anime .name {
+	text-align:center;
+	width:100%;
+	padding:0.5em 0.6em;;
+}
+
+.anime .media_type,
+.anime .airing_status,
+.anime .user_rating,
+.anime .completion,
+.anime .age_rating {
+	background: none;
+	text-align:center;
+}
+
+
+.anime .table {
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
+}
+
+.anime .row {
+	width:100%;
+	background: var(--title-overlay);
+	display:table;
+	display: flex;
+	align-content:center;
+	justify-content: space-around;
+	text-align:center;
+	padding:0 inherit;
+}
+
+.anime .row > div {
+	font-size:0.8em;
+	display:flex-item;
+	align-self:center;
+	text-align:center;
+	vertical-align:middle;
+}
+
+/* -----------------------------------------------------------------------------
+	Manga-list-specific styles
+------------------------------------------------------------------------------*/
+
+.manga .media > .name {
+	padding:0.5em;
+	margin:1em;
+}
+
+.manga .media {
+	border:1px solid #ddd;
+	width:200px;
+	height:290px;
+	margin:0.25em;
+}
+
+.manga .media_metadata {
+	padding: var(--normal-padding);
+	margin: 0.75em;
+}