Better looking post view

This commit is contained in:
Marcin Kurczewski 2013-10-12 12:38:49 +02:00
parent b92f925e94
commit 67dcc7c4f8
7 changed files with 115 additions and 103 deletions

View file

@ -37,6 +37,10 @@ body {
list-style-type: none; list-style-type: none;
} }
.main-wrapper {
margin: 0 1.5em;
}
#top-nav li { #top-nav li {
display: inline-block; display: inline-block;
} }
@ -71,31 +75,23 @@ body {
border: 0; border: 0;
} }
.main-wrapper {
margin: 0 auto;
min-width: 700px;
width: 80%;
max-width: 1000px;
}
/* small screens */
@media (max-width: 699px), (max-device-width: 699px) {
.main-wrapper {
min-width: 0;
width: 95%;
max-width: 700px;
}
}
.clear { .clear {
display: block;
clear: both; clear: both;
} }
#sidebar { #sidebar {
float: left; float: left;
width: 25%; width: 256px;
margin-right: 1em; margin-right: 2em;
}
#sidebar .sidebar-unit {
margin: 0 0 2em 0;
padding: 1em;
border: 1px solid #eee;
padding-left: 0;
border-left: 0;
} }
#sidebar h1 { #sidebar h1 {

View file

@ -1,13 +1,13 @@
#sidebar {
width: 200px;
}
.post-wrapper { .post-wrapper {
/*text-align: center;*/ /*text-align: center;*/
} }
img,
embed { embed {
width: 100%;
height: 500px;
margin: 0 auto;
}
img {
max-width: 100%; max-width: 100%;
} }
@ -21,6 +21,22 @@ img {
color: silver; color: silver;
} }
nav {
margin-bottom: 2em;
}
nav .left {
float: left;
}
nav .right {
float: right;
}
nav a.inactive {
color: silver;
}
nav a.inactive i[class*='icon-'] {
background-color: silver;
}
i.icon-prev { i.icon-prev {
background-position: -12px -1px; background-position: -12px -1px;
} }
@ -41,36 +57,23 @@ i.icon-dl {
background-position: -22px -1px; background-position: -22px -1px;
} }
nav .left { .permalink {
float: left; margin: 1em 0;
} }
nav .right { .permalink .icon-dl {
float: right; vertical-align: middle;
margin-right: 1em;
} }
nav a.inactive { .permalink span {
color: silver; vertical-align: middle;
} }
nav a.inactive i[class*='icon-'] { .permalink .ext:after {
background-color: silver; content: ', ';
}
#sidebar h1 {
margin-top: 1em;
} }
.dl-box { .details {
float: left;
margin: 0 2em 0 1em;
}
.dl-box span {
display: block;
text-align: center;
font-size: small;
}
.details-box {
font-size: small;
line-height: 1.33em; line-height: 1.33em;
} }
.details-box .key { .details .key {
margin-right: 0.5em; margin-right: 0.5em;
} }

View file

@ -17,10 +17,9 @@
font-size: 150%; font-size: 150%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
height: 200px; height: 300px;
width: 100%;
display: table-cell; display: table-cell;
border: 3px dashed #eee; border: 3px dashed #ddd;
} }
#file-handler.active { #file-handler.active {
background: #eee; background: #eee;

View file

