Skip to content

Responsible Layout #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DrustZ wants to merge 10 commits into
base: dev-v0.3.4
Choose a base branch
from
Open

Responsible Layout #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
20c94d7
Merge pull request #27 from mrroach9/dev-v0.3.3
mrroach9 Jan 26, 2015
2be377f
Update readme.md
mrroach9 Jan 26, 2015
bbe8573
Update readme.md
mrroach9 Jan 26, 2015
19a8671
Responsible Layout
DrustZ Jan 29, 2015
2d8b04f
除夕前夜最终版完成！可以上线！
DrustZ Feb 18, 2015
3f8631c
fix post func
DrustZ Feb 18, 2015
3f220e7
fix post func
DrustZ Feb 18, 2015
e6c4f1f
fix post func
DrustZ Feb 18, 2015
0679d03
fix duplicated button id
DrustZ Mar 1, 2015
f117608
fix duplicated button id
DrustZ Mar 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,338 changes: 1,338 additions & 0 deletions css/bootstrap-responsive.css
View file
Open in desktop

Large diffs are not rendered by default.

6,167 changes: 6,167 additions & 0 deletions css/bootstrap.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ body {
-moz-border-radius: 5px;
border-radius: 5px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}

.popover-title {
font: bold 16px/20px helvetica;
Expand Down Expand Up @@ -157,7 +161,7 @@ button.btn.btn-large {

.board-table-center th,
td.board-table-center {
text-align: center;
text-align: left;
}

.display-area {
Expand Down Expand Up @@ -850,6 +854,7 @@ input[type="file"].fileuploadbox {
display: block;
overflow-x: hidden;
white-space: nowrap;
max-width: 170px;
}

.user-profile-idAndNick {
Expand Down
72 changes: 42 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
<head>
<meta charset='utf-8'>
<title>9# BBS</title>
<!--
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
-->
<meta name='description' content=''>
<meta name='author' content=''>

<link href='./css/bootstrap.min.css' rel='stylesheet'>
<link href='./css/style.css' rel='stylesheet'>

<link rel='shortcut icon' href='favicon.ico'>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<link rel='shortcut icon' href='favicon.ico'>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand All @@ -30,12 +29,12 @@
<div class='navbar navbar-fixed-top navbar-inverse' id='unlogged-navbar'>
<div class='navbar-inner'>
<div class='container'>
<div class='brand'>
<div class='title-label'>9# BBS</div>
</div>
<div class='nav-collapse'>
<ul class='nav'>
<li class='dropdown'>
<div class='brand'>
<div class='title-label'>9# BBS</div>
</div>
<div class='nav'>
<ul class='nav'>
<li class='dropdown' style="float: left;">
<a class='dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>
登录
<b class='caret'></b>
Expand All @@ -58,14 +57,22 @@
</div>
</div>
</div>


<div class='navbar navbar-fixed-top navbar-inverse hide' id='logged-navbar'>
<div class='navbar-inner'>
<div class='container'>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class='brand'>
<div class='title-label'>9# BBS</div>
</div>
<div class='nav-collapse'>
<!-- Everything want to hidden at 940px or less, place within here -->
<div class='nav-collapse collapse'>
<ul class='nav'>
<li><a href='javascript:void(0)' id='favboard-nav-label'>收藏夹</a></li>
<li><a href='javascript:void(0)' id='allboard-nav-label'>所有版面</a></li>
Expand Down Expand Up @@ -204,13 +211,14 @@ <h1>您尚未登录</h1>
</ul>
</div>

<div class='well' id='display-area'>
<div class='well container-fluid' id='display-area'>
<div id='mailbox-table' class='hide display-area'>
<div class='button-bar mail-buttons top-button-bar'>
<button class='btn btn-info first-page-button'>第一页</button>
<button class='btn btn-success prev-page-button'>上一页</button>
<button class='btn btn-success next-page-button'>下一页</button>
<button class='btn btn-info last-page-button'>最后一页</button>
<div class="mob-display"> </div>
<span class='jump-to-mail'>
跳转至第<input class='short-text jump-to-mail-input' />封邮件
<button class='btn btn-success jump-to-mail-button'>跳转</button>
Expand All @@ -232,6 +240,7 @@ <h1>您尚未登录</h1>
<button class='btn btn-success prev-page-button'>上一页</button>
<button class='btn btn-success next-page-button'>下一页</button>
<button class='btn btn-info last-page-button'>最后一页</button>
<div class="mob-display"> </div>
<span class='jump-to-mail'>
跳转至第<input class='short-text jump-to-mail-input' />封邮件
<button class='btn btn-success jump-to-mail-button'>跳转</button>
Expand All @@ -244,21 +253,23 @@ <h1>您尚未登录</h1>
<th width='60px'>帖数</th>
<th width='42px' data-sort='string' col='unread'>未读</th>
<th width='150px' data-sort='string' col='name'>版名</th>
<th>版面中文名</th>
<th width='32px'>在线</th>
<th width='220px'>版主</th>
<th class="mob-hide">版面中文名</th>
<th class="mob-hide" width='32px'>在线</th>
<th class="mob-hide" width='220px'>版主</th>
</thead>
<tbody id='boardlist-table-body'>
</tbody>
</table>
</div>

<div id='board-table' class='hide display-area'>
<div class='mob-display'> &nbsp; </div>
<div class='button-bar board-buttons top-button-bar'>
<button class='btn btn-info first-page-button'>第一页</button>
<button class='btn btn-success prev-page-button'>上一页</button>
<button class='btn btn-success next-page-button'>下一页</button>
<button class='btn btn-info last-page-button'>最后一页</button>
<div class="mob-display"> _ </div>
<span class='jump-to-post'>
跳转至<input class='short-text jump-to-post-input' />贴
<button class='btn btn-success jump-to-post-button'>跳转</button>
Expand All @@ -268,8 +279,8 @@ <h1>您尚未登录</h1>
<thead class='board-table-head'>
<th width='60px'>编号</th>
<th width='42px'>未读</th>
<th width='100px'>作者</th>
<th width='60px'>日期</th>
<th class='mob-hide' width='100px'>作者</th>
<th class='mob-hide' width='60px'>日期</th>
<th>文章标题</th>
</thead>
<tbody id='board-table-body'>
Expand All @@ -280,6 +291,7 @@ <h1>您尚未登录</h1>
<button class='btn btn-success prev-page-button'>上一页</button>
<button class='btn btn-success next-page-button'>下一页</button>
<button class='btn btn-info last-page-button'>最后一页</button>
<div class="mob-display">_</div>
<span class='jump-to-post'>
跳转至<input class='short-text jump-to-post-input' />贴
<button class='btn btn-success jump-to-post-button'>跳转</button>
Expand All @@ -301,11 +313,11 @@ <h1>您尚未登录</h1>
</div>
</div>

<div id='post-view' class='hide display-area'>
<div id='post-view' class='hide display-area fluid'>
<div class='button-bar post-buttons top-button-bar'>
<button class='btn btn-info st-prev-button'>同主题上一篇</button>
<button class='btn btn-success prev-post-button'>上一篇</button>
<button class='btn btn-success next-post-button'>下一篇</button>
<button class='btn btn-success prev-post-button mob-hide'>上一篇</button>
<button class='btn btn-success next-post-button mob-hide'>下一篇</button>
<button class='btn btn-info st-next-button'>同主题下一篇</button>
<span class='dropdown st-nav-menu'>
<a class='dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>
Expand All @@ -327,11 +339,11 @@ <h1>您尚未登录</h1>
</pre>
</div>
<div class='button-bar post-buttons bottom-button-bar'>
<button class='btn btn-info st-prev-button'>同主题上一篇</button>
<button class='btn btn-info st-prev-button mob-hide'>同主题上一篇</button>
<button class='btn btn-success prev-post-button'>上一篇</button>
<button class='btn btn-success next-post-button'>下一篇</button>
<button class='btn btn-info st-next-button'>同主题下一篇</button>
<span class='dropdown st-nav-menu'>
<button class='btn btn-info st-next-button mob-hide'>同主题下一篇</button>
<span class='dropdown st-nav-menu mob-hide'>
<a class='dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>
更多选项
<b class="caret"></b>
Expand All @@ -350,15 +362,15 @@ <h1>您尚未登录</h1>

</div>

<div class='modal hide' id='write-post-panel'>
<div class='modal hide container-fluid' id='write-post-panel'>
<div class='modal-header'>
<button type='button' class='close cancel-button'>&times;</button>
<h3 id='post-panel-title'>发表新文章</h3>
</div>
<div class='modal-body'>
<div class='modal-body fluid'>
<form class='form-horizontal'>
<fieldset>
<div class='control-group'>
<div class='control-group fluid'>
标题：<input type='text' class='input-xlarge' id='write-post-title'/>
<br>
<div class='write-post-option'>
Expand Down Expand Up @@ -398,7 +410,8 @@ <h3 id='post-panel-title'>发表新文章</h3>
<ul class='file-list'>
</ul>
</div>
<div class='control-group'>

<div class='control-group fluid'>
内容：<textarea class='input-xlarge' id='write-post-content'></textarea>
</div>
<div class='write-post-option'>
Expand All @@ -413,7 +426,7 @@ <h3 id='post-panel-title'>发表新文章</h3>
</fieldset>
</form>
</div>
<div class='modal-footer'>
<div class='modal-footer mob-Change'>
<a class='btn btn-primary' id='publish-post-button'>发表</a>
<a class='btn cancel-button' id='cancel-post-button'>取消</a>
</div>
Expand Down Expand Up @@ -489,7 +502,7 @@ <h3 id='post-panel-title'>Rowell开发者名单</h3>
<script src='./js/jquery/jquery.cookie.js'></script>
<script src='./js/jquery/jquery.purl.js'></script>
<script src='./js/jquery/jquery.xmpp.js'></script>
<script src='./js/bootstrap/bootstrap.min.js'></script>
<script src='./js/bootstrap/bootstrap.js'></script>
<script src='./js/jquery/stupidtable.min.js'></script>

<script src='./js/bbs/ansi2html.js'></script>
Expand Down Expand Up @@ -517,4 +530,3 @@ <h3 id='post-panel-title'>Rowell开发者名单</h3>
</script>
</body>
</html>

5 changes: 2 additions & 3 deletions js/bbs/bbs_UI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,7 @@ function UI_register_func() {

// If user clicks on anything outside this anchor or its popover,
// dismiss the popover.
$(document).on('click', UI_closeUnfocusedPopover);

$(document).on('click touchend', UI_closeUnfocusedPopover);
UI_register_func_navigation();
UI_register_func_post_modal();

Expand Down Expand Up @@ -265,7 +264,7 @@ function UI_register_func_post_modal() {
});

$('#publish-post-button').click(UI_write_post);

$(document).on('click', '#write-post-panel .cancel-button', function() {
if (confirm(bbs_string.confirm_cancel_post)) {
UI_hide_write_post();
Expand Down
5 changes: 5 additions & 0 deletions js/bbs/bbs_global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
// Indicating if the loading logo is now displaying
var bbs_loading_show = false;

// Indicating whether the app is running on a touch device.
var isTouchDevice = function() {
return ('ontouchstart' in document.documentElement);
};

// The info and data of current post to be published
var bbs_post_info = {
can_anony : false,
Expand Down
53 changes: 30 additions & 23 deletions js/bbs/bbs_widgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Widgets.boardEntry = function(entry, type, index) {
var isRead = (entry.isdir || entry.read);
var sortValue = (isRead ? 1 : 0) + ',' + ('000' + index).slice(-3);

var bmCell = $('<td>');
var bmCell = $('<td class="mob-hide">');
var bmAnchors = Widgets.__BMList(entry.BM);
for (var index in bmAnchors) {
bmCell.append(bmAnchors[index]);
Expand All @@ -47,10 +47,11 @@ Widgets.boardEntry = function(entry, type, index) {
.append($('<td>').addClass('board-table-center')
.append(isRead ? '' : newPostNode)
.attr('data-sort-value', sortValue))
.append($('<td>').append(entry.name))
.append($('<td>').append(entry.desc))
.append($('<td>').append(entry.currentusers))
.append(bmCell);
.append($('<td>').addClass('mob-hide').append(entry.name))
.append($('<td>').addClass('mob-hide').append(entry.desc))
.append($('<td>').addClass('mob-hide').append(entry.currentusers))
.append(bmCell)
.append($('<td>').addClass('mob-display').append(entry.name).append("&nbsp;").append($('<strong>').append(entry.desc)));

entryNode.click(function() {
UI_set_loading();
Expand All @@ -76,7 +77,7 @@ Widgets.boardEntry = function(entry, type, index) {
var isRead = (typeof(entry.binfo.read) == 'undefined' || entry.binfo.read);
var sortValue = (isRead ? 1 : 0) + ',' + ('000' + index).slice(-3);

var bmCell = $('<td>');
var bmCell = $('<td class="mob-hide">');
var bmAnchors = Widgets.__BMList(entry.binfo.BM);
for (var index in bmAnchors) {
bmCell.append(bmAnchors[index]);
Expand All @@ -87,10 +88,12 @@ Widgets.boardEntry = function(entry, type, index) {
.append($('<td>').addClass('board-table-center')
.append(isRead ? '' : newPostNode)
.attr('data-sort-value', sortValue))
.append($('<td>').append(entry.binfo.name))
.append($('<td>').append(entry.binfo.desc))
.append($('<td>').append(entry.binfo.currentusers))
.append(bmCell);
.append($('<td>').addClass('mob-hide').append(entry.binfo.name))
.append($('<td>').addClass('mob-hide').append(entry.binfo.desc))
.append($('<td>').addClass('mob-hide').append(entry.binfo.currentusers))
.append(bmCell)
.append($('<td>').addClass('mob-display').append(entry.binfo.name).append("&nbsp;").append($('<strong>').append(entry.binfo.desc)));


entryNode.click(function() {
UI_set_loading();
Expand Down Expand Up @@ -127,14 +130,15 @@ Widgets.postEntry = function (entry, is_sticky) {
var miniBar = Widgets.postMiniBar(entry);
miniBar.hide();
var entryNode = $('<tr>').attr('href', '').addClass(class_name)
.append($('<td>').append((is_sticky ? bbs_string.entry_sticky : entry.id)))
.append($('<td>').addClass('mob-display').append(" &nbsp;").append((is_sticky ? bbs_string.entry_sticky : entry.id)).append(" &nbsp;").append(entry.posttime).append(" &nbsp;").append(Widgets.userAnchor(entry.owner)))
.append($('<td>').addClass('mob-hide').append((is_sticky ? bbs_string.entry_sticky : entry.id)))
.append($('<td>').addClass('board-table-center').append(
(typeof(entry.read) == 'undefined' || entry.read) ? '' : newPostNode))
.append($('<td>').append(Widgets.userAnchor(entry.owner)))
.append($('<td>').append(entry.posttime))
(typeof(entry.read) == 'undefined' || entry.read) ? " " : newPostNode))
.append($('<td>').addClass('mob-hide').append(Widgets.userAnchor(entry.owner)))
.append($('<td>').addClass('mob-hide').append(entry.posttime))
.append($('<td>').addClass('post-title-td')
.append(entry.title)
.append(entry.attachment > 0 ? attachLogoNode : '')
.append(entry.title)
.append(entry.attachment > 0 ? attachLogoNode : '')
.append(markM ? mNode : '')
.append(markG ? gNode : '')
.append(miniBar));
Expand All @@ -143,12 +147,14 @@ Widgets.postEntry = function (entry, is_sticky) {
}
var postType = is_sticky ? bbs_type.post_list_mode.sticky
: bbs_type.post_list_mode.normal;
entryNode.mouseenter(function(event) {
miniBar.show();
});
entryNode.mouseleave(function(event) {
miniBar.hide();
});
if (!isTouchDevice()) {
entryNode.mouseenter(function(event) {
miniBar.show();
});
entryNode.mouseleave(function(event) {
miniBar.hide();
});
}
entryNode.click(function() {
UI_set_loading();
view_post(entry.id, postType, UI_update, 'click');
Expand Down Expand Up @@ -318,7 +324,8 @@ Widgets.userProfile = function(profile) {
var idPanel = $('<div>').addClass('user-profile-id-panel')
.append($('<span>').addClass('user-profile-id').append(userId));
var nickPanel = $('<div>').addClass('user-profile-nickPanel')
.append($('<span>').addClass('user-profile-nick').append(profile.nick));
.append($('<span>').addClass('user-profile-nick').append(profile.nick)
.attr('title', profile.nick));
var idAndNickPanel = $('<div>').addClass('user-profile-idAndNick')
.append(idPanel).append(nickPanel);

Expand Down
Loading