Closed #41

public_html/media/css/auth.css

@@ -1,10 +1,10 @@
 form.auth {
 	margin: 0 auto;
-	width: 400px;
+	max-width: 400px;
 }
 
 form.auth label.left {
-	width: 144px;
+	width: 35%;
 }
 
 form.auth p {

public_html/media/css/comment-list.css

@@ -15,3 +15,14 @@
 	border-bottom: 1px solid #eee;
 	margin-bottom: 1em;
 }
+
+.small-screen .comment-group .post-wrapper {
+	float: none;
+	text-align: center;
+}
+.small-screen .comment-group .post {
+	margin: 0 auto 1em auto;
+}
+.small-screen .comment-group .comments {
+	margin-left: 0;
+}

public_html/media/css/core.css

@@ -27,6 +27,7 @@ body {
 }
 
 #top-nav {
+	width: 100%;
 	background: #eee;
 	color: black;
 }
@@ -109,12 +110,12 @@ body {
 }
 #top-nav li.safety a:hover { opacity: .7; }
 #top-nav li.safety a.inactive { opacity: 1; }
-#top-nav li.safety .safety-safe .enabled     { background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }
+#top-nav li.safety .safety-safe .enabled     { background: #cfe6c2; background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }
-#top-nav li.safety .safety-safe .disabled    { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-safe .disabled    { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
-#top-nav li.safety .safety-sketchy .enabled  { background: linear-gradient(to bottom, #F0F4C8 0%, #EBE57A 100%); }
+#top-nav li.safety .safety-sketchy .enabled  { background: #f0f4c8; background: linear-gradient(to bottom, #F0F4C8 0%, #EBE57A 100%); }
-#top-nav li.safety .safety-sketchy .disabled { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-sketchy .disabled { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
-#top-nav li.safety .safety-unsafe .enabled   { background: linear-gradient(to bottom, #FBC6B6 0%, #F37865 100%); }
+#top-nav li.safety .safety-unsafe .enabled   { background: #fbc6b6; background: linear-gradient(to bottom, #FBC6B6 0%, #F37865 100%); }
-#top-nav li.safety .safety-unsafe .disabled  { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-unsafe .disabled  { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
 
 
 
@@ -138,13 +139,6 @@ footer span:not(:last-child):after {
 	width: 256px;
 	margin-right: 2em;
 }
-#sidebar .sidebar-unit {
-	margin: 0 0 1.5em 0;
-	padding: 0.75em;
-	border: 1px solid #eee;
-	padding-left: 0;
-	border-left: 0;
-}
 #sidebar h1 {
 	margin-top: 0;
 }
@@ -162,15 +156,33 @@ footer span:not(:last-child):after {
 
 #inner-content {
 	overflow: hidden;
+	padding-bottom: 2em;
 }
 
-.footer-unit {
+.small-screen #sidebar {
+	float: none;
+	width: 100%;
+	padding: 0 0 1em 0;
+}
+.small-screen #inner-content {
+	float: none;
+	width: auto;
+}
+
+.bottom-unit {
 	padding: 0.5em 1em;
 	border: 1px solid #eee;
 	border-bottom: 0;
 	padding-bottom: 0;
 	margin: 1em 0 2em 0;
 }
+.left-unit {
+	margin: 0 0 1.5em 0;
+	padding: 0.75em;
+	border: 1px solid #eee;
+	padding-left: 0;
+	border-left: 0;
+}
 
 
 
@@ -259,8 +271,10 @@ form.aligned input[type=checkbox] {
 }
 .input-wrapper ul.tagit,
 .input-wrapper input,
+.input-wrapper textarea,
 .input-wrapper select {
 	width: 80%;
+	max-width: 80%;
 }
 
 label {
@@ -275,6 +289,7 @@ button {
 }
 ul.tagit,
 select,
+textarea,
 input:not([type=radio]):not([type=checkbox]):not([type=file]) {
 	border: 1px solid #ccc;
 	border-radius: 3px;

public_html/media/css/index-index.css

@@ -23,60 +23,48 @@
 	padding: 5px;
 }
 
-#featured-post {
+#inner-content {
 	float: right;
 	width: 70%;
 	position: relative;
 }
 
-#featured-post .header .tags:before {
+#inner-content .header .tags:before {
 	margin: 0 0.5em;
 	content: '\2013';
 }
