🎨 #12724

src/main/resources/lang_en_US.properties

@@ -24,6 +24,7 @@
 # Author: Dongxu Wang
 #
 
+setMobileLabel=Set to mobile skin
 configSiteLabel=Go to the site link to configure GitHub, Twitter, etc.
 hljsThemeLabel=hljs theme:
 tocLabel=ToC

src/main/resources/lang_zh_CN.properties

@@ -24,6 +24,7 @@
 # Author: Dongxu Wang
 #
 
+setMobileLabel=\u8BBE\u7F6E\u4E3A\u79FB\u52A8\u7AEF\u76AE\u80A4
 configSiteLabel=\u524D\u5F80\u914D\u7F6E GitHub\uFF0CTwitter \u7B49\u7AD9\u70B9\u94FE\u63A5
 hljsThemeLabel=\u4EE3\u7801\u9AD8\u4EAE\u4E3B\u9898\uFF1A
 tocLabel=\u76EE\u5F55

src/main/webapp/admin/admin-label.ftl

@@ -19,6 +19,7 @@
 -->
 <#include "../common-template/label.ftl"/>
 <script type="text/javascript">
+    Label.setMobileLabel = '${setMobileLabel}'
     Label.pushSuccLabel = '${pushSuccLabel}'
     Label.pushToHacpaiLabel = '${pushToHacpaiLabel}'
     Label.uploadMsg = '${uploadMsg}'

src/main/webapp/js/admin/themeList.js

@@ -42,7 +42,6 @@ admin.themeList = {
         var preference = result.preference
 
         // skin
-        $('#skinMain').data('skinDirName', preference.skinDirName)
         var skins = eval('(' + preference.skins + ')')
         var skinsHTML = ''
         for (var i = 0; i < skins.length; i++) {
@@ -56,19 +55,23 @@ admin.themeList = {
             skins[i].skinName
             + '</div><img class="skinPreview" src="'
             + Label.staticServePath + '/skins/' + skins[i].skinDirName
-            + '/preview.png"/><div><button class="update small" data-name="' +
+            + '/preview.png"/><div><button class="small update fn__left" data-name="' +
             skins[i].skinDirName + '">' + Label.enableLabel +
-            '</button><button class="small" onclick="window.open(\'' +
-            Label.servePath +
-            '?skin=' + skins[i].skinName + '\')">'
-            + Label.previewLabel + '</button></div></div>'
+            '</button><button class="small fn__right" onclick="window.open(\'' +
+            Label.servePath + '?skin=' + skins[i].skinName + '\')">'
+            + Label.previewLabel + '</button><button class="small mobile fn__left">' +
+            Label.setMobileLabel + '</button></div></div>'
         }
         $('#skinMain').append(skinsHTML + '<div class=\'fn__clear\'></div>')
 
         $('.skinItem .update').click(function () {
           $('.skinItem').removeClass('selected')
           $(this).closest('.skinItem').addClass('selected')
-          $('#skinMain').data('skinDirName', $(this).data('name'))
+          admin.preference.update()
+        })
+        $('.skinItem .mobile').click(function () {
+          $('.skinItem').removeClass('selected')
+          $(this).closest('.skinItem').addClass('selected')
           admin.preference.update()
         })
 

src/main/webapp/scss/admin.scss

@@ -113,33 +113,43 @@ button:hover {
 .icon-close:before {
   content: "\e909";
 }
+
 .icon-move-down:before {
   content: "\e90a";
 }
+
 .icon-move-up:before {
   content: "\e90b";
 }
+
 .icon-unordered-list:before {
   content: "\e004";
 }
+
 .icon-info:before {
   content: "\e00d";
 }
+
 .icon-article:before {
   content: "\e61d";
 }
+
 .icon-setting:before {
   content: "\e604";
 }
+
 .icon-cmts:before {
   content: "\e60a";
 }
+
 .icon-refresh:before {
   content: "\e60b";
 }
+
 .icon-chevron-down:before {
   content: "\e618";
 }
+
 .icon-chevron-up:before {
   content: "\e619";
 }
@@ -562,7 +572,6 @@ button#submitArticle:hover {
 
 .skinPreview {
   height: 160px;
-    margin: 6px;
   width: 280px;
 }
 
@@ -574,6 +583,9 @@ button#submitArticle:hover {
   line-height: 24px;
   margin: 10px;
   text-align: center;
+  button:first-child {
+    margin-left: 10px;
+  }
 }
 
 #skinMain .skinItem.selected,