Skip to content

S
solo
Commit 8fae6ef1 authored by Van's avatar Van
Browse files
Options

✨ #12180 responsive

parent 8edac061
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 62 deletions
src/main/webapp/skins/9IPHP/css/base.css
View file @ 8fae6ef1
......@@ -593,15 +593,12 @@ a[class*=" icon-"]:hover {
/* end common */
/* start reset common */
.icon-list:before {
content: "\f0ca";
}
.icon-home:before {
content: "\f015";
}
.icon-logout:before {
content: "\ea14";
}
.icon-views:before {
content: "\e900";
}
.icon-comments:before {
content: "\f0e6";
}
......@@ -626,6 +623,12 @@ a[class*=" icon-"]:hover {
.icon-refresh:before {
content: "\f021";
}
.icon-logout:before {
content: "\ea14";
}
.icon-views:before {
content: "\e900";
}
.icon-register:before {
content: "\e973";
}
......@@ -1103,19 +1106,57 @@ aside .tag.tooltipped {
.wrapper {
width: 100%;
min-width: auto;
padding: 0 10px;
box-sizing: border-box;
}
.main-wrap > main {
margin-right: 0;
}
.main-wrap {
.main-wrap,
.responsive {
display: block;
}
aside {
width: 100%;
padding: 20px 10px;
box-sizing: border-box;
}
.banner {
margin-bottom: 20px;
}
.banner small,
.banner .fn-right,
.navbar {
display: none;
}
.icon-list {
position: absolute;
right: 10px;
top: 20px;
background-color: #fff;
font-size: 20px;
padding: 8px 6px;
cursor: pointer;
}
.responsive .list {
background-color: #fff;
position: absolute;
width: 100%;
border: 1px solid #eee;
left: 0;
display: none;
z-index: 10;
top: 75px;
}
.responsive .list li.current {
background-color: #eee;
}
}
/* end responsive */
\ No newline at end of file
src/main/webapp/skins/9IPHP/css/fonts/icomoon.svg
View file @ 8fae6ef1
......@@ -21,5 +21,6 @@
<glyph unicode="&#xf073;" glyph-name="date" horiz-adv-x="951" d="M73.143 0h164.571v164.571h-164.571v-164.571zM274.286 0h182.857v164.571h-182.857v-164.571zM73.143 201.143h164.571v182.857h-164.571v-182.857zM274.286 201.143h182.857v182.857h-182.857v-182.857zM73.143 420.571h164.571v164.571h-164.571v-164.571zM493.714 0h182.857v164.571h-182.857v-164.571zM274.286 420.571h182.857v164.571h-182.857v-164.571zM713.143 0h164.571v164.571h-164.571v-164.571zM493.714 201.143h182.857v182.857h-182.857v-182.857zM292.571 694.857v164.571c0 9.714-8.571 18.286-18.286 18.286h-36.571c-9.714 0-18.286-8.571-18.286-18.286v-164.571c0-9.714 8.571-18.286 18.286-18.286h36.571c9.714 0 18.286 8.571 18.286 18.286zM713.143 201.143h164.571v182.857h-164.571v-182.857zM493.714 420.571h182.857v164.571h-182.857v-164.571zM713.143 420.571h164.571v164.571h-164.571v-164.571zM731.429 694.857v164.571c0 9.714-8.571 18.286-18.286 18.286h-36.571c-9.714 0-18.286-8.571-18.286-18.286v-164.571c0-9.714 8.571-18.286 18.286-18.286h36.571c9.714 0 18.286 8.571 18.286 18.286zM950.857 731.428v-731.429c0-40-33.143-73.143-73.143-73.143h-804.571c-40 0-73.143 33.143-73.143 73.143v731.429c0 40 33.143 73.143 73.143 73.143h73.143v54.857c0 50.286 41.143 91.429 91.429 91.429h36.571c50.286 0 91.429-41.143 91.429-91.429v-54.857h219.429v54.857c0 50.286 41.143 91.429 91.429 91.429h36.571c50.286 0 91.429-41.143 91.429-91.429v-54.857h73.143c40 0 73.143-33.143 73.143-73.143z" />
<glyph unicode="&#xf077;" glyph-name="up" d="M961.714 190.286l-94.857-94.286c-14.286-14.286-37.143-14.286-51.429 0l-303.429 303.429-303.429-303.429c-14.286-14.286-37.143-14.286-51.429 0l-94.857 94.286c-14.286 14.286-14.286 37.714 0 52l424 423.429c14.286 14.286 37.143 14.286 51.429 0l424-423.429c14.286-14.286 14.286-37.714 0-52z" />
<glyph unicode="&#xf0c1;" glyph-name="link" horiz-adv-x="951" d="M832 256c0 14.857-5.714 28.571-16 38.857l-118.857 118.857c-10.286 10.286-24.571 16-38.857 16-16.571 0-29.714-6.286-41.143-18.286 18.857-18.857 41.143-34.857 41.143-64 0-30.286-24.571-54.857-54.857-54.857-29.143 0-45.143 22.286-64 41.143-12-11.429-18.857-24.571-18.857-41.714 0-14.286 5.714-28.571 16-38.857l117.714-118.286c10.286-10.286 24.571-15.429 38.857-15.429s28.571 5.143 38.857 14.857l84 83.429c10.286 10.286 16 24 16 38.286zM430.286 658.857c0 14.286-5.714 28.571-16 38.857l-117.714 118.286c-10.286 10.286-24.571 16-38.857 16s-28.571-5.714-38.857-15.429l-84-83.429c-10.286-10.286-16-24-16-38.286 0-14.857 5.714-28.571 16-38.857l118.857-118.857c10.286-10.286 24.571-15.429 38.857-15.429 16.571 0 29.714 5.714 41.143 17.714-18.857 18.857-41.143 34.857-41.143 64 0 30.286 24.571 54.857 54.857 54.857 29.143 0 45.143-22.286 64-41.143 12 11.429 18.857 24.571 18.857 41.714zM941.714 256c0-43.429-17.714-85.714-48.571-116l-84-83.429c-30.857-30.857-72.571-47.429-116-47.429-44 0-85.714 17.143-116.571 48.571l-117.714 118.286c-30.857 30.857-47.429 72.571-47.429 116 0 45.143 18.286 88 50.286 119.429l-50.286 50.286c-31.429-32-73.714-50.286-118.857-50.286-43.429 0-85.714 17.143-116.571 48l-118.857 118.857c-31.429 31.429-48 72.571-48 116.571 0 43.429 17.714 85.714 48.571 116l84 83.429c30.857 30.857 72.571 47.429 116 47.429 44 0 85.714-17.143 116.571-48.571l117.714-118.286c30.857-30.857 47.429-72.571 47.429-116 0-45.143-18.286-88-50.286-119.429l50.286-50.286c31.429 32 73.714 50.286 118.857 50.286 43.429 0 85.714-17.143 116.571-48l118.857-118.857c31.429-31.429 48-72.571 48-116.571z" />
<glyph unicode="&#xf0ca;" glyph-name="list" d="M219.429 146.286c0-60.571-49.143-109.714-109.714-109.714s-109.714 49.143-109.714 109.714 49.143 109.714 109.714 109.714 109.714-49.143 109.714-109.714zM219.429 438.857c0-60.571-49.143-109.714-109.714-109.714s-109.714 49.143-109.714 109.714 49.143 109.714 109.714 109.714 109.714-49.143 109.714-109.714zM1024 201.143v-109.714c0-9.714-8.571-18.286-18.286-18.286h-694.857c-9.714 0-18.286 8.571-18.286 18.286v109.714c0 9.714 8.571 18.286 18.286 18.286h694.857c9.714 0 18.286-8.571 18.286-18.286zM219.429 731.428c0-60.571-49.143-109.714-109.714-109.714s-109.714 49.143-109.714 109.714 49.143 109.714 109.714 109.714 109.714-49.143 109.714-109.714zM1024 493.714v-109.714c0-9.714-8.571-18.286-18.286-18.286h-694.857c-9.714 0-18.286 8.571-18.286 18.286v109.714c0 9.714 8.571 18.286 18.286 18.286h694.857c9.714 0 18.286-8.571 18.286-18.286zM1024 786.286v-109.714c0-9.714-8.571-18.286-18.286-18.286h-694.857c-9.714 0-18.286 8.571-18.286 18.286v109.714c0 9.714 8.571 18.286 18.286 18.286h694.857c9.714 0 18.286-8.571 18.286-18.286z" />
<glyph unicode="&#xf0e6;" glyph-name="comments" d="M402.286 731.428c-178.286 0-329.143-100.571-329.143-219.429 0-62.857 42.286-123.429 115.429-165.714l55.429-32-20-48c12 6.857 24 14.286 35.429 22.286l25.143 17.714 30.286-5.714c28.571-5.143 57.714-8 87.429-8 178.286 0 329.143 100.571 329.143 219.429s-150.857 219.429-329.143 219.429zM402.286 804.571c222.286 0 402.286-130.857 402.286-292.571s-180-292.571-402.286-292.571c-34.857 0-68.571 3.429-100.571 9.143-47.429-33.714-101.143-58.286-158.857-73.143-15.429-4-32-6.857-49.143-9.143h-1.714c-8.571 0-16.571 6.857-18.286 16.571v0c-2.286 10.857 5.143 17.714 11.429 25.143 22.286 25.143 47.429 47.429 66.857 94.857-92.571 53.714-152 136.571-152 229.143 0 161.714 180 292.571 402.286 292.571zM872 136.571c19.429-47.429 44.571-69.714 66.857-94.857 6.286-7.429 13.714-14.286 11.429-25.143v0c-2.286-10.286-10.857-17.714-20-16.571-17.143 2.286-33.714 5.143-49.143 9.143-57.714 14.857-111.429 39.429-158.857 73.143-32-5.714-65.714-9.143-100.571-9.143-103.429 0-198.286 28.571-269.714 75.429 16.571-1.143 33.714-2.286 50.286-2.286 122.857 0 238.857 35.429 327.429 99.429 95.429 69.714 148 164 148 266.286 0 29.714-4.571 58.857-13.143 86.857 96.571-53.143 159.429-137.714 159.429-233.143 0-93.143-59.429-175.429-152-229.143z" />
</font></defs></svg>
\ No newline at end of file
src/main/webapp/skins/9IPHP/css/selection.json
View file @ 8fae6ef1
{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M219.429 804.571c0 60.571-49.143 109.714-109.714 109.714s-109.714-49.143-109.714-109.714 49.143-109.714 109.714-109.714 109.714 49.143 109.714 109.714zM219.429 512c0 60.571-49.143 109.714-109.714 109.714s-109.714-49.143-109.714-109.714 49.143-109.714 109.714-109.714 109.714 49.143 109.714 109.714zM1024 749.714v109.714c0 9.714-8.571 18.286-18.286 18.286h-694.857c-9.714 0-18.286-8.571-18.286-18.286v-109.714c0-9.714 8.571-18.286 18.286-18.286h694.857c9.714 0 18.286 8.571 18.286 18.286zM219.429 219.429c0 60.571-49.143 109.714-109.714 109.714s-109.714-49.143-109.714-109.714 49.143-109.714 109.714-109.714 109.714 49.143 109.714 109.714zM1024 457.143v109.714c0 9.714-8.571 18.286-18.286 18.286h-694.857c-9.714 0-18.286-8.571-18.286-18.286v-109.714c0-9.714 8.571-18.286 18.286-18.286h694.857c9.714 0 18.286 8.571 18.286 18.286zM1024 164.571v109.714c0 9.714-8.571 18.286-18.286 18.286h-694.857c-9.714 0-18.286-8.571-18.286-18.286v-109.714c0-9.714 8.571-18.286 18.286-18.286h694.857c9.714 0 18.286 8.571 18.286 18.286z"
],
"width": 1024,
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"list-ul"
],
"defaultCode": 61642,
"grid": 14
},
"attrs": [],
"properties": {
"name": "list",
"id": 290,
"order": 106,
"prevSize": 28,
"code": 61642
},
"setIdx": 1,
"setId": 1,
"iconIdx": 0
},
{
"icon": {
"paths": [
......@@ -20,13 +47,13 @@
"properties": {
"name": "home",
"id": 289,
"order": 104,
"order": 107,
"prevSize": 28,
"code": 61461
},
"setIdx": 1,
"setId": 1,
"iconIdx": 0
"iconIdx": 1
},
{
"icon": {
......@@ -47,13 +74,13 @@
"properties": {
"name": "comments",
"id": 286,
"order": 91,
"order": 110,
"prevSize": 28,
"code": 61670
},
"setIdx": 1,
"setId": 1,
"iconIdx": 3
"iconIdx": 4
},
{
"icon": {
......@@ -74,13 +101,13 @@
"properties": {
"name": "date",
"id": 285,
"order": 92,
"order": 111,
"prevSize": 28,
"code": 61555
},
"setIdx": 1,
"setId": 1,
"iconIdx": 4
"iconIdx": 5
},
{
"icon": {
......@@ -101,13 +128,13 @@
"properties": {
"name": "search",
"id": 284,
"order": 93,
"order": 112,
"prevSize": 28,
"code": 61442
},
"setIdx": 1,
"setId": 1,
"iconIdx": 5
"iconIdx": 6
},
{
"icon": {
......@@ -128,13 +155,13 @@
"properties": {
"name": "up",
"id": 283,
"order": 94,
"order": 113,
"prevSize": 28,
"code": 61559
},
"setIdx": 1,
"setId": 1,
"iconIdx": 6
"iconIdx": 7
},
{
"icon": {
......@@ -155,13 +182,13 @@
"properties": {
"name": "inbox",
"id": 280,
"order": 95,
"order": 114,
"prevSize": 28,
"code": 61468
},
"setIdx": 1,
"setId": 1,
"iconIdx": 7
"iconIdx": 8
},
{
"icon": {
......@@ -182,13 +209,13 @@
"properties": {
"name": "tags",
"id": 279,
"order": 96,
"order": 115,
"prevSize": 28,
"code": 61484
},
"setIdx": 1,
"setId": 1,
"iconIdx": 8
"iconIdx": 9
},
{
"icon": {
......@@ -210,13 +237,13 @@
"properties": {
"name": "link",
"id": 278,
"order": 97,
"order": 116,
"prevSize": 28,
"code": 61633
},
"setIdx": 1,
"setId": 1,
"iconIdx": 9
"iconIdx": 10
},
{
"icon": {
......@@ -237,13 +264,13 @@
"properties": {
"name": "refresh",
"id": 277,
"order": 98,
"order": 117,
"prevSize": 28,
"code": 61473
},
"setIdx": 1,
"setId": 1,
"iconIdx": 10
"iconIdx": 11
},
{
"icon": {
......@@ -268,13 +295,13 @@
"ligatures": "exit, signout",
"name": "logout",
"id": 288,
"order": 89,
"order": 108,
"prevSize": 32,
"code": 59924
},
"setIdx": 1,
"setId": 1,
"iconIdx": 1
"iconIdx": 2
},
{
"icon": {
......@@ -296,7 +323,7 @@
{}
],
"properties": {
"order": 90,
"order": 109,
"id": 287,
"name": "views",
"prevSize": 32,
......@@ -304,7 +331,7 @@
},
"setIdx": 1,
"setId": 1,
"iconIdx": 2
"iconIdx": 3
},
{
"icon": {
......@@ -333,13 +360,13 @@
"ligatures": "user-plus, user2",
"name": "register",
"id": 115,
"order": 99,
"order": 118,
"prevSize": 32,
"code": 59763
},
"setIdx": 1,
"setId": 1,
"iconIdx": 11
"iconIdx": 12
},
{
"icon": {
......@@ -366,13 +393,13 @@
"ligatures": "cog, gear",
"name": "setting",
"id": 148,
"order": 100,
"order": 119,
"prevSize": 32,
"code": 59796
},
"setIdx": 1,
"setId": 1,
"iconIdx": 12
"iconIdx": 13
},
{
"icon": {
......@@ -395,13 +422,13 @@
"ligatures": "enter, signin",
"name": "login",
"id": 275,
"order": 101,
"order": 120,
"prevSize": 32,
"code": 59923
},
"setIdx": 1,
"setId": 1,
"iconIdx": 13
"iconIdx": 14
},
{
"icon": {
......@@ -424,7 +451,7 @@
{}
],
"properties": {
"order": 102,
"order": 121,
"id": 0,
"prevSize": 32,
"code": 59649,
......@@ -432,7 +459,7 @@
},
"setIdx": 1,
"setId": 1,
"iconIdx": 14
"iconIdx": 15
}
],
"height": 1024,
......
src/main/webapp/skins/9IPHP/header.ftl
View file @ 8fae6ef1
......@@ -30,30 +30,30 @@
<div class="navbar">
<div class="fn-clear wrapper">
<nav class="fn-left">
<a href="${servePath}">
<i class="icon-home"></i>
${indexLabel}
</a>
<#list pageNavigations as page>
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
${page.pageTitle}
</a>
</#list>
<a href="${servePath}/dynamic.html" rel="section">
<i class="icon-refresh"></i> ${dynamicLabel}
</a>
<a href="${servePath}/tags.html" rel="section">
<i class="icon-tags"></i> ${allTagsLabel}
</a>
<a href="${servePath}/archives.html">
<i class="icon-inbox"></i> ${archiveLabel}
</a>
<a rel="archive" href="${servePath}/links.html">
<i class="icon-link"></i> ${linkLabel}
</a>
<a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section">
<i class="icon-rss"></i> RSS
<a href="${servePath}">
<i class="icon-home"></i>
${indexLabel}
</a>
<#list pageNavigations as page>
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
${page.pageTitle}
</a>
</#list>
<a href="${servePath}/dynamic.html" rel="section">
<i class="icon-refresh"></i> ${dynamicLabel}
</a>
<a href="${servePath}/tags.html" rel="section">
<i class="icon-tags"></i> ${allTagsLabel}
</a>
<a href="${servePath}/archives.html">
<i class="icon-inbox"></i> ${archiveLabel}
</a>
<a rel="archive" href="${servePath}/links.html">
<i class="icon-link"></i> ${linkLabel}
</a>
<a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section">
<i class="icon-rss"></i> RSS
</a>
</nav>
<div class="fn-right">
<form class="form" target="_blank" action="http://zhannei.baidu.com/cse/site">
......@@ -64,4 +64,70 @@
</div>
</div>
</div>
</header>
\ No newline at end of file
</header>
<div class="responsive fn-none">
<i class="icon-list"></i>
<ul class="list">
<#if isLoggedIn>
<li>
<a href="${servePath}/admin-index.do#main" title="${adminLabel}">
<i class="icon-setting"></i> ${adminLabel}
</a>
</li>
<li>
<a href="${logoutURL}">
<i class="icon-logout"></i> ${logoutLabel}
</a>
</li>
<#else>
<li>
<a href="${loginURL}">
<i class="icon-login"></i> ${loginLabel}
</a>
</li>
<li>
<a href="${servePath}/register">
<i class="icon-register"></i> ${registerLabel}
</a>
</li>
</#if>
<li>
<a href="${servePath}">
<i class="icon-home"></i>
${indexLabel}
</a>
</li>
<#list pageNavigations as page>
<li>
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
${page.pageTitle}
</a>
</li>
</#list>
<li>
<a href="${servePath}/dynamic.html" rel="section">
<i class="icon-refresh"></i> ${dynamicLabel}
</a>
</li>
<li>
<a href="${servePath}/tags.html" rel="section">
<i class="icon-tags"></i> ${allTagsLabel}
</a>
</li>
<li>
<a href="${servePath}/archives.html">
<i class="icon-inbox"></i> ${archiveLabel}
</a>
</li>
<li>
<a rel="archive" href="${servePath}/links.html">
<i class="icon-link"></i> ${linkLabel}
</a>
</li>
<li>
<a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section">
<i class="icon-rss"></i> RSS
</a>
</li>
</ul>
</div>
\ No newline at end of file
src/main/webapp/skins/9IPHP/js/common.js
View file @ 8fae6ef1
......@@ -40,6 +40,10 @@ var Skin = {
$goTop.hide();
}
if ($(window).width() < 701) {
return false;
}
if ($(window).scrollTop() > $banner.height()) {
$navbar.addClass('pin');
$('.main-wrap').parent().css('margin-top', '86px')
......@@ -57,6 +61,16 @@ var Skin = {
this.className = 'current'
}
});
$('.responsive .list a').each(function () {
if (this.href === location.href) {
$(this).parent().addClass('current');
}
});
$('.responsive .icon-list').click(function () {
$('.responsive .list').slideToggle();
});
},
_initArticleCommon: function () {
// TOC
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment