完成了大部分提到的更改.. #152
Collaborator
jiyinyiyong
commented
jiyinyiyong
added
some commits
sumory
commented
这也太淡太单调了吧，看上去比现在的还不适应
heroicyang
commented
我觉得现在的要更好些啊，除了主题的两个头像和导航栏之外。
Collaborator
jiyinyiyong
commented
leizongmin
commented
这个瞬间亮瞎了我的钛合金眼，颠覆了我的审美观
Owner
JacksonTian
commented
原来的那个背景还不错啊，我觉得你解决下header上的背景就可以了，不用整体换。
Collaborator
jiyinyiyong
commented
@leizongmin 好残酷啊,, 真有这么烂么这个界面... 背景色是 Node 官方壁纸的背景色啊
@JacksonTian 原先我想的是去掉边框用文字的整齐排版来形成对齐, 从而保证界面美观
但昨天线上看的感觉, 一个是布局没有平衡, 还有亮度太过以及对比不清晰
如果是那只改 navbar 的话, 是这样?
Owner
JacksonTian
commented
头上估计不能用白色了。
leizongmin
commented
leizongmin
commented
反正顶部导航栏的颜色必须比背景色深，而且要有明确的边界
Collaborator
jiyinyiyong
commented
@leizongmin SegmentFault 和 Github 都是这个配色的.. 是比浅色在上边好看..
不过为什么... 是因为亮色太吸引注意力么..
按 Github 的颜色我改掉的部分是这样的,, // 字体有点丑..
leizongmin
commented
我那个是这样的：
.navbar-inner {
border-bottom: 1px solid #CCC;
background-color: #f3f3f3;
}
.navbar .nav > li > a {
color: #555;
font-weight: bold;
}
a:focus, .navbar .nav > li > a:hover {
color: #4183c4;
}
#wrapper {
background: #FFF;
padding-top: 0;
}
导航栏文字加粗、颜色加深，加下边框
取消导航栏与主体部分的间距
Collaborator
jiyinyiyong
commented
@leizongmin Github 的 DOM 属性看起来也是 BootStrap 来加样式的,,
我那么的话参考 Github 的界面和你的 CSS 把现在的界面样式改了提交
leizongmin
commented
SegmentFault 和 Github 都是这个配色的.. 是比浅色在上边好看..
不过为什么... 是因为亮色太吸引注意力么..
- 因为大家已经看惯了这种风格的，所以就已经习惯了。如果你采用别的风格，比如刚才那个“颠覆式”的黑背景白导航，刚开始会令人不适应；
- 另外，网页要让眼睛看得舒服，比如现在那个浅图片背景对阅读文字挺好的，但是由于导航比较模糊，给人感觉不太平衡；而那个黑色背景，颜色对比太强烈，给人一种压抑的感觉，令人很不舒服；
- 如果设置了背景，文字颜色应该加深，否则文字与背景色都差不多的，阅读时眼睛易疲劳；
Collaborator
jiyinyiyong
commented
- 刚开始的深绿色我期待有图片能填充的, 反而没考虑好
- 嗯. 浅色的背景, 深色的字, 这点一直没变. 那现在我打算全沿用 Github
- 文字区域的背景, 为了方便阅读, 已经不打算加图案了. 图案如果有, 是在全局的背景上
Collaborator
jiyinyiyong
commented
@leizongmin 这下变成高仿 Github 了.. 是先用这还是在基础上改?
leizongmin
commented
就这样还好看
Owner
fengmk2
commented
ok？！么？各位？
leizongmin
commented
表示 赞成 先更新这个上去看看效果如何
Owner
fengmk2
commented
好。
Owner
fengmk2
commented
http://club.dev.cnodejs.net/ 半小时预览看看。
Owner
fengmk2
commented
粉红线是否修改一下颜色呢？
Owner
fengmk2
commented
好少女系啊
sumory
commented
这个粉红有点暧昧
Owner
fengmk2
commented
Owner
JacksonTian
commented
滚动条就系统默认的吧，不要粉红。
leizongmin
commented
刚开始我以为那个粉红线是浏览器问题，原来真的是粉红色的！！
sumory
commented
发布页面已凌乱
sumory
commented
粉丝页面、打人页面等都飘逸起来了...
sumory
commented
感觉，segmentfault的header底部边缘还是很有质感的，cnode的这个没有层次感
leizongmin
commented
- 不要使用粉红色边框，边框统一使用灰色（颜色再深一点） 图1
- 使用系统默认的滚动条
- 灰色背景颜色再深一点 图2
finian
commented
粉红色配色太怪异了
Collaborator
jiyinyiyong
commented
粉红色.. 意外了, 屏幕还是视力问题我没发现那么明显.. 改了
颜色加深以后 Logo 更显蛋疼..
@fengmk2 超过半小时了.. 是那边的配置改了?
@JacksonTian 忘了 Mac 滚动条超漂亮, Linux Chrome 不好看呀..
@leizongmin 我继续参考 Github.. 颜色加深了
@sumory 采用了 Github 的配置, 边缘线我为了布局是用阴影模拟的, 有点虚
已改:
#152 (comment)
leizongmin
commented
粉红色边框 还是没有改。
你显示器有问题吧？
Owner
JacksonTian
commented
滚动条那个 如无必要 不要去做特殊设置
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This page is out of date. Refresh to see the latest.
Showing
with
257 additions
and 168 deletions.
- 0 5 README.md
- BIN public/images/furley_bg.png
- 2 4 public/javascripts/main.js
- 1 1 public/libs/bootstrap/css/bootstrap.css
- 124 51 public/stylesheets/style.css
- 66 57 views/reply/reply.html
- 29 25 views/reply/reply2.html
- 15 9 views/topic/abstract.html
- 13 9 views/topic/index.html
- 6 6 views/topic/list.html
- 1 1 views/user/index.html
Deleted file not rendered
| @@ -1,59 +1,68 @@ | ||
| <div class='cell reply_area reply_item' id="reply<%= indexInCollection+1 %>" reply_id="<%- reply._id %>"> | ||
| - <a id="<%- reply._id %>"></a> | ||
| - <div class='user_avatar block'> | ||
| - <a href="/user/<%= reply.author.name %>"><img src="<%= reply.author.avatar_url %>" title="<%= reply.author.name %>" /></a> | ||
| - </div> | ||
| - <span class='col_fade fr'>#<%= indexInCollection + 1 %></span> | ||
| - | ||
| - <span class='fr'> | ||
| - <% if(locals.current_user){ %> | ||
| - <a href='javascript:void(0);' class='dark reply2_btn'>回复</a> | ||
| - <% } %> | ||
| - <% if(reply.replies.length>0){ %> | ||
| - <span class='col_fade'>{<%= reply.replies.length %>}</span> | ||
| - <% } %> | ||
| - </span> | ||
| - <span class='reply_author'><a class='dark' href="/user/<%= reply.author.name %>"><%= reply.author.name %></a></span> | ||
| - <span class='col_fade'> | ||
| - 在 <a href="#<%- reply._id %>"><%= reply.friendly_create_at %></a> 回复 | ||
| - <% if(locals.current_user && current_user._id.toString() == reply.author._id.toString()) { %> | ||
| - <span class='sp10'></span> | ||
| - <a href='javascript:void(0);' class='delete_reply_btn'><img class='user_icon' src="<%- config.site_static_host %>/images/trash_icon&16.png" title='删除' /></a> | ||
| - <% } %> | ||
| - </span> | ||
| - <!-- <div class='sep5'></div> --> | ||
| - <div class='reply_content'> | ||
| - <%- reply.content %> | ||
| - </div> | ||
| - <div class='cl'> | ||
| - <!-- <div class='sep5'></div> --> | ||
| - <div class='reply2_area'> | ||
| - <% if (reply.replies.length >0) { %> | ||
| - <div class='sep10'></div> | ||
| - <%- partial('reply/reply2',{collection: reply.replies, as: 'reply'}) %> | ||
| - <% } %> | ||
| - <% if (locals.current_user) { %> | ||
| - <div class='reply2_editor tabbable' id='reply2_editor-<%= indexInCollection+1 %>'> | ||
| - <div class='sep10'></div> | ||
| - <ul class='nav nav-pills'> | ||
| - <li class='active'><a href='#markdown-<%= indexInCollection+1 %>' data-toggle='pill'>markdown</a></li> | ||
| - <li><a href='#preview-<%= indexInCollection+1 %>' data-toggle='pill' class="preview-btn">预览</a></li> | ||
| - </ul> | ||
| - <div class='tab-content'> | ||
| - <div class='active tab-pane' id='markdown-<%= indexInCollection+1 %>'> | ||
| - <div id='wmd-button-bar-<%= indexInCollection+1 %>'></div> | ||
| - <textarea class='span7' id='wmd-input-<%= indexInCollection+1 %>' name='r2_content' rows='4'></textarea> | ||
| - </div> | ||
| - <div id='preview-<%= indexInCollection+1 %>' class='tab-pane'> | ||
| - <div id='wmd-preview-<%= indexInCollection+1 %>' class='wmd-preview reply2-wmd-preview'></div> | ||
| - </div> | ||
| - </div> | ||
| - <div class='sep10'></div> | ||
| - <button class='btn reply2_submit_btn' id='<%= reply._id %>'>回复</button> | ||
| - <span class='sp10'></span> | ||
| - <span class='col_fade'>Ctrl+Enter 快捷回复</span> | ||
| - </div> | ||
| - <% } %> | ||
| - </div> | ||
| - </div> | ||
| + <a id="<%- reply._id %>"></a> | ||
| + <div class='author_content'> | ||
| + <div class='user_avatar block'> | ||
| + <a href="/user/<%= reply.author.name %>"><img src="<%= reply.author.avatar_url %>" title="<%= reply.author.name %>" /></a> | ||
| + </div> | ||
| + <div class='user_info'> | ||
| + <span class='reply_author'> | ||
| + <a class='dark' href="/user/<%= reply.author.name %>"><%= reply.author.name %> | ||
| + </a> | ||
| + </span> | ||
| + <span class='col_fade'> | ||
| + <a href="#<%- reply._id %>"><%= reply.friendly_create_at %></a> | ||
| + </span> | ||
| + </div> | ||
| + <div class='user_action fr'> | ||
| + <span class='col_fade'>#<%= indexInCollection + 1 %></span> | ||
| + <% if(locals.current_user && current_user._id.toString() == reply.author._id.toString()) { %> | ||
| + <a href='javascript:void(0);' class='delete_reply_btn'> | ||
| + <img class='user_icon' src="<%- config.site_static_host %>/images/trash_icon&16.png" title='删除' /> | ||
| + </a> | ||
| + <% } %> | ||
| + <span> | ||
| + <% if(locals.current_user){ %> | ||
| + <a href='javascript:void(0);' class='dark reply2_btn'>回复</a> | ||
| + <% } %> | ||
| + <!--<% if(reply.replies.length>0){ %> | ||
| + <span class='col_fade'>{<%= reply.replies.length %>}</span> | ||
| + <% } %>--> | ||
| + </span> | ||
| + </div> | ||
| + </div> | ||
| + <!-- <div class='sep5'></div> --> | ||
| + <div class='reply_content'> | ||
| + <%- reply.content %> | ||
| + </div> | ||
| + <div class='cl'> | ||
| + <!-- <div class='sep5'></div> --> | ||
| + <div class='reply2_area'> | ||
| + <% if (reply.replies.length >0) { %> | ||
| + <div class='sep10'></div> | ||
| + <%- partial('reply/reply2',{collection: reply.replies, as: 'reply'}) %> | ||
| + <% } %> | ||
| + <% if (locals.current_user) { %> | ||
| + <div class='reply2_editor tabbable' id='reply2_editor-<%= indexInCollection+1 %>'> | ||
| + <!-- <div class='sep10'></div> --> | ||
| + <ul class='nav nav-pills'> | ||
| + <li class='active'><a href='#markdown-<%= indexInCollection+1 %>' data-toggle='pill'>markdown</a></li> | ||
| + <li><a href='#preview-<%= indexInCollection+1 %>' data-toggle='pill' class="preview-btn">预览</a></li> | ||
| + </ul> | ||
| + <div class='tab-content'> | ||
| + <div class='active tab-pane' id='markdown-<%= indexInCollection+1 %>'> | ||
| + <div id='wmd-button-bar-<%= indexInCollection+1 %>'></div> | ||
| + <textarea class='span7' id='wmd-input-<%= indexInCollection+1 %>' name='r2_content' rows='4'></textarea> | ||
| + </div> | ||
| + <div id='preview-<%= indexInCollection+1 %>' class='tab-pane'> | ||
| + <div id='wmd-preview-<%= indexInCollection+1 %>' class='wmd-preview reply2-wmd-preview'></div> | ||
| + </div> | ||
| + </div> | ||
| + <div class='sep10'></div> | ||
| + <button class='btn reply2_submit_btn' id='<%= reply._id %>'>回复</button> | ||
| + <span class='sp10'></span> | ||
| + <span class='col_fade'>Ctrl+Enter 快捷回复</span> | ||
| + </div> | ||
| + <% } %> | ||
| + </div> | ||
| + </div> | ||
| </div> |
| @@ -1,27 +1,31 @@ | ||
| <div class='cell reply2_item' reply_id='<%= reply._id %>'> | ||
| - <a id="<%- reply._id %>"></a> | ||
| - <div class='user_avatar block'> | ||
| - <a href="/user/<%= reply.author.name %>"><img src="<%= reply.author.avatar_url %>" title="<%= reply.author.name %>" /></a> | ||
| - </div> | ||
| - <span class='reply_author'><a class='dark' href="/user/<%= reply.author.name %>"><%= reply.author.name %></a></span> | ||
| - <span class='fr'> | ||
| - <% if (locals.current_user) { %> | ||
| - <a href='javascript:void(0);' class='dark reply2_at_btn'>@回复</a> | ||
| - <% } %> | ||
| - </span> | ||
| - <span class='col_fade'> | ||
| - 在 <a href="#<%- reply._id %>"><%= reply.friendly_create_at %></a> 回复 | ||
| - <% if (locals.current_user && current_user._id.toString() == reply.author._id.toString()) { %> | ||
| - <span class='sp10'></span> | ||
| - <a href='javascript:void(0)' class='delete_reply2_btn'><img class='user_icon' | ||
| - src="<%- config.site_static_host %>/images/trash_icon&16.png" title='删除' /></a> | ||
| - <% } %> | ||
| - </span> | ||
| - <!-- <div class='sep5'></div> --> | ||
| - <div class='reply_content'> | ||
| - <%- reply.content %> | ||
| - </div> | ||
| - <!-- <div class='cl'> | ||
| - <div class='sep5'></div> | ||
| - </div> --> | ||
| + <div class='author_content'> | ||
| + <a id="<%- reply._id %>"></a> | ||
| + <div class='user_avatar block'> | ||
| + <a href="/user/<%= reply.author.name %>"> | ||
| + <img src="<%= reply.author.avatar_url %>" title="<%= reply.author.name %>" /> | ||
| + </a> | ||
| + </div> | ||
| + <div class='user_info'> | ||
| + <span class='reply_author'><a class='dark' href="/user/<%= reply.author.name %>"><%= reply.author.name %></a></span> | ||
| + <span class='col_fade'> | ||
| + <a href="#<%- reply._id %>"><%= reply.friendly_create_at %></a> | ||
| + </span> | ||
| + </div> | ||
| + <div class='user_action fr'> | ||
| + <% if (locals.current_user && current_user._id.toString() == reply.author._id.toString()) { %> | ||
| + <a href='javascript:void(0)' class='delete_reply2_btn'> | ||
| + <img class='user_icon' src="<%- config.site_static_host %>/images/trash_icon&16.png" title='删除' /> | ||
| + </a> | ||
| + <% } %> | ||
| + <span> | ||
| + <% if (locals.current_user) { %> | ||
| + <a href='javascript:void(0);' class='dark reply2_at_btn'>回复</a> | ||
| + <% } %> | ||
| + </span> | ||
| + </div> | ||
| + </div> | ||
| + <div class='reply_content'> | ||
| + <%- reply.content %> | ||
| + </div> | ||
| </div> |
Chrome Firefox 下修复的问题
✓ 回复图片没有阴影
✓ 背景太亮, 去掉图片采用暗背景, 但文字背景还是亮的
✓ 头像使用圆角
✓ 不要采用并列的头像
✓ 回复按钮下方空隙大小不对
✓ Firefox 上文本不对齐. 设置
vertical-align✓ 话题列表增加最后操作时间
✓ 回复界面样式的简化
没有解决的问题:
✗ 手机访问, 我用 remote debugger 看了字号都是
14px但明显不对✗ 代码高亮的样式不如原先黑色明显, 没拿定注意
✗ Logo, 不懂设计不敢碰. 官方的 Logo 不知道是否合适
然后两张截图: