style(Frontend): Back frontend framework to Zui

Rebuilt the frontend framework from layui to Zui....
I will not change the frontend framework anymore
(Before the v2.0.0 release..

apps/lang/en.php

@@ -19,7 +19,11 @@ class en
     const nav_requests = 'Requests';
     const nav_upload = 'Upload';
     const nav_subtitles = 'Subtitles';
-    const nav_topten = 'Top 10';
+    const nav_rules = 'Rules';
     const nav_faq = 'FAQ';
-
+    const nav_staff = 'Staff';
+    const nav_more = 'More';
+    const nav_topten = 'Top 10';
+    const nav_stats = 'Stats';
+    const nav_log = 'Log';
 }

apps/lang/zh_CN.php

@@ -11,12 +11,19 @@
 
 class zh_CN
 {
+    const greeting = '你好，世界！';
+
     const nav_index = '首  页';
     const nav_forums = '论  坛';
     const nav_torrents = '种  子';
     const nav_requests = '求  种';
     const nav_upload = '做  种';
     const nav_subtitles = '字  幕';
-    const nav_topten = '排 行 榜';
-    const nav_faq = '问  题';
+    const nav_rules = '规  则';
+    const nav_faq = '常见问题';
+    const nav_staff = '管 理 组';
+    const nav_more = '更多';
+    const nav_topten = '排行榜';
+    const nav_stats = '统计数据';
+    const nav_log = '日志';
 }

apps/public/static/css/main.css

@@ -1,40 +1,26 @@
-@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic);
+@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic);
 /* font-family: 'Ubuntu', sans-serif; */
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
 /* font-family: 'Open Sans', sans-serif; */
 
 /*-----------------------------------------------------------------------------------
 /*	1.	Global properties (body, common classes, vertical rhythm, structure etc)
 /*-----------------------------------------------------------------------------------*/
 
