Skip to content
This repository has been archived by the owner on Nov 2, 2020. It is now read-only.

Commit

Permalink
style(Frontend): Back frontend framework to Zui
Browse files Browse the repository at this point in the history
Rebuilt the frontend framework from layui to Zui....
I will not change the frontend framework anymore
(Before the v2.0.0 release..
  • Loading branch information
Rhilip committed May 30, 2019
1 parent 900c999 commit b08c2ed
Show file tree
Hide file tree
Showing 22 changed files with 486 additions and 457 deletions.
8 changes: 6 additions & 2 deletions apps/lang/en.php
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
11 changes: 9 additions & 2 deletions apps/lang/zh_CN.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '日志';
}
174 changes: 67 additions & 107 deletions apps/public/static/css/main.css
Original file line number Diff line number Diff line change
@@ -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-`
Expand All @@ -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}
86 changes: 41 additions & 45 deletions apps/public/static/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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');
Expand All @@ -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(', '));
}
});
});
Expand All @@ -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;
Expand All @@ -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();
});
}
Expand Down
Loading

0 comments on commit b08c2ed

Please sign in to comment.