@ -136,15 +136,19 @@ class PostController
#$mimeType = $suppliedFile['type']; #$mimeType = $suppliedFile['type'];
$mimeType = mime_content_type($suppliedFile['tmp_name']); $mimeType = mime_content_type($suppliedFile['tmp_name']);
$imageWidth = null;
$imageHeight = null;
switch ($mimeType) switch ($mimeType)
{ {
case 'image/gif': case 'image/gif':
case 'image/png': case 'image/png':
case 'image/jpeg': case 'image/jpeg':
$postType = PostType::Image; $postType = PostType::Image;
list ($imageWidth, $imageHeight) = getimagesize($suppliedFile['tmp_name']);
break; break;
case 'application/x-shockwave-flash': case 'application/x-shockwave-flash':
$postType = PostType::Flash; $postType = PostType::Flash;
list ($imageWidth, $imageHeight) = getimagesize($suppliedFile['tmp_name']);
break; break;
default: default:
throw new SimpleException('Invalid file type "' . $mimeType . '"'); throw new SimpleException('Invalid file type "' . $mimeType . '"');
@ -180,12 +184,14 @@ class PostController
$dbPost->name = $name; $dbPost->name = $name;
$dbPost->orig_name = basename($suppliedFile['name']); $dbPost->orig_name = basename($suppliedFile['name']);
$dbPost->file_hash = $fileHash; $dbPost->file_hash = $fileHash;
$dbPost->file_size = filesize($suppliedFile['tmp_name']);
$dbPost->mime_type = $mimeType; $dbPost->mime_type = $mimeType;
$dbPost->safety = $suppliedSafety; $dbPost->safety = $suppliedSafety;
$dbPost->upload_date = time(); $dbPost->upload_date = time();
$dbPost->sharedTag = $dbTags; $dbPost->sharedTag = $dbTags;
$dbPost->user = $this->context->user; $dbPost->user = $this->context->user;
$dbPost->size = filesize($suppliedFile['tmp_name']); $dbPost->image_width = $imageWidth;
$dbPost->image_height = $imageHeight;
move_uploaded_file($suppliedFile['tmp_name'], $path); move_uploaded_file($suppliedFile['tmp_name'], $path);
R::store($dbPost); R::store($dbPost);

View file

@ -26,18 +26,18 @@
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListPosts)) if (PrivilegesHelper::confirm($this->context->user, Privilege::ListPosts))
$nav []= ['Browse', \Chibi\UrlHelper::route('post', 'list')]; $nav []= ['Browse', \Chibi\UrlHelper::route('post', 'list')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListComments))
$nav []= ['Comments', \Chibi\UrlHelper::route('comment', 'list')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListPosts)) if (PrivilegesHelper::confirm($this->context->user, Privilege::ListPosts))
$nav []= ['Favorites', \Chibi\UrlHelper::route('post', 'favorites')]; $nav []= ['Favorites', \Chibi\UrlHelper::route('post', 'favorites')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListTags))
$nav []= ['Tags', \Chibi\UrlHelper::route('tag', 'list')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::UploadPost)) if (PrivilegesHelper::confirm($this->context->user, Privilege::UploadPost))
$nav []= ['Upload', \Chibi\UrlHelper::route('post', 'upload')]; $nav []= ['Upload', \Chibi\UrlHelper::route('post', 'upload')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListComments))
$nav []= ['Comments', \Chibi\UrlHelper::route('comment', 'list')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListTags))
$nav []= ['Tags', \Chibi\UrlHelper::route('tag', 'list')];
if (PrivilegesHelper::confirm($this->context->user, Privilege::ListUsers)) if (PrivilegesHelper::confirm($this->context->user, Privilege::ListUsers))
$nav []= ['Users', \Chibi\UrlHelper::route('user', 'list')]; $nav []= ['Users', \Chibi\UrlHelper::route('user', 'list')];

View file

@ -5,12 +5,14 @@
<?php else: ?> <?php else: ?>
<div id="sidebar"> <div id="sidebar">
<div class="sidebar-unit">
<h1>file upload</h1> <h1>file upload</h1>
<p>Use tags to describe uploaded images. Try to specify characters, their look and shows they are from.</p> <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> <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>
<p>Only registered users can view <span class="safety-sketchy">sketchy</span> or <span class="safety-nsfw">NSFW</span> content.</p> <p>Only registered users can view <span class="safety-sketchy">sketchy</span> or <span class="safety-nsfw">NSFW</span> content.</p>
<p>Click submit when you&rsquo;re done.</p> <p>Click submit when you&rsquo;re done.</p>
</div> </div>
</div>
<div id="inner-content"> <div id="inner-content">
<div id="upload-step1"> <div id="upload-step1">