-.text-left{text-align:left !important}
-.text-right{text-align:right !important}
-.text-center{text-align:center !important}
-.text-justify{text-align:justify !important}
-.text-nowrap{white-space:nowrap !important}
-
-.pull-left{float:left !important}
-.pull-right{float:right !important}
-
-.clearfix:before,.clearfix:after{content:" ";display:table}
-.clearfix:after{clear:both}
-
-code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}
-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}
-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25)}
-kbd kbd{padding:0;font-size:100%;font-weight:bold;box-shadow:none}
-pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333333;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
-pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}
-
 body{background-color:#f6f6f6}
 
-.img-rounded{border-radius:6px}
+.red{color:red}
+.yellow{color:yellow}
+.green{color:green}
+.blue{color:blue}
+.gray{color:gray}
+.black{color:black}
+.white{color:white}
 
-/*
- Extension of layui
- */
+.bgred{background-color:red !important}
+.bggreen{background-color:green !important}
 
-.layui-card-footer{position:relative;height:42px;line-height:42px;padding:0 15px;border-top:1px solid #f6f6f6;color:#333;border-radius:2px 2px 0 0;font-size:14px}
+.nowrap {white-space: nowrap;}
 
 /*-----------------------------------------------------------------------------------*/
 /*	2.	Auth page with prefix `auth-`
@@ -51,102 +37,76 @@ body{background-color:#f6f6f6}
 .auth-login-return-msg{margin-top:5px}
 
 /*-----------------------------------------------------------------------------------*/
-/*	2.	Header, Navigation & Menus
+/*	3.	Layout of Header, Navigation & Menus
 /*-----------------------------------------------------------------------------------*/
 
 /* Top Menu */
-#top-menu{background-color:#383838;color:#999;margin-bottom:30px;padding:3px 0}
+#top_menu{background-color:#383838;color:#999;margin-bottom:30px;padding:3px 0}
 
 /* Header with Logo */
-.header-top{margin-bottom:30px}
+.header-top{margin-bottom:20px}
 .logo .site-title,.logo .site-title a{font-size:50px;line-height:50px;margin:0 0 0 0;color:#FFFFFF}
 .logo .sub-title{font-family:'Open Sans',sans-serif;font-size:10px;line-height:11px;text-transform:capitalize;margin:0;padding-left:2px;letter-spacing:0;color:#F9F9F9}
 .logo .logo-img{display:block;margin-top:6px;float:left}
 @media (max-width:767px){.logo{text-align:center;margin-bottom:20px}}
 .tagline{color:#7E7E7E;display:inline-block;font-size:12px;margin:13px 0 0 15px}
 
 /* Nav menu with User Info */
-.header-nav {margin-bottom:15px}
-nav#menu .layui-nav-item{line-height:45px}
-.header-info{background-color:#eee;padding:5px}
+.navbar{margin-bottom:0}
+.navbar-custom{}
+.navbar-collapse-custom{}
+
+/* User Info Block */
+#info_block{background-color:#e0e0e0;padding:5px 10px}
+.color-invite{color:#1900d1}
+.color-bonus{color:#1900d1}
+.color-bet{color:#ff0000}
+.color-blackjack{color:#1900d1}
+.color-ratio{color:#1900d1}
+.color-seeding{color:#008000}
+.color-leeching{color:#8b0000}
+.color-completed{}
+.color-connectable{color:#1900d1}
+.color-friends{color:#ffc078}
+.color-rss{color:#5c7cfa}
+
+/* Main Container */
+.main-container{background-color:#eaeaea;padding-top:10px}
 
 /* Footer Menu */
-#footer-menu{background-color:#383838;color:#C3C0B9;font-size:12px;margin-top:30px;padding-bottom:10px;padding-top:15px}
-#footer-menu ul{list-style-type:none}
-#footer-menu li{float:left;margin-left:10px}
-#footer-menu a{color:#C3C0B9}
-#footer-menu a:hover{color:#E84807}
+#footer_menu{background-color:#383838;color:#C3C0B9;font-size:12px;margin-top:30px;padding-bottom:10px;padding-top:15px}
+#footer_menu p{margin:0}
+#footer_menu ul{list-style-type:none}
+#footer_menu li{float:left;margin-left:10px}
+#footer_menu a{color:#C3C0B9}
+#footer_menu a:hover{color:#E84807}
 
-.icon-seeding {color: green}
-.icon-leeching {color: red}
+/*-----------------------------------------------------------------------------------*/
+/*	4. Page of '/torrent'
+/*-----------------------------------------------------------------------------------*/
 
-#torrents-table{width:100%;border-collapse:collapse;table-layout:fixed}
+/* Common */
+.torrent-title-block{margin-bottom: 15px}
+.torrent-title{}
 
-.torrent-title-block{margin:15px}
-.torrent-action-item{padding:3px}
+/* '/torrent/upload' */
+#torrent_upload_table > tbody > tr > td:first-child{vertical-align:middle;text-align:right}
+#torrent_file{display:inline;margin-right:10px;width:220px}
 
-.torrent-filelist-modal{width:700px}
-ul#torrent-filelist ul{margin-left:1.25em}
-
-#torrent-structure ul{margin-left:15px}
-#torrent-structure ul,li{list-style-type:none;color:#000}
-#torrent-structure li div.string{padding:3px}
-#torrent-structure li div.integer{padding:3px}
-#torrent-structure li div.dictionary{padding:3px}
-#torrent-structure li div.list{padding:3px}
-#torrent-structure li div.string span.icon{color:#090;padding:2px}
-#torrent-structure li div.integer span.icon{color:#990;padding:2px}
-#torrent-structure li div.dictionary span.icon{color:#909;padding:2px}
-#torrent-structure li div.list span.icon{color:#009;padding:2px}
-#torrent-structure li span.title{font-weight:bold}
-
-.admin-panel {
-    font-size: 0;
-}
-
-.admin-panel-tree .layui-tree {
-    line-height: 32px;
-}
-
-.admin-panel-tree .layui-tree li h2 {
-    line-height: 36px;
-    border-left: 5px solid #009E94;
-    margin: 15px 0 5px;
-    padding: 0 10px;
-    background-color: #f2f2f2;
-}
-
-.admin-panel-tree {
-    border-right: 1px solid #eee;
-}
-.admin-panel-tree {
-    width: 220px;
-    min-height: 900px;
-    padding: 5px 0 20px;
-}
-.admin-panel-tree, .admin-panel-content {
-    display: inline-block;
-    vertical-align: top;
-    font-size: 14px;
-}
-
-.admin-panel-content {
-    width: 899px;
-    min-height: 900px;
-    padding: 20px 0 10px 20px;
-}
-
-.admin-panel-tree .layui-tree .site-tree-noicon a cite {
-    padding-left: 15px;
-}
-
-.admin-panel-tree .layui-tree li a cite {
-    padding: 0 8px;
-}
-
-.admin-panel-tree .layui-tree li a em {
-    font-size: 12px;
-    color: #bbb;
-    padding-right: 5px;
-    font-style: normal;
-}
+/* '/torrent/details' */
+.torrent-details-block{}
+.torrent-action-item{padding:3px}
+#torrent_extend_info_panel_group > hr{margin:0}
+
+/* '/torrent/structure' */
+#torrent_structure ul{}
+#torrent_structure ul,li{list-style-type:none;color:#000}
+#torrent_structure li div.string{padding:3px}
+#torrent_structure li div.integer{padding:3px}
+#torrent_structure li div.dictionary{padding:3px}
+#torrent_structure li div.list{padding:3px}
+#torrent_structure li div.string span.icon{color:#090;padding:2px}
+#torrent_structure li div.integer span.icon{color:#990;padding:2px}
+#torrent_structure li div.dictionary span.icon{color:#909;padding:2px}
+#torrent_structure li div.list span.icon{color:#009;padding:2px}
+#torrent_structure li span.title{font-weight:bold}

apps/public/static/js/main.js

@@ -16,14 +16,26 @@ function humanFileSize(bytes, fix, si) {
     return bytes.toFixed(fix ? fix : 2) + ' ' + units[u];
 }
 
+jQuery(document).ready(function() {
+    // Declare Const
+    const api_point = '/api/v1';
 
-layui.use('layui.all', function () {
-    // Get and short the call of the layui component
-    let $ = layui.jquery;
-    let layer = layui.layer;
-    let util = layui.util;
+    // Active tooltop
+    $('[data-toggle="tooltip"]').tooltip();
 
-    let api_point = '/api/v1';
+    // TODO Add Scroll to TOP fixbar
+
+
+
+    // Common Function
+    function create_error_notice(text,option) {
+        option = $.extend({
+            icon: 'exclamation-sign',
+            type: 'danger',
+            placement: 'top-right'
+        },option);
+        return new $.zui.Messager(text, option).show();
+    }
 
     // Convert ubbcode blcok text to html
     $(".ubbcode-block").html(function (index, oldhtml) {
@@ -39,12 +51,9 @@ layui.use('layui.all', function () {
             .replace(/<br ?\/?>/ig, '\n');
         return XBBCODE.process({text: oldhtml}).html;
     });
-    // TODO Add [hide] support
 
-    // Add quick to TOP fixbar
-    util.fixbar({showHeight: 100,});
 
-    // Add/Remove favour action
+    // Torrent favour Add/Remove action
     $('.torrent-favour').click(function () {
         let that = $(this);
         let tid = that.attr('data-tid');
@@ -54,12 +63,13 @@ layui.use('layui.all', function () {
             if (res.success) {
                 let old_is_stared = star.hasClass('fas');
                 star.toggleClass('fas', !old_is_stared).toggleClass('far', old_is_stared);
-                layer.msg(`Torrent(${tid}) ${res.result} from your favour successfully`, {
-                    icon: 6,
-                    offset: 'rt',
-                });
+                new $.zui.Messager(`Torrent(${tid}) ${res.result} from your favour successfully`, {
+                    icon: 'ok-sign',
+                    type: 'success',
+                    placement: 'top-right'
+                }).show();
             } else {
-                layer.alert(res.errors.join(', '), {icon: 2});
+                create_error_notice(res.errors.join(', '));
             }
         });
     });
@@ -75,12 +85,9 @@ layui.use('layui.all', function () {
             for (let k in tree) {
                 let v = tree[k];
                 if (typeof v == 'object') {
-                    ret += "<li " + (par === "" ? "" : "style='display:none' data-par = \"" + par + "\" ") + ">";
-                    ret += `<a href="javascript:" class="folder" data-folder-name="${k}"><i class="fa fa-folder fa-fw"></i> ${k}</a>`;
-                    ret += `<ul>${list_worker(v, par + "/" + k)}</ul>`;
-                    ret += '</li>';
+                    ret += `<li${par === '' ? ' class="open"':''}><a href="#">${k}</a><ul>${list_worker(v,par + "/" + k)}</ul></li>`;
                 } else {
-                    ret += `<li ` + (par === "" ? "" : "style='display:none' data-par = \"" + par + "\" ") + `><i class="fa fa-file fa-fw"></i> ${k} (<span class="file-size" data-size="${v}">${humanFileSize(v)}</span>)</li>`;
+                    ret += `<li><i class="fa fa-file fa-fw"></i> ${k} (<span class="file-size" data-size="${v}">${humanFileSize(v)}</span>)</li>`;
                 }
             }
             return ret;
@@ -89,38 +96,27 @@ layui.use('layui.all', function () {
         $.get(api_point + '/torrent/filelist', {'tid': tid}, function (res) {
             if (res.success) {
                 let file_list = res.result;
-
-                layer.open({
-                    btn: [],
-                    anim: 5,
-                    shadeClose: true, //开启遮罩关闭
-                    area: ['700px', '500px'],
-                    content: "<ul id='torrent-filelist'>" + list_worker(file_list) + "</ul>",
-                    success: function (layero, index) {
-                        $('#torrent-filelist a').click(function () {
-                            let that = $(this);
-                            let icon = that.find(' > i');
-                            let parent = that.parents('li:eq(0)');
-
-                            let old_is_open = icon.hasClass('fa-folder');
-                            let par = parent.attr('data-par');
-                            let expand = (par ? par : "") + "/" + that.attr('data-folder-name');
-
-                            icon.toggleClass('fa-folder', !old_is_open).toggleClass('fa-folder-open', old_is_open);
-                            $('#torrent-filelist li[data-par^="' + expand + '/"]').hide();  // 首先隐藏所有对应子项
-                            $('#torrent-filelist li[data-par$="' + expand + '"]').toggle();  // 然后对当前项可见性进行切换
-                        });
+                (new $.zui.ModalTrigger({
+                    name: 'torrent_filelist_model',
+                    showHeader: false,
+                    size: 'lg',
+                    //width: '700px',
+                    moveable: true,
+                    custom: "<ul  class='tree tree-lines tree-folders' data-ride='tree' id='torrent_filelist'>" + list_worker(file_list) + "</ul>"
+                })).show({
+                    shown:function () {
+                        $('#torrent_filelist').tree();
                     }
                 });
             } else {
-                layer.alert(res.errors.join(', '), {icon: 2});
+                create_error_notice(res.errors.join(', '));
             }
-        })
+        });
     });
 
     // For torrents structure page
-    if ($('#torrent-structure').length) {
-        $('#torrent-structure div.dictionary,div.list').click(function () {
+    if ($('#torrent_structure').length) {
+        $('#torrent_structure div.dictionary,div.list').click(function () {
             $(this).next('ul').toggle();
         });
     }