Changed post list outlook

config.ini

@@ -11,8 +11,8 @@ title=szurubooru
 
 [browsing]
 postsPerPage=20
-thumbWidth=150
+thumbWidth=140
-thumbHeight=150
+thumbHeight=140
 thumbStyle=outside
 endlessScrolling=1
 

public_html/media/css/core.css

@@ -23,7 +23,7 @@ body {
 
 #content {
 	padding: 0;
-	margin: 1.5em 0.75em;
+	margin: 1.5em 0;
 }
 
 #top-nav {
@@ -32,7 +32,7 @@ body {
 }
 
 #top-nav ul {
-	margin: 0;
+	margin: 0 -0.75em;
 	padding: 0;
 	list-style-type: none;
 }

public_html/media/css/paginator.css

@@ -0,0 +1,33 @@
+.paginator-wrapper {
+	text-align: center;
+}
+
+.paginator {
+	margin: 2em auto 0 auto;
+	padding: 0;
+	list-style-type: none;
+}
+
+.paginator li {
+	display: inline-block;
+}
+
+.paginator li a {
+	display: inline-block;
+	padding: 0.2em 0.5em;
+	margin-right: 0.5em;
+	background: #eee;
+	border: 1px solid silver;
+	color: black;
+	text-decoration: none;
+}
+
+.paginator li.active a {
+	color: red;
+	background: mistyrose;
+	border-color: red;
+}
+
+.paginator li.inactive a {
+	color: gray;
+}

public_html/media/css/post-list.css

@@ -1,33 +1,8 @@
-.paginator-wrapper {
+.posts img {
-	text-align: center;
+	border: 1px solid #ddd;
-}
+	box-shadow: 0.25em 0.25em #eee;
-
+	margin: 0.5em;
-.paginator {
-	margin: 2em auto 0 auto;
 	padding: 0;
-	list-style-type: none;
+	width: 140px;
-}
+	height: 140px;
-
-.paginator li {
-	display: inline-block;
-}
-
-.paginator li a {
-	display: inline-block;
-	padding: 0.2em 0.5em;
-	margin-right: 0.5em;
-	background: #eee;
-	border: 1px solid silver;
-	color: black;
-	text-decoration: none;
-}
-
-.paginator li.active a {
-	color: red;
-	background: mistyrose;
-	border-color: red;
-}
-
-.paginator li.inactive a {
-	color: gray;
 }

public_html/media/js/paginator-endless.js

@@ -17,8 +17,7 @@ function scrolled()
 				var dom = $(response);
 				var nextPage = dom.find('.paginator .next:not(.inactive) a').attr('href');
 				$(document).data('page-next', nextPage);
-				$('.posts').append($(response).find('.posts').children().fadeIn('slow'));
+				$('.paginator-content').append($(response).find('.paginator-content').children().fadeIn('slow'));
-				$('body').trigger('postsLoaded');
 			});
 		}
 	}

src/Controllers/PostController.php

@@ -21,8 +21,9 @@ class PostController
 	public function listAction($query = null, $page = 1)
 	{
 		$this->context->stylesheets []= 'post-list.css';
+		$this->context->stylesheets []= 'paginator.css';
 		if ($this->config->browsing->endlessScrolling)
-			$this->context->scripts []= 'post-list-endless.js';
+			$this->context->scripts []= 'paginator-endless.js';
 
 		#redirect requests in form of /posts/?query=... to canonical address
 		$formQuery = InputHelper::get('query');

src/Views/post-list.phtml

@@ -3,7 +3,7 @@
 <?php elseif (empty($this->context->transport->posts)): ?>
 	<p class="alert alert-warning">No posts to show.</p>
 <?php else: ?>
-	<div class="posts">
+	<div class="posts paginator-content">
 		<?php foreach ($this->context->transport->posts as $post): ?>
 			<a href="<?php echo \Chibi\UrlHelper::route('post', 'view', ['id' => $post['id']]) ?>">
 				<img src="<?php echo \Chibi\UrlHelper::route('post', 'thumb', ['id' => $post['id']]) ?>" alt="@<?php echo $post['id'] ?>"/>