mirror of
https://github.com/cnodejs/nodeclub.git
synced 2025-12-08 19:55:55 +00:00
1.页面左侧主内容宽度自适应，max-width设置为1400，避免在1920等高分辨率下过于分散
2.访问过的链接颜色变浅，便于用户快速过滤已访问内容 3.移动端：浏览/回复量，更新时间，标题位置调整，取消回复头像显示，标题字体调整 4.移动端：页面留出左右边距 5.移动端：内容中的图片自适应宽度 6.移动端：优化滑动js代码逻辑
This commit is contained in:
hylin
parent
f0ad8f7502
commit
3d9e2bfde6
@ -4,7 +4,12 @@ $(document).ready(function(){
|
||||
$sidebar = $('#sidebar'),
|
||||
$main = $('#main'),
|
||||
startX = 0,
|
||||
swipeThreshold = 10,
|
||||
startY = 0,
|
||||
delta = {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
swipeThreshold = 20,
|
||||
toggleSideBar = function(){
|
||||
var isShow = $responsiveBtn.data('is-show'),
|
||||
mainHeight = $main.height(),
|
||||
@ -19,31 +24,41 @@ $(document).ready(function(){
|
||||
touchstart = function(e){
|
||||
var touchs = e.targetTouches;
|
||||
startX = +touchs[0].pageX;
|
||||
startY = +touchs[0].pageY;
|
||||
delta.x = delta.y = 0;
|
||||
document.body.addEventListener('touchmove', touchmove, false);
|
||||
document.body.addEventListener('touchend', touchend, false);
|
||||
},
|
||||
touchmove = function(e){
|
||||
var touchs = e.changedTouches;
|
||||
if(Math.abs(+touchs[0].pageX - startX) > swipeThreshold){
|
||||
delta.x = +touchs[0].pageX - startX;
|
||||
delta.y = +touchs[0].pageY - startY;
|
||||
//当水平距离大于垂直距离时，才认为是用户想滑动打开右侧栏
|
||||
if(Math.abs(delta.x) > Math.abs(delta.y)){
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
touchend = function(e){
|
||||
var touchs = e.changedTouches,
|
||||
x = +touchs[0].pageX,
|
||||
winWidth = $(window).width(),
|
||||
docWidth = $(document).width(),
|
||||
isShow = $responsiveBtn.data('is-show');
|
||||
if(!isShow && (startX > winWidth*3/4) && Math.abs(startX - x) > swipeThreshold){
|
||||
delta.x = +touchs[0].pageX - startX;
|
||||
//右侧栏未显示&&用户touch点在屏幕右侧1/4区域内&&move距离大于阀值时，打开右侧栏
|
||||
if(!isShow && (startX > docWidth*3/4) && Math.abs(delta.x) > swipeThreshold){
|
||||
$responsiveBtn.trigger('click');
|
||||
}
|
||||
if(isShow && (startX < winWidth*1/4) && Math.abs(startX - x) > swipeThreshold){
|
||||
//右侧栏显示中&&用户touch点在屏幕左侧侧1/4区域内&&move距离大于阀值时，关闭右侧栏
|
||||
if(isShow && (startX < docWidth*1/4) && Math.abs(delta.x) > swipeThreshold){
|
||||
$responsiveBtn.trigger('click');
|
||||
}
|
||||
startX = 0;
|
||||
startX = startY = 0;
|
||||
delta.x = delta.y = 0;
|
||||
document.body.removeEventListener('touchmove', touchmove, false);
|
||||
document.body.removeEventListener('touchend', touchend, false);
|
||||
};
|
||||
|
||||
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
|
||||
document.body.addEventListener('touchstart', touchstart);
|
||||
document.body.addEventListener('touchmove', touchmove);
|
||||
document.body.addEventListener('touchend', touchend);
|
||||
}
|
||||
|
||||
$responsiveBtn.on('click', toggleSideBar);
|
||||
|
||||
@ -33,11 +33,13 @@
|
||||
|
||||
@media (max-width: 979px) {
|
||||
.navbar{
|
||||
margin:0 auto;
|
||||
margin:0 5px;
|
||||
z-index: 999;
|
||||
width: auto !important;
|
||||
}
|
||||
.navbar .container, #main, #content, #footer_main{
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.navbar .nav.pull-right{
|
||||
float: none;
|
||||
@ -53,6 +55,9 @@
|
||||
margin: 20px auto;
|
||||
min-height: 0;
|
||||
}
|
||||
#content .panel{
|
||||
margin: 0 5px;
|
||||
}
|
||||
#sidebar{
|
||||
float: none;
|
||||
position: absolute;
|
||||
@ -69,12 +74,35 @@
|
||||
transition: .3s right;
|
||||
}
|
||||
#content .topic_title{
|
||||
white-space: normal;
|
||||
font-size: 1em !important;
|
||||
line-height: 1em !important;
|
||||
vertical-align: baseline;
|
||||
width: 100%;
|
||||
}
|
||||
#content .last_time{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#content .last_time img{
|
||||
display: none;
|
||||
}
|
||||
#content .reply_count{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
.topic_title_wrapper{
|
||||
line-height: 1em;
|
||||
padding-left: 40px;
|
||||
}
|
||||
#main .topic_content p a.content_img, #main .reply_content p a.content_img{
|
||||
width: 100%;
|
||||
}
|
||||
#footer{
|
||||
margin: 0 5px 5px;
|
||||
}
|
||||
#footer_main{
|
||||
text-align: center;
|
||||
|
||||
@ -12,7 +12,9 @@ body {
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 1120px;
|
||||
width: 90%;
|
||||
max-width: 1400px;
|
||||
min-width: 960px;
|
||||
margin: 40px auto;
|
||||
min-height:400px;
|
||||
position: relative;
|
||||
@ -22,7 +24,7 @@ body {
|
||||
}
|
||||
#content {
|
||||
padding: 0;
|
||||
width: 818px;
|
||||
margin-right: 300px;
|
||||
}
|
||||
#sidebar {
|
||||
width: 290px;
|
||||
@ -417,7 +419,7 @@ a.user_avatar:hover {
|
||||
}
|
||||
.reply_content {
|
||||
padding-left: 50px;
|
||||
color: black;
|
||||
color: #333;
|
||||
}
|
||||
.reply_editor {
|
||||
height: 200px;
|
||||
@ -446,9 +448,15 @@ a.topic_title {
|
||||
font-size: 16px;
|
||||
}
|
||||
#topic_list a.topic_title {
|
||||
color: black;
|
||||
color: #333;
|
||||
}
|
||||
#topic_list a.topic_title:visited{
|
||||
color: #888;
|
||||
}
|
||||
.topic_title_wrapper{
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.star_name {
|
||||
}
|
||||
img.unread {
|
||||
@ -604,7 +612,8 @@ textarea[id^=wmd-input] {
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar .container {
|
||||
width: 1120px;
|
||||
width: 100%;
|
||||
min-width: 960px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.navbar .brand {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div class='cell'>
|
||||
|
||||
<a class="user_avatar" href="/user/<%= topic.author.name %>">
|
||||
<a class="user_avatar pull-left" href="/user/<%= topic.author.name %>">
|
||||
<img src="<%= topic.author.avatar_url %>"
|
||||
title="<%= topic.author.name %>"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<span class="reply_count">
|
||||
<span class="reply_count pull-left">
|
||||
<span class="count_of_replies" title="回复数">
|
||||
<%= topic.reply_count %>
|
||||
</span>
|
||||
@ -16,21 +16,23 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<% if (topic.reply) {%>
|
||||
<a class='last_time pull-right' href="/topic/<%= topic._id %><%- '#' + topic.reply._id %>">
|
||||
<img class="user_small_avatar" src="<%= topic.reply.author.avatar_url %>">
|
||||
<%= topic.reply.friendly_create_at %>
|
||||
</a>
|
||||
<% } %>
|
||||
<% if (!topic.reply) {%>
|
||||
<span class='last_time pull-right'><%= topic.friendly_create_at %></span>
|
||||
<% } %>
|
||||
|
||||
<!--<%- partial('tag/tag_in_abstract',{collection:topic.tags, as:'tag'}) %>-->
|
||||
<div class="topic_title_wrapper">
|
||||
<a class='topic_title' href='/topic/<%= topic._id %>'>
|
||||
<% if (topic.top) { %>
|
||||
<span class='put_top'>置顶</span>
|
||||
<% } %>
|
||||
<%= topic.title %>
|
||||
</a>
|
||||
|
||||
<% if (topic.reply) {%>
|
||||
<a class='last_time' href="/topic/<%= topic._id %><%- '#' + topic.reply._id %>">
|
||||
<img class="user_small_avatar" src="<%= topic.reply.author.avatar_url %>">
|
||||
<%= topic.reply.friendly_create_at %>
|
||||
</a>
|
||||
<% } %>
|
||||
<% if (!topic.reply) {%>
|
||||
<span class='last_time'><%= topic.friendly_create_at %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user