mirror of
https://github.com/cnodejs/nodeclub.git
synced 2025-12-08 19:55:55 +00:00
调整页面 topic 列表和内容的布局; 统一 font size
This commit is contained in:
jiyinyiyong
parent
bf310f0ae8
commit
4b82062c19
@ -10,15 +10,10 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#wrapper {
|
||||
padding-top: 34px;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 1060px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 0px 30px 0px;
|
||||
width: 1120px;
|
||||
margin: 40px auto;
|
||||
min-height:400px;
|
||||
position: relative;
|
||||
}
|
||||
@ -27,35 +22,60 @@ body {
|
||||
}
|
||||
#content {
|
||||
padding: 0;
|
||||
width: 758px;
|
||||
width: 818px;
|
||||
float: left;
|
||||
}
|
||||
#sidebar {
|
||||
width: 290px;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#content .panel {
|
||||
background: hsla(0, 0%, 100%, 1);
|
||||
}
|
||||
#content .topic_full_title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#content .changes {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: rgb(131, 131, 131);
|
||||
}
|
||||
#content .action {
|
||||
text-align: right;
|
||||
}
|
||||
#content h3 {
|
||||
}
|
||||
#manage_topic {
|
||||
padding: 10px;
|
||||
}
|
||||
#sidebar .panel {
|
||||
background: hsla(0, 0%, 100%, 1);
|
||||
font-size: 13px;
|
||||
}
|
||||
#sidebar .header {
|
||||
color: hsl(202, 6%, 34%);
|
||||
}
|
||||
#sidebar .topic_title {
|
||||
max-width: 270px;
|
||||
}
|
||||
#footer {
|
||||
height: 200px;
|
||||
height: 160px;
|
||||
clear: both;
|
||||
position: relative;
|
||||
box-shadow: 0px -1px 0px hsl(0,0%,90%);
|
||||
margin-top: 8px;
|
||||
background: white;
|
||||
box-shadow: 0 -1px 0px rgba(168, 168, 168, 0.33);
|
||||
}
|
||||
#footer_main {
|
||||
width: 1040px;
|
||||
margin: 0px auto;
|
||||
color: #e2e2e2;
|
||||
padding: 20px 0px;
|
||||
font-size: 13px;
|
||||
line-height: 2em;
|
||||
}
|
||||
#mark_all_messages_btn {
|
||||
margin: 5px 0px;
|
||||
@ -76,7 +96,6 @@ a.dark {
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
a.dark:link, a.dark:visited, a.dark:active {
|
||||
color: #666;
|
||||
@ -123,10 +142,14 @@ a.light:hover {
|
||||
}
|
||||
.panel .inner {
|
||||
padding: 10px;
|
||||
line-height: 2em;
|
||||
}
|
||||
.panel .inner.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
.panel .inner li {
|
||||
line-height: 2em;
|
||||
}
|
||||
.panel>.cell:last-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -134,7 +157,24 @@ a.light:hover {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 0px hsl(0, 0%, 90%);
|
||||
padding: 3px 10px;
|
||||
padding: 10px;
|
||||
color: rgb(168, 168, 168);
|
||||
font-size: 13px;
|
||||
}
|
||||
.cell .reply_count {
|
||||
width: 70px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.cell .count_of_replies {
|
||||
color: rgb(158, 120, 192);
|
||||
}
|
||||
.cell .count_seperator {
|
||||
margin: 0 -3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.cell .count_of_visits {
|
||||
font-size: 11px;
|
||||
}
|
||||
.cell .cell {
|
||||
box-shadow: 0px -1px 0px hsl(0, 0%, 90%);
|
||||
@ -143,17 +183,6 @@ a.light:hover {
|
||||
.cell:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.cell .block {
|
||||
float: left;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: hsl(0,0%,70%);
|
||||
line-height: 48px;
|
||||
}
|
||||
.cell .block.count {
|
||||
width: 70px;
|
||||
margin: 0px 8px;
|
||||
}
|
||||
.cell.message, .cell[message_id] {
|
||||
padding: 10px;
|
||||
}
|
||||
@ -170,16 +199,11 @@ a.light:hover {
|
||||
padding: 10px;
|
||||
}
|
||||
.last_time {
|
||||
position: absolute;
|
||||
color: hsl(0, 7%, 70%);
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 13px;
|
||||
line-height: 53px;
|
||||
padding: 0px 8px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.board .floor {
|
||||
line-height: 24px;
|
||||
}
|
||||
.board a {
|
||||
color: #404040;
|
||||
@ -306,7 +330,6 @@ a.user_avatar:hover {
|
||||
width: 48px;
|
||||
}
|
||||
.user_card .user_name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.cell .user_avatar {
|
||||
}
|
||||
@ -386,21 +409,16 @@ a.user_avatar:hover {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.topic_wrap {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 48px;
|
||||
width: 500px;
|
||||
font-size: 18px;
|
||||
}
|
||||
a.topic_title {
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
max-width: 500px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.star_name {
|
||||
font-size: 14px;
|
||||
}
|
||||
img.unread {
|
||||
opacity: 0.1;
|
||||
@ -428,12 +446,14 @@ img.unread {
|
||||
#backtotop {
|
||||
width: 24px;
|
||||
color: gray;
|
||||
padding: 10px 4px;
|
||||
padding: 12px 0px 12px 5px;
|
||||
display:none;
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
z-index: 20;
|
||||
background-color: white;
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
}
|
||||
.tabbable ul {
|
||||
max-height: 40px;
|
||||
@ -544,6 +564,7 @@ textarea[id^=wmd-input] {
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 1px hsl(0, 0%, 40%);
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
.navbar-inner {
|
||||
background: none;
|
||||
@ -553,7 +574,7 @@ textarea[id^=wmd-input] {
|
||||
}
|
||||
.navbar .container {
|
||||
width: 1060px;
|
||||
margin: 4px auto;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.navbar .brand {
|
||||
padding: 4px 0px 0px 20px;
|
||||
@ -703,9 +724,6 @@ textarea.editor {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#content .header {
|
||||
}
|
||||
|
||||
.marked_icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -1,31 +1,35 @@
|
||||
<div class='cell'>
|
||||
|
||||
<div class='user_avatar block'>
|
||||
<a href="/user/<%= topic.author.name %>">
|
||||
<img src="<%= topic.author.avatar_url %>"
|
||||
title="<%= topic.author.name %>"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<a class="user_avatar" href="/user/<%= topic.author.name %>">
|
||||
<img src="<%= topic.author.avatar_url %>"
|
||||
title="<%= topic.author.name %>"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div class='block count'>
|
||||
<a href="/topic/<%= topic._id %><%- topic.reply ? '#' + topic.reply._id : '' %>"title="回复数"><%= topic.reply_count %></a
|
||||
>/<span title='点击数'><%= topic.visit_count %></span>
|
||||
</div>
|
||||
<span class="reply_count">
|
||||
<span class="count_of_replies" title="回复数">
|
||||
<%= topic.reply_count %>
|
||||
</span>
|
||||
<span class="count_seperator">/</span>
|
||||
<span class="count_of_visits" title='点击数'>
|
||||
<%= topic.visit_count %>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class='topic_wrap'>
|
||||
<!--<%- partial('tag/tag_in_abstract',{collection:topic.tags, as:'tag'}) %>-->
|
||||
<!--<%- partial('tag/tag_in_abstract',{collection:topic.tags, as:'tag'}) %>-->
|
||||
<a class='topic_title' href='/topic/<%= topic._id %>'>
|
||||
<% if (topic.top) { %>
|
||||
<span class='put_top'>置顶</span>
|
||||
<% } %>
|
||||
<a class='' href='/topic/<%= topic._id %>'>
|
||||
<%= topic.title %>
|
||||
<%= topic.title %>
|
||||
</a>
|
||||
|
||||
<% if (topic.reply) {%>
|
||||
<a class='last_time' href="/topic/<%= topic._id %><%- topic.reply ? '#' + topic.reply._id : '' %>">
|
||||
<%= topic.reply.friendly_create_at %>
|
||||
</a>
|
||||
</div>
|
||||
<% if(topic.reply) {%>
|
||||
<div class='last_time'><%= topic.reply.friendly_create_at %></div>
|
||||
<% } %>
|
||||
<% if(!topic.reply) {%>
|
||||
<div class='last_time'><%= topic.friendly_create_at %></div>
|
||||
<% if (!topic.reply) {%>
|
||||
<span class='last_time'><%= topic.friendly_create_at %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
@ -42,45 +42,77 @@
|
||||
<div id='content'>
|
||||
<div class='panel'>
|
||||
<div class='header'>
|
||||
<ul class='breadcrumb'>
|
||||
<li><a href='/'>主页</a><span class='divider'>/</span></li>
|
||||
<li class='active'>话题详情</li>
|
||||
</ul>
|
||||
<span class="topic_full_title">
|
||||
<% if (topic.top) { %>
|
||||
<span class='put_top'>置顶</span>
|
||||
<% } %>
|
||||
<%= topic.title %>
|
||||
</span>
|
||||
<div class="changes">
|
||||
<div>
|
||||
<a href="/user/<%= topic.author.name %>"><%= topic.author.name %></a>
|
||||
在 <%= topic.friendly_create_at %> 发布
|
||||
</div>
|
||||
<% if (topic.friendly_create_at != topic.friendly_update_at) { %>
|
||||
<div>
|
||||
<a href="/user/<%= topic.author.name %>"><%= topic.author.name %></a>
|
||||
在 <%= topic.friendly_update_at %> 重新编辑
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (locals.current_user) { %>
|
||||
<div id="manage_topic">
|
||||
<% if (current_user.is_admin) { %>
|
||||
<% if (topic.top) { %>
|
||||
<a href='/topic/<%= topic._id %>/top/0'>
|
||||
<img class='user_icon'
|
||||
src='<%- config.site_static_host %>/public/images/star_fav_icon&16.png'
|
||||
title='取消置顶' />
|
||||
</a>
|
||||
<% } else { %>
|
||||
<a href='/topic/<%= topic._id %>/top/1'>
|
||||
<img class='user_icon'
|
||||
src='<%- config.site_static_host %>/public/images/star_fav_empty_icon&16.png'
|
||||
title='置顶' />
|
||||
</a>
|
||||
<% } %>
|
||||
<a href='/topic/<%= topic._id %>/edit'>
|
||||
<img
|
||||
class='user_icon'
|
||||
src='<%- config.site_static_host %>/public/images/doc_edit_icon&16.png'
|
||||
title='编辑' /></a>
|
||||
<a href='javascript:;'
|
||||
data-id="<%= topic._id %>"
|
||||
class='delete_topic_btn'><img class='user_icon'
|
||||
src='<%- config.site_static_host %>/public/images/trash_icon&16.png'
|
||||
title='删除' /></a>
|
||||
<% } else { %>
|
||||
<% if (current_user._id == topic.author_id) { %>
|
||||
<a href='/topic/<%= topic._id %>/edit'>
|
||||
<img class='user_icon'
|
||||
src='<%- config.site_static_host %>/public/images/doc_edit_icon&16.png'
|
||||
title='编辑' /></a>
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class='inner topic'>
|
||||
<h3>
|
||||
<% if (topic.top) { %>
|
||||
<span class='put_top'>置顶</span>
|
||||
<% } %>
|
||||
<%= topic.title %>
|
||||
</h3>
|
||||
<hr>
|
||||
|
||||
<div class='topic_content'>
|
||||
<%- markdown(topic.content) %>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="tags">
|
||||
<% if (topic.tags.length > 0) { %>
|
||||
<span class='col_fade'>标签：</span>
|
||||
<%- partial('tag/tag_in_topic',{ collection: topic.tags, as: 'tag' }) %>
|
||||
<% } else { %>
|
||||
<span class='col_fade'>标签：无</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="changes">
|
||||
<span class='col_fade'>
|
||||
<a class='dark' href="/user/<%= topic.author.name %>"><%= topic.author.name %></a> 在 <%= topic.friendly_create_at %> 发布
|
||||
</span>
|
||||
<% if (topic.friendly_create_at != topic.friendly_update_at) { %>
|
||||
<span class='col_fade'>
|
||||
<a class='dark' href="/user/<%= topic.author.name %>"><%= topic.author.name %></a> 在 <%= topic.friendly_update_at %> 重新编辑
|
||||
</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (topic.tags.length > 0) { %>
|
||||
<div class="tags">
|
||||
<span class='col_fade'>标签：</span>
|
||||
<%- partial('tag/tag_in_topic',{ collection: topic.tags, as: 'tag' }) %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="action">
|
||||
<a class='dark' id='share_weibo_btn'
|
||||
<button class='btn btn-success' id='share_weibo_btn'
|
||||
href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=<%= config.weibo_key %>',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','','分享来自<%= config.name %>的话题：<%= topic.title %>','',''));"
|
||||
>分享到 weibo</a>
|
||||
>分享到微博</button>
|
||||
<% if (locals.current_user) { %>
|
||||
<% if (!topic.in_collection) { %>
|
||||
<button class='btn btn-success' id='collect_btn' action='collect'>加入收藏</button>
|
||||
@ -88,21 +120,6 @@
|
||||
<button class='btn' id='collect_btn' action='de_collect'>取消收藏</button>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% if (locals.current_user) { %>
|
||||
<% if (current_user.is_admin) { %>
|
||||
<% if (topic.top) { %>
|
||||
<a href='/topic/<%= topic._id %>/top/0'><img class='user_icon' src='<%- config.site_static_host %>/public/images/star_fav_icon&16.png' title='取消置顶' /></a>
|
||||
<% } else { %>
|
||||
<a href='/topic/<%= topic._id %>/top/1'><img class='user_icon' src='<%- config.site_static_host %>/public/images/star_fav_empty_icon&16.png' title='置顶' /></a>
|
||||
<% } %>
|
||||
<a href='/topic/<%= topic._id %>/edit'><img class='user_icon' src='<%- config.site_static_host %>/public/images/doc_edit_icon&16.png' title='编辑' /></a>
|
||||
<a href='javascript:;' data-id="<%= topic._id %>" class='delete_topic_btn'><img class='user_icon' src='<%- config.site_static_host %>/public/images/trash_icon&16.png' title='删除' /></a>
|
||||
<% } else { %>
|
||||
<% if (current_user._id == topic.author_id) { %>
|
||||
<a href='/topic/<%= topic._id %>/edit'><img class='user_icon' src='<%- config.site_static_host %>/public/images/doc_edit_icon&16.png' title='编辑' /></a>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<li>
|
||||
<div><a class='dark' href="/topic/<%= topic._id %>" title="<%= topic.title %>"><%= topic.title %></a></div>
|
||||
<div><a class='dark topic_title' href="/topic/<%= topic._id %>" title="<%= topic.title %>"><%= topic.title %></a></div>
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user