-#featured-post .header ul {
+#inner-content .header ul {
 	list-style-type: none;
 	display: inline;
 	margin: 0;
 	padding: 0;
 }
-#featured-post .header li {
+#inner-content .header li {
 	display: inline;
 }
-#featured-post .header li:not(:last-child) a:after {
+#inner-content .header li:not(:last-child) a:after {
 	content: ', ';
 }
 
-#featured-post .body {
+#inner-content .body {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJElEQVQImWNgYGBgePfu3X8YZoABFA6SIqwS+HXgtANZF7IEAJnGPJE70lLLAAAAAElFTkSuQmCC');
 	margin: 1em 0;
 	text-align: center;
 }
-#featured-post .body img {
+#inner-content .body img {
 	max-width: 100%;
 	margin: 0 auto;
 	display: block;
 }
-#featured-post .body a {
+#inner-content .body a {
 	display: block;
 }
 
-#featured-post .header .favs-comments {
+#inner-content .header .favs-comments {
 	margin-left: 0.5em;
 	float: right;
 }
 
-#featured-post .footer {
+#inner-content .footer {
 	text-align: right;
 }
-
-@media (max-width: 600px) {
-	#sidebar {
-		float: none;
-		width: 100%;
-		padding: 0 0 1em 0;
-	}
-	#featured-post {
-		float: none;
-		width: 100%;
-	}
-}

public_html/media/css/post-small.css

@@ -3,6 +3,7 @@
 	box-shadow: 0.25em 0.25em #eee;
 	padding: 0;
 	position: relative;
+	display: inline-block;
 }
 .post-type-flash {
 	border-color: #dd5;

public_html/media/css/post-view.css

@@ -9,9 +9,16 @@ embed {
 	max-width: 100%;
 }
 
+.post-type-image img {
+	background: url('../img/bk-image.png') lemonchiffon;
+}
+.post-type-flash embed {
+	background: url('../img/bk-swf.png') lemonchiffon;
+}
+
 #sidebar .tags ul {
 	list-style-type: none;
-	margin: 0 0 0 1em;
+	margin: 0;
 	padding: 0;
 }
 #sidebar .tags li .count {
@@ -109,3 +116,8 @@ ul.tagit {
 	padding: 0.5em;
 	display: none;
 }
+
+form.add-comment textarea {
+	width: 50em;
+	height: 8em;
+}

public_html/media/css/user-list.css

@@ -12,10 +12,16 @@
 .user {
 	line-height: 1.5em;
 	margin-bottom: 1em;
-	width: 25em;
+	margin-right: 1em;
 	display: inline-block;
 }
 
+.user .details {
+	display: inline-block;
+	max-width: 25em;
+	white-space: pre;
+}
+
 nav.sort-styles ul {
 	list-style-type: none;
 	margin: 0 0 1em 0;

public_html/media/css/user-view.css

@@ -41,7 +41,7 @@
 }
 
 form.edit label.left {
-	width: 10em;
+	width: 9em;
 }
 
 form.edit .alert {
@@ -51,4 +51,5 @@ form.edit .alert {
 form.edit select,
 form.edit input {
 	width: 16em;
+	max-width: 90%;
 }

public_html/media/js/core.js

@@ -101,4 +101,24 @@ $(function()
 			form.append(input);
 		});
 	});
+
+	$(window).resize();
+});
+
+$(window).resize(function()
+{
+	//modify DOM on small viewports
+	$('#inner-content .unit').addClass('bottom-unit');
+	if ($('body').width() < 600)
+	{
+		$('body').addClass('small-screen');
+		$('#sidebar').insertAfter($('#inner-content'));
+		$('#sidebar .unit').removeClass('left-unit').addClass('bottom-unit');
+	}
+	else
+	{
+		$('body').removeClass('small-screen');
+		$('#inner-content').insertAfter($('#sidebar'));
+		$('#sidebar .unit').removeClass('bottom-unit').addClass('left-unit');
+	}
 });

src/Controllers/PostController.php

@@ -516,7 +516,7 @@ class PostController
 		$this->context->stylesheets []= 'post-view.css';
 		$this->context->stylesheets []= 'comment-small.css';
 		$this->context->scripts []= 'post-view.js';
-		$this->context->subTitle = 'showing @' . $post->id . ' - ' . join(', ', array_map(function($x) { return $x['name']; }, $post->sharedTag));
+		$this->context->subTitle = 'showing @' . $post->id . ' – ' . join(', ', array_map(function($x) { return $x['name']; }, $post->sharedTag));
 		$this->context->favorite = $favorite;
 		$this->context->transport->post = $post;
 		$this->context->transport->prevPostId = $prevPost ? $prevPost['id'] : null;

src/Views/index-index.phtml

@@ -12,7 +12,7 @@
 </div>
 
 <?php if (!empty($this->context->featuredPost)): ?>
-	<div id="featured-post">
+	<div id="inner-content">
 		<div class="header">
 			Featured image
 

src/Views/layout-normal.phtml

@@ -13,6 +13,7 @@
 		<?php foreach (array_unique($this->context->scripts) as $name): ?>
 			<script type="text/javascript" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/js/' . $name) ?>"></script>
 		<?php endforeach ?>
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 	</head>
 
 	<body>

src/Views/post-upload.phtml

@@ -3,7 +3,7 @@
 <?php else: ?>
 
 	<div id="sidebar">
-		<div class="sidebar-unit">
+		<div class="unit">
 			<h1>file upload</h1>
 			<p>Use tags to describe uploaded images. Try to specify characters, their look and shows they are from.</p>
 			<p>Set proper visibility setting if the image isn&rsquo;t safe for work or you&rsquo;re not sure it&rsquo;s 100% <span class="safety-sfw">safe</span>.</p>

src/Views/post-view.phtml

@@ -25,7 +25,7 @@
 		<div class="clear"></div>
 	</nav>
 
-	<div class="sidebar-unit tags">
+	<div class="unit tags">
 		<h1>tags (<?php echo count($this->context->transport->post->sharedTag) ?>)</h1>
 		<ul>
 			<?php foreach ($this->context->transport->post->sharedTag as $tag): ?>
@@ -41,7 +41,7 @@
 		</ul>
 	</div>
 
-	<div class="sidebar-unit details">
+	<div class="unit details">
 		<h1>details</h1>
 
 		<div class="key-value safety">
@@ -104,7 +104,7 @@
 		</div>
 	</div>
 
-	<div class="sidebar-unit favorites">
+	<div class="unit favorites">
 		<?php if (count($this->context->transport->post->ownFavoritee) == 0): ?>
 			<h1>favorites</h1>
 			<p>None yet.</p>
@@ -122,7 +122,7 @@
 		<?php endif ?>
 	</div>
 
-	<div class="sidebar-unit options">
+	<div class="unit options">
 		<h1>options</h1>
 
 		<ul>
@@ -207,7 +207,7 @@
 </div>
 
 <div id="inner-content">
-	<div class="post-wrapper">
+	<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
 		<?php if ($this->context->transport->post->type == PostType::Image): ?>
 			<img src="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>" alt="<?php echo $this->context->transport->post->name ?>"/>
 		<?php elseif ($this->context->transport->post->type == PostType::Flash): ?>
@@ -216,7 +216,7 @@
 	</div>
 
 	<?php if ($canEditAnything): ?>
-		<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post aligned footer-unit">
+		<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post aligned unit">
 			<h1>edit post</h1>
 			<?php if ($editPostPrivileges[Privilege::EditPostSafety]): ?>
 				<div class="safety">
@@ -259,7 +259,7 @@
 		</form>
 	<?php endif ?>
 
-	<div class="comments footer-unit">
+	<div class="comments unit">
 		<?php if (empty($this->context->transport->post->ownComment)): ?>
 			<h1>comments</h1>
 			None yet.
@@ -275,13 +275,13 @@
 	</div>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::AddComment)): ?>
-		<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment aligned footer-unit">
+		<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment aligned unit">
 			<h1>add comment</h1>
 
 			<div class="preview"></div>
 
 			<div class="text">
-				<textarea name="text" cols="50" rows="3"></textarea>
+				<div class="input-wrapper"><textarea name="text" cols="50" rows="3"></textarea></div>
 			</div>
 
 			<div>

src/Views/user-view.phtml

@@ -6,7 +6,7 @@
 		<h1><?php echo $this->context->transport->user->name ?></h1>
 	</div>
 
-	<div class="sidebar-unit details">
+	<div class="unit details">
 		<h1>details</h1>
 
 		<div class="key-value join-date">
@@ -28,7 +28,7 @@
 		<?php endif ?>
 	</div>
 
-	<div class="sidebar-unit options">
+	<div class="unit options">
 		<h1>options</h1>
 
 		<ul>