View file

@ -29,45 +29,7 @@
<div class="clear"></div> <div class="clear"></div>
</nav> </nav>
<div class="details"> <div class="sidebar-unit tags">
<h1>details</h1>
<div class="dl-box">
<a href="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>" alt="<?php echo $this->context->transport->post->name ?>">
<span class="permalink">
<i class="icon-dl"></i>
</span>
<span class="ext">
<?php echo substr($this->context->transport->post->orig_name, strrpos($this->context->transport->post->orig_name, '.') + 1) ?>
</span>
<span class="size">
<?php echo TextHelper::useBytesUnits($this->context->transport->post->size) ?>
</span>
</a>
</div>
<div class="details-box">
<div class="uploader">
<span class="key">Uploader:</span>
<span class="value">
<a href="<?php echo \Chibi\UrlHelper::route('user', 'view', ['id' => $this->context->transport->post->user->id]) ?>">
<?php echo $this->context->transport->post->user->name ?>
</a>
</span>
</div>
<div class="date">
<span class="key">Date:</span>
<span class="value"><?php echo date('Y-m-d H:i', $this->context->transport->post->upload_date) ?></span>
</div>
<div class="safety">
<span class="key">Safety:</span>
<span class="value"><?php echo PostSafety::toString($this->context->transport->post->safety) ?></span>
</div>
</div>
</div>
<div class="tags">
<h1>tags</h1> <h1>tags</h1>
<!-- todo: edit tags --> <!-- todo: edit tags -->
<ul> <ul>
@ -84,6 +46,50 @@
</ul> </ul>
</div> </div>
<div class="sidebar-unit details">
<h1>details</h1>
<div class="safety">
<span class="key">Safety:</span>
<span class="value"><?php echo PostSafety::toString($this->context->transport->post->safety) ?></span>
</div>
<div class="uploader">
<span class="key">Uploader:</span>
<span class="value">
<a href="<?php echo \Chibi\UrlHelper::route('user', 'view', ['id' => $this->context->transport->post->user->id]) ?>">
<?php echo $this->context->transport->post->user->name ?>
</a>
</span>
</div>
<div class="date">
<span class="key">Date:</span>
<span class="value"><?php echo date('Y-m-d H:i', $this->context->transport->post->upload_date) ?></span>
</div>
<?php if ($this->context->transport->post->image_width > 0): ?>
<div class="dim">
<span class="key">Dimensions:</span>
<span class="value"><?php printf('%dx%d',
$this->context->transport->post->image_width,
$this->context->transport->post->image_height) ?></span>
</div>
<?php endif ?>
<div class="permalink">
<a href="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>" alt="<?php echo $this->context->transport->post->name ?>">
<i class="icon-dl"></i>
<span class="ext">
<?php echo strtoupper(substr($this->context->transport->post->orig_name, strrpos($this->context->transport->post->orig_name, '.') + 1)) ?>
</span>
<span class="size">
<?php echo TextHelper::useBytesUnits($this->context->transport->post->file_size) ?>
</span>
</a>
</div>
</div>
<!-- todo: favorites --> <!-- todo: favorites -->
<!-- todo: control --> <!-- todo: control -->
@ -94,7 +100,7 @@
<?php if ($this->context->transport->post->type == PostType::Image): ?> <?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 ?>"/> <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): ?> <?php elseif ($this->context->transport->post->type == PostType::Flash): ?>
<embed type="application/x-shockwave-flash" src="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>"/> <embed width="<?php echo $this->context->transport->post->image_width ?>" height="<?php echo $this->context->transport->post->image_height ?>" type="application/x-shockwave-flash" src="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>"/>
<?php endif ?> <?php endif ?>
</div> </div>
</div> </div>