Skip to content

Commit

Permalink
调整响应式布局界面
Browse files Browse the repository at this point in the history
  • Loading branch information
zhou committed Jun 19, 2015
1 parent 87d5566 commit 66b2210
Show file tree
Hide file tree
Showing 15 changed files with 129 additions and 58 deletions.
5 changes: 3 additions & 2 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@

</dependencies>
<build>
<finalName>zblog</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
Expand All @@ -257,7 +258,7 @@
<configuration>
<version>3.0</version>
<failOnMissingWebXml>false</failOnMissingWebXml>
<warName>zblog</warName>
<warName>${project.build.finalName}</warName>
<!-- 打包时忽略目录 -->
<packagingExcludes>log/**,post/**</packagingExcludes>
<includeEmptyDirectories>true</includeEmptyDirectories>
Expand All @@ -272,7 +273,7 @@
<httpConnector>
<port>9080</port>
</httpConnector>
<scanIntervalSeconds>10</scanIntervalSeconds>
<scanIntervalSeconds>20</scanIntervalSeconds>
<webApp>
<contextPath>/</contextPath>
</webApp>
Expand Down
1 change: 1 addition & 0 deletions src/main/java/com/zblog/service/freemarker/ftl/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@
</div>
<h1 id="logo"><a href="${domain}/">${title} - zhouhaocheng.cn</a></h1>
<h2 id="tagline">${subtitle}</h2>
<a id="menu_button" href="#"><i id="icon_menu"></i></a>
</div>
1 change: 1 addition & 0 deletions src/main/resources/config/spring-base.xml
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<property name="dataSource" ref="dataSource" />
</bean>

<!-- 使用MapperScannerConfigurer和SqlSessionFactoryBean无法lazy-init -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:config/mybatis.xml" />
Expand Down
2 changes: 1 addition & 1 deletion src/main/webapp/WEB-INF/jsp/404.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<body>
<%@include file="common/header.html" %>
<div id="content" class="clearfix">
<div id="left_col">
<div id="left_col" class="clearfix">
<div class="post_wrap clearfix">
<div class="post">
<h3 class="title"><span>404</span></h3>
Expand Down
2 changes: 1 addition & 1 deletion src/main/webapp/WEB-INF/jsp/common/content.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<span class="month"><fmt:formatDate value="${post.createTime}" pattern="MMM"/></span>
<span class="year"><fmt:formatDate value="${post.createTime}" pattern="yyyy" /></span>
</li>
<li class="post_comment">${post.rcount}人阅读</li>
<li class="post_read">${post.rcount}人阅读</li>
<c:if test="${post.type=='post'}">
<li class="post_category"><a href="${g.domain}/categorys/${post.category.name}">${post.category.name}</a></li>
</c:if>
Expand Down
4 changes: 2 additions & 2 deletions src/main/webapp/WEB-INF/jsp/index.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body>
<%@include file="common/header.html" %>
<div id="content" class="clearfix">
<div id="left_col">
<div id="left_col" class="clearfix">
<c:if test="${category!=null||tag!=null||archive!=null}">
<div id="archive_headline"><h2>
<c:choose>
Expand Down Expand Up @@ -49,7 +49,7 @@
<span class="month"><fmt:formatDate value="${post.createTime}" pattern="MMM" /></span>
<span class="year"><fmt:formatDate value="${post.createTime}" pattern="yyyy" /></span>
</li>
<li class="post_comment">${post.rcount}人阅读</li>
<li class="post_read">${post.rcount}人阅读</li>
<li class="post_author">
<a rel="author" title="${post.user.nickName}发布" href="${g.domain}/authors/${post.creator}">${post.user.nickName}</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/main/webapp/WEB-INF/jsp/post.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<body>
<%@include file="common/header.html" %>
<div id="content" class="clearfix">
<div id="left_col">
<div id="left_col" class="clearfix">
<jsp:include page="common/content.jsp" flush="false" />
<div id="comments_wrapper">
<div id="comment_header" class="clearfix">
Expand Down
57 changes: 39 additions & 18 deletions src/main/webapp/resource/css/responsive.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,49 @@
#right_col{ display: none;}
#left_col{margin-right: 0;}
.post .title a,
.post .title span,
.post_content,
#archive_headline h2,
.post .post_tags,
#header{width: 100%;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);height: auto;}
#menu{position: absolute;top: 0;right: -70%;display: none;width: 70%;background-color: #fff;border-left:1px solid #ccc;}
#menu ul{float: none;margin: 0;background-color: #fff;}
#menu ul li{float: none;}
#menu ul li a{display: block;text-align: left;height: 46px;line-height: 46px;border-width: 0 0 1px 0;border-color:#ccc;border-style: solid;}
#menu ul ul li a{width: auto;padding-left:3em;border-width:0 0 1px 0;}
#menu ul ul{position: relative;display: block;top: 0;margin: 0;padding: 0;}
#header #logo{margin: 12px 0 12px 4%;font-size: 22px;position: relative;left: 0;top: 0;}
#tagline{display: none;}

#menu_button{border-left: 1px solid #ddd;color: #bbb;display: block;height: 100%;margin: 0;position: absolute;right: 0;text-decoration: none;top: 0;width: 50px;}
#menu_button:hover{background-color: #009dc4;color:#fff;}
#icon_menu:after{font-family: "icomoon-zblog";content: "\e601"; font-size: 34px;font-style: normal;position: relative;right: -7px;top: 7px;}

#left_col{margin-right: 0;width: auto;float: none;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);margin:75px 10px 30px 10px;}
#post_mask{display: none;}
#right_col{width: auto;float:none;padding: 20px;background-color: #fff;border-top: 1px solid #ccc;}
#right_col .side_widget{display: none;}
#right_col #introduction_widget{display: block;}
#archive_headline h2, #bread_crumb ul,
.post .title a, .post .title span,
.post_content, .post .post_tags,
#page_nav .page,
#bread_crumb ul,
#comment_header,
#comments,
#previous_next_post div{margin-right: 0;}
#post_mask{background-color: #fff;background-image: none;}
#comment_header, #comments,
#previous_next_post div{margin-right: 0;border-right: 0;}

.post .title a, .post .title span{margin-left: 0;}
.post .title{background-color: #fff;background-image: none;margin:0;}
.post_content p.excerpt{overflow: hidden;}

.meta{width: 22%;}
#header, #post_mask, #bread_crumb, #comments_wrapper,
.post, #page_nav, #previous_next_post, #footer{width: 78%;}
.meta:first-of-type{border-top: none;}
#post_mask, .post{width: 78%;}
#comment_header{margin-left:22%;background-color: #fff;}
#archive_headline, #bread_crumb, #page_nav, #comments_wrapper, #previous_next_post, #footer{width: 100%;}
#archive_headline, #page_nav, #comments, #previous_next_post{background-color: #fff;}

#footer{height: 60px;}
#footer #copyright{margin-top: 20px;text-align: left;padding-left: 15px;}
#return_top{height: 60px;width: 60px;right: 0;bottom: 0;position: absolute;border-left: 1px solid #aaa;
border-radius:0;background-image:url(../img/return_top1.gif);background-color: #fff;}

@media screen and (max-width:480px) {
#header{width: 100%;}
.meta{width: 0;display: none;}
#header, #post_mask, #bread_crumb, #comments_wrapper,
.post, #page_nav, #previous_next_post, #footer{width: 100%;}
.post{width: 100%;}
#comment_header{margin-left:0};

.post .title{background-image: none;}
#previous_next_post{display: none;}
}
15 changes: 8 additions & 7 deletions src/main/webapp/resource/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@ a:hover{color: #009dc4;}
/*************** menu ***************/
#menu{background:#fff;border-bottom: 1px solid #ccc;height: 35px;width: 100%;}
#menu ul{float:right;list-style:none;margin:0 20px 0 0;}
#menu ul ul{float:none;display:none;position:absolute; top:35px; right:0px;margin:0;}
#menu ul ul{float:none;display:none;position:absolute; top:36px; right:0px;margin:0;}
#menu ul li{float:left; font-size:10px; position:relative; }
#menu ul ul li{float:none; height:auto;text-align:left; }

#menu ul li a{font-size:10px; padding:0 20px; text-align:center; color:#888; display:inline-block; height:35px; line-height:36px; overflow:hidden; }
#menu ul ul li a{font-size:11px; background:#fff; border:1px solid #ccc;margin-bottom:-1px; padding:10px 20px 8px;
display:block;position:relative;width:180px;height:auto; line-height:180%; text-align:left; }
#menu ul li:hover > a ,#menu ul li li a:hover{background:#eee; color:#333;}
#menu ul ul li a{font-size:11px; background:#fff; border:1px solid #ccc; border-width:0 1px 1px 1px;
display:block;position:relative;width:180px; text-align:left; }
#menu ul li:hover > a{background:#eee; color:#333;}
#menu ul li:hover ul{display: block;}

#content{min-height: 100%;position: absolute;top: 0;width: 100%;}
Expand Down Expand Up @@ -159,9 +159,10 @@ a:hover{color: #009dc4;}
.meta li span.date{font-size:40px; float:right; display:block; line-height:40px; margin:0 0 0 5px; }
.meta li span.month{text-transform:uppercase; padding:13px 0 0px 0; display:block; font-size:10px; }
.meta li span.year{display:block; font-size:10px; }
.meta li.post_read:after{content: "\e613";}
.meta li.post_author:after{content: "\e609";}
.meta li.post_category:after{content: "\e608";}
.meta li.post_comment:after{content: "\e61a";}
.meta li.post_comment:after{content: "\e606";}

.post_tags{background: url("../img/meta_bg.gif") repeat scroll 0 0 rgb(0, 0, 0);font-size: 11px;margin: 0 340px 0 0;padding: 9px 3% 8px 4%}
.post_tags ul{float: right; margin: 0;}
Expand Down Expand Up @@ -256,7 +257,7 @@ ul.comment-name-date li{padding: 0 0 5px;}
#social_link li a{display: block;width: 20px;height: 20px;text-decoration: none;}
#social_link li a:after{color: #aaa;display: inline-block;font-family: "icomoon-zblog";font-size: 18px;}
#social_link li.rss_button a:after{content:"\e603"; }
#social_link li.github_button a:after{content:"\eab1"; }
#social_link li.github_button a:after{content:"\e604"; }
#social_link li.rss_button a:hover:after{color:#ffcc00;}
#social_link li.github_button a:hover:after{color:#16b9dc;}

Expand Down Expand Up @@ -287,7 +288,7 @@ ul.comment-name-date li{padding: 0 0 5px;}

/* return top */
#return_top{position:fixed; bottom:15px; right:20px; display:block; text-indent:100%;white-space:nowrap; width:45px; height:45px; margin:0; padding:0;
background:url(../img/return_top2.gif) no-repeat center center #555;
background:url(../img/return_top2.gif) no-repeat center center #555;overflow:hidden;
-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; opacity:0.5;
}
#return_top:hover{opacity:1;background-color: #009dc4; }
Binary file modified src/main/webapp/resource/font/icomoon-zblog.eot
Binary file not shown.
Loading

0 comments on commit 66b2210

Please sign in to comment.