✨ #12180 responsive

src/main/webapp/skins/9IPHP/css/base.css

@@ -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

@@ -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

 {
   "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

@@ -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>
+</header>
\ No newline at end of file
+<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

@@ -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