From 3d9e2bfde63058948bb4fd0b7cd511ba4c3fa99a Mon Sep 17 00:00:00 2001 From: hylin Date: Tue, 25 Mar 2014 15:56:29 +0800 Subject: [PATCH] =?UTF-8?q?1.=E9=A1=B5=E9=9D=A2=E5=B7=A6=E4=BE=A7=E4=B8=BB?= =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=AE=BD=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?= =?UTF-8?q?=EF=BC=8Cmax-width=E8=AE=BE=E7=BD=AE=E4=B8=BA1400=EF=BC=8C?= =?UTF-8?q?=E9=81=BF=E5=85=8D=E5=9C=A81920=E7=AD=89=E9=AB=98=E5=88=86?= =?UTF-8?q?=E8=BE=A8=E7=8E=87=E4=B8=8B=E8=BF=87=E4=BA=8E=E5=88=86=E6=95=A3?= =?UTF-8?q?=202.=E8=AE=BF=E9=97=AE=E8=BF=87=E7=9A=84=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8F=98=E6=B5=85=EF=BC=8C=E4=BE=BF=E4=BA=8E?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=BF=AB=E9=80=9F=E8=BF=87=E6=BB=A4=E5=B7=B2?= =?UTF-8?q?=E8=AE=BF=E9=97=AE=E5=86=85=E5=AE=B9=203.=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=EF=BC=9A=E6=B5=8F=E8=A7=88/=E5=9B=9E=E5=A4=8D?= =?UTF-8?q?=E9=87=8F=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=97=B6=E9=97=B4=EF=BC=8C?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4=EF=BC=8C?= =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=9B=9E=E5=A4=8D=E5=A4=B4=E5=83=8F=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E6=A0=87=E9=A2=98=E5=AD=97=E4=BD=93=E8=B0=83?= =?UTF-8?q?=E6=95=B4=204.=E7=A7=BB=E5=8A=A8=E7=AB=AF=EF=BC=9A=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=95=99=E5=87=BA=E5=B7=A6=E5=8F=B3=E8=BE=B9=E8=B7=9D?= =?UTF-8?q?=205.=E7=A7=BB=E5=8A=A8=E7=AB=AF=EF=BC=9A=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E5=9B=BE=E7=89=87=E8=87=AA=E9=80=82=E5=BA=94?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=206.=E7=A7=BB=E5=8A=A8=E7=AB=AF=EF=BC=9A?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BB=91=E5=8A=A8js=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/javascripts/responsive.js | 33 ++++++++++++++++++++++-------- public/stylesheets/responsive.css | 34 ++++++++++++++++++++++++++++--- public/stylesheets/style.css | 21 +++++++++++++------ views/topic/abstract.html | 26 ++++++++++++----------- 4 files changed, 84 insertions(+), 30 deletions(-) diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js index 82f4707..642ebcd 100644 --- a/public/javascripts/responsive.js +++ b/public/javascripts/responsive.js @@ -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); diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css index 41b21ed..f00a145 100644 --- a/public/stylesheets/responsive.css +++ b/public/stylesheets/responsive.css @@ -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; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 69328de..b6a49eb 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -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 { diff --git a/views/topic/abstract.html b/views/topic/abstract.html index c44331a..a625f60 100644 --- a/views/topic/abstract.html +++ b/views/topic/abstract.html @@ -1,12 +1,12 @@
- + - + <%= topic.reply_count %> @@ -16,21 +16,23 @@ + <% if (topic.reply) {%> + + + <%= topic.reply.friendly_create_at %> + + <% } %> + <% if (!topic.reply) {%> + <%= topic.friendly_create_at %> + <% } %> + +
<% if (topic.top) { %> 置顶 <% } %> <%= topic.title %> - - <% if (topic.reply) {%> - - - <%= topic.reply.friendly_create_at %> - - <% } %> - <% if (!topic.reply) {%> - <%= topic.friendly_create_at %> - <% } %> +