optimized bootstrap comment layout

This commit is contained in:
Simon Rupf 2015-08-23 15:49:51 +02:00
parent b299a6e03e
commit c78e1fc3db
4 changed files with 33 additions and 12 deletions

3
.gitignore vendored
View file

@ -7,6 +7,7 @@ tmp/
# Ignore unit testing logs, api docs and eclipse project files
tst/log/
doc/
.settings/
.settings
.buildpath
.project
.externalToolBuilders

24
css/bootstrap/zerobin.css Normal file
View file

@ -0,0 +1,24 @@
/* ZeroBin 0.19 - http://sebsauvage.net/wiki/doku.php?id=php:zerobin */
body {
padding: 70px 0 30px 0;
}
#deletelink {
float: right;
}
#pastelink {
display: inline;
}
#nickname {
margin: 5px 0;
}
.comment {
border-left: 1px solid #ccc;
padding: 5px 0 5px 5px;
white-space: pre-wrap;
}

View file

@ -222,7 +222,7 @@ function displayMessages(key, comments) {
}
var divComment = $('<article><div class="comment" id="comment_' + comment.meta.commentid+'">'
+ '<div class="commentmeta"><span class="nickname"></span><span class="commentdate"></span></div><div class="commentdata"></div>'
+ '<button onclick="open_reply($(this),\'' + comment.meta.commentid + '\');return false;">Reply</button>'
+ '<button onclick="open_reply($(this),\'' + comment.meta.commentid + '\');return false;" class="btn btn-default">Reply</button>'
+ '</div></article>');
setElementText(divComment.find('div.commentdata'), cleartext);
// Convert URLs to clickable links in comment.
@ -242,7 +242,7 @@ function displayMessages(key, comments) {
place.append(divComment);
}
$('#comments').append('<div class="comment"><button onclick="open_reply($(this),\'' + pasteID() + '\');return false;">Add comment</button></div>');
$('#comments').append('<div class="comment"><button onclick="open_reply($(this),\'' + pasteID() + '\');return false;" class="btn btn-default">Add comment</button></div>');
$('#discussion').removeClass('hidden');
}
}
@ -255,9 +255,9 @@ function displayMessages(key, comments) {
function open_reply(source, commentid) {
$('div.reply').remove(); // Remove any other reply area.
source.after('<div class="reply">'
+ '<input type="text" id="nickname" title="Optional nickname..." value="Optional nickname..." />'
+ '<textarea id="replymessage" class="replymessage" cols="80" rows="7"></textarea>'
+ '<br /><button id="replybutton" onclick="send_comment(\'' + commentid + '\');return false;">Post comment</button>'
+ '<input type="text" id="nickname" class="form-control" title="Optional nickname..." value="Optional nickname..." />'
+ '<textarea id="replymessage" class="replymessage form-control" cols="80" rows="7"></textarea>'
+ '<br /><button id="replybutton" onclick="send_comment(\'' + commentid + '\');return false;" class="btn btn-default">Post comment</button>'
+ '<div id="replystatus"> </div>'
+ '</div>');
$('#nickname').focus(function() {

View file

@ -7,7 +7,8 @@
<meta name="robots" content="noindex" />
<title>ZeroBin</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-3.3.5.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-theme-3.3.5.css" />{if="$SYNTAXHIGHLIGHTING"}
<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-theme-3.3.5.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap/zerobin.css?{$VERSION|rawurlencode}" />{if="$SYNTAXHIGHLIGHTING"}
<link type="text/css" rel="stylesheet" href="css/prettify/prettify.css?{$VERSION|rawurlencode}" />{if="strlen($SYNTAXHIGHLIGHTINGTHEME)"}
<link type="text/css" rel="stylesheet" href="css/prettify/{$SYNTAXHIGHLIGHTINGTHEME}.css?{$VERSION|rawurlencode}" />{/if}{/if}
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
@ -18,11 +19,6 @@
<script type="text/javascript" src="js/bootstrap-3.3.5.js"></script>{if="$SYNTAXHIGHLIGHTING"}
<script type="text/javascript" src="js/prettify.js?{$VERSION|rawurlencode}"></script>{/if}
<script type="text/javascript" src="js/zerobin.js?{$VERSION|rawurlencode}"></script>
<style type="text/css">
body { padding: 70px 0 30px 0; }
#deletelink { float: right; }
#pastelink { display: inline; }
</style>
<!--[if lt IE 10]>
<style type="text/css">#ienotice {display:block !important;} #oldienotice {display:block !important;}</style>
<![endif]-->