mirror_php/typecho
1
0
Fork 0
mirror of https://github.com/typecho/typecho.git synced 2025-03-20 01:49:40 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1097 from typecho/dev

Browse Source 
Optimize admin UI on mobile platform
This commit is contained in:
joyqi 2021-05-21 11:46:25 +08:00 committed by GitHub
commit 2f6a0c6f36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 220 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
admin/common-js.php
View File

@ -76,16 +76,33 @@
// 导航菜单 tab 聚焦时展开下拉菜单
(function () {
$('#typecho-nav-list').find('.parent a').focus(function() {
$('#typecho-nav-list').find('.child').hide();
$(this).parents('.root').find('.child').show();
});
$('.operate').find('a').focus(function() {
$('#typecho-nav-list').find('.child').hide();
});
})();
const menuBar = $('.menu-bar').click(function () {
const nav = $(this).next('#typecho-nav-list');
if (!$(this).toggleClass('focus').hasClass('focus')) {
nav.removeClass('expanded noexpanded');
}
});
$('.main, .typecho-foot').on('click touchstart', function () {
if (menuBar.hasClass('focus')) {
menuBar.trigger('click');
}
});
$('#typecho-nav-list ul.root').each(function () {
const ul = $(this), nav = ul.parent();
ul.on('click touchend', '.parent a', function (e) {
nav.removeClass('noexpanded').addClass('expanded');
if ($(window).width() < 576 && e.type == 'click') {
return false;
}
}).find('.child')
.append($('<li class="return"><a><?php _e('返回'); ?></a></li>').click(function () {
nav.removeClass('expanded').addClass('noexpanded');
return false;
}));
});
if ($('.typecho-login').length == 0) {
$('a').each(function () {

49
admin/css/style.css
View File

@ -138,11 +138,11 @@ select { border: 1px solid #CCC; height: 28px; }
/** 后台头部导航 */
.typecho-head-nav { padding: 0 10px; background: #292D33; position: relative; }
.typecho-head-nav a { padding: 0 20px; height: 36px; line-height: 36px; color: #BBB; }
.typecho-head-nav a, .typecho-head-nav button.menu-bar { padding: 0 20px; height: 36px; line-height: 36px; color: #BBB; }
.typecho-head-nav a:focus, .typecho-head-nav a:hover { color: #FFF; text-decoration: none; }
.typecho-head-nav a:focus, .typecho-head-nav a:hover, .typecho-head-nav button.menu-bar:focus, .typecho-head-nav button.menu-bar:hover { color: #FFF; text-decoration: none; }
.typecho-head-nav a.menu-bar { display: none; border-right: 1px solid #383D45; }
.typecho-head-nav button.menu-bar { display: none; }
.typecho-head-nav #typecho-nav-list { float: left; }
@ -154,6 +154,8 @@ select { border: 1px solid #CCC; height: 28px; }
.typecho-head-nav #typecho-nav-list > ul .child { position: absolute; list-style: none; top: 36px; display: none; margin: 0; padding: 0; min-width: 160px; max-width: 240px; background: #202328; z-index: 250; }
.typecho-head-nav #typecho-nav-list > ul .child li.return { display: none; }
.typecho-head-nav #typecho-nav-list > ul .child li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.typecho-head-nav #typecho-nav-list > ul .child li a:hover, .typecho-head-nav #typecho-nav-list > ul .child li a:focus { background: #292D33; }
@ -172,16 +174,25 @@ select { border: 1px solid #CCC; height: 28px; }
.typecho-head-nav .operate a:hover { background-color: #202328; }
@media (max-width: 575px) { .typecho-head-nav { padding: 0; }
@media (max-width: 575px) { @keyframes out { from { left: 0%; }
to { left: -100%; } }
@keyframes in { from { left: -100%; }
to { left: 0%; } }
.typecho-head-nav { padding: 0; position: fixed; bottom: 0; width: 100%; z-index: 10; }
.typecho-head-nav #typecho-nav-list { display: none; }
.typecho-head-nav .operate a:last-child { border-right-width: 0; }
.typecho-head-nav a.menu-bar { display: inline-block; }
.typecho-head-nav a.menu-bar.focus { color: #FFF; }
.typecho-head-nav a.menu-bar.focus + #typecho-nav-list { display: block; float: none; position: absolute; top: 36px; width: 240px; }
.typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul { float: none; }
.typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul:first-child { border: none; }
.typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul .parent a { display: block; pointer-events: none; }
.typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul .child { position: static; } }
.typecho-head-nav button.menu-bar { display: inline-block; border: none; background: #292D33; border-right: 1px solid #383D45; }
.typecho-head-nav button.menu-bar.focus { color: #FFF; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list { display: block; float: none; position: absolute; bottom: 36px; width: 100%; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul { float: none; border-bottom: 1px solid #383D45; position: static; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul:first-child { border-left: none; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .parent a { display: block; border: none; background: #202328; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child { position: absolute; bottom: 0; left: 100%; top: auto; z-index: 20; width: 100%; max-width: 100%; min-width: auto; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li { border-bottom: 1px solid #383D45; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li.return { display: block; text-align: center; font-size: 12px; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li.return a { color: #777; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list.expanded { animation: out .15s ease-out forwards; }
.typecho-head-nav button.menu-bar.focus + #typecho-nav-list.noexpanded { animation: in .15s ease-out forwards; } }
/** 注脚 */
.typecho-foot { padding: 4em 0 3em; color: #999; line-height: 1.8; text-align: center; }
@ -223,7 +234,7 @@ select { border: 1px solid #CCC; height: 28px; }
.front-archive { padding-left: 1.5em; }
.profile-avatar { border: 1px dashed #D9D9D6; max-width: 100%; }
.profile-avatar { width: 220px; height: 220px; border-radius: 10px; }
/** 增加配置面板内部的错误样式 by 70 */
/** 安装样式 @author mingcheng @date 2008-09-06 */
@ -317,9 +328,8 @@ select { border: 1px solid #CCC; height: 28px; }
.typecho-list-operate input[type="checkbox"] { vertical-align: text-top; }
.typecho-list-operate .operate { float: left; }
.typecho-list-operate .search { float: right; }
@media (min-width: 576px) { .typecho-list-operate .operate { float: left; }
.typecho-list-operate .search { float: right; } }
.typecho-list-operate span.operate-delete, a.operate-delete, .typecho-list-operate span.operate-button-delete, a.operate-button-delete { color: #B94A48; }
@ -422,7 +432,7 @@ a.operate-reply { color: #545c30; }
.typecho-post-area .submit .right button { margin-left: 5px; }
.typecho-post-area .right { float: right; padding-left: 24px; }
.typecho-post-area .right { float: right; }
.typecho-post-area .left { float: left; }
@ -531,6 +541,11 @@ a.operate-reply { color: #545c30; }
/* 拖动排序 */
.tDnD_whileDrag { background-color: #FFFBCC; }
@media (max-width: 575px) { .typecho-list-operate .search { margin-top: 10px; }
.typecho-table-wrap { padding: 10px; margin: 0 -10px; }
.typecho-option-submit button[type="submit"] { width: 100%; }
.profile-avatar { width: 110px; height: 110px; } }
/** 导入扩展样式 */
/** icons */
.icons-sprite, .icons-icon-delete, .icons-icon-edit, .icons-icon-exlink, .icons-icon-upload-active, .icons-icon-upload, .icons-mime-application, .icons-mime-archive, .icons-mime-audio, .icons-mime-html, .icons-mime-image, .icons-mime-office, .icons-mime-script, .icons-mime-text, .icons-mime-unknow, .icons-mime-video, .i-edit, .i-delete, .i-upload, .i-upload-active, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow { background-image: url("../img/icons.png?_=01c3ae1"); background-repeat: no-repeat; }
@ -856,6 +871,8 @@ a.operate-reply { color: #545c30; }
.preview #btn-cancel-preview { display: inline-block; }
@media (max-width: 575px) { #wmd-spacer2, #wmd-olist-button, #wmd-ulist-button, #wmd-heading-button, #wmd-hr-button, #wmd-more-button, #wmd-spacer3, #wmd-undo-button, #wmd-redo-button, #wmd-spacer4, #wmd-fullscreen-button, #wmd-exit-fullscreen-button, #btn-fullscreen-upload { display: none; } }
/** Jquery Timepicker */
#ui-datepicker-div { display: none; margin-top: -1px; padding: 10px; border: 1px solid #D9D9D6; background: #FFF; }

2
admin/header.php
View File

@ -20,7 +20,7 @@ $header = Typecho_Plugin::factory('admin/header.php')->header($header);
<meta charset="<?php $options->charset(); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title><?php _e('%s - %s - Powered by Typecho', $menu->title, $options->title); ?></title>
<meta name="robots" content="noindex, nofollow">
<?php echo $header; ?>

2
admin/menu.php
View File

@ -1,6 +1,6 @@
<?php if(!defined('__TYPECHO_ADMIN__')) exit; ?>
<div class="typecho-head-nav clearfix" role="navigation">
<a class="menu-bar" href="###" onclick="$(this).toggleClass('focus'); return false;"><?php _e('菜单'); ?></a>
<button class="menu-bar"><?php _e('菜单'); ?></button>
<nav id="typecho-nav-list">
<?php $menu->output(); ?>
</nav>

127
admin/src/scss/_header.scss
View File

@ -5,6 +5,7 @@
$border-nav: 1px solid #383D45;
$color-nav-bg: #292D33;
$color-nav-text-normal: #BBB;
$color-nav-text-mute: #777;
$color-nav-text-hover: #FFF;
$color-nav-btn-hover: #202328;
$color-nav-child-focus: #6DA1BB;
@ -14,7 +15,7 @@ $color-nav-child-focus: #6DA1BB;
background: $color-nav-bg;
position: relative;
a {
a, button.menu-bar {
padding: 0 20px;
height: 36px;
line-height: 36px;
@ -25,11 +26,10 @@ $color-nav-child-focus: #6DA1BB;
color: $color-nav-text-hover;
text-decoration: none;
}
}
&.menu-bar {
display: none;
border-right: $border-nav;
}
button.menu-bar {
display: none;
}
#typecho-nav-list {
@ -67,6 +67,10 @@ $color-nav-child-focus: #6DA1BB;
z-index: 250;
li {
&.return {
display: none;
}
a {
overflow: hidden;
text-overflow : ellipsis;
@ -118,49 +122,98 @@ $color-nav-child-focus: #6DA1BB;
}
@media (max-width: $screen-phone - 1px) {
.typecho-head-nav {
padding: 0;
@keyframes out {
from {left: 0%;}
to {left: -100%;}
}
#typecho-nav-list {
display: none;
}
@keyframes in {
from {left: -100%;}
to {left: 0%;}
}
.operate {
a:last-child {
border-right-width: 0;
}
}
.typecho-head-nav {
padding: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
a.menu-bar {
display: inline-block;
&.focus {
color: $color-nav-text-hover;
#typecho-nav-list {
display: none;
}
.operate {
a:last-child {
border-right-width: 0;
}
}
button.menu-bar {
display: inline-block;
border: none;
background: $color-nav-bg;
border-right: $border-nav;
& + #typecho-nav-list {
display: block;
float: none;
&.focus {
color: $color-nav-text-hover;
& + #typecho-nav-list {
display: block;
float: none;
position: absolute;
bottom: 36px;
width: 100%;
& > ul {
float: none;
border-bottom: $border-nav;
position: static;
&:first-child {
border-left: none;
}
.parent {
a {
display: block;
border: none;
background: $color-nav-btn-hover;
}
}
.child {
position: absolute;
top: 36px;
width: 240px;
& > ul {
float: none;
&:first-child {
border: none;
}
.parent {
bottom: 0;
left: 100%;
top: auto;
z-index: 20;
width: 100%;
max-width: 100%;
min-width: auto;
li {
border-bottom: $border-nav;
&.return {
display: block;
text-align: center;
font-size: 12px;
a {
display: block;
pointer-events: none;
color: $color-nav-text-mute;
}
}
.child {
position: static;
}
}
}
}
&.expanded {
animation: out .15s ease-out forwards;
}
&.noexpanded {
animation: in .15s ease-out forwards;
}
}
}
}
}
}

48
admin/src/scss/components/_editor.scss
View File

@ -78,21 +78,21 @@
height: 20px;
}
@include editor-button(bold)
@include editor-button(italic)
@include editor-button(link)
@include editor-button(quote)
@include editor-button(code)
@include editor-button(image)
@include editor-button(olist)
@include editor-button(ulist)
@include editor-button(heading)
@include editor-button(hr)
@include editor-button(more)
@include editor-button(undo)
@include editor-button(redo)
@include editor-button(fullscreen)
@include editor-button(exit-fullscreen)
@include editor-button(bold);
@include editor-button(italic);
@include editor-button(link);
@include editor-button(quote);
@include editor-button(code);
@include editor-button(image);
@include editor-button(olist);
@include editor-button(ulist);
@include editor-button(heading);
@include editor-button(hr);
@include editor-button(more);
@include editor-button(undo);
@include editor-button(redo);
@include editor-button(fullscreen);
@include editor-button(exit-fullscreen);
}
}
@ -308,3 +308,21 @@
.preview-loading { background-image: url(../img/ajax-loader.gif); background-position: center; background-repeat: no-repeat }
#btn-cancel-preview { display: inline-block }
}
@media (max-width: $screen-phone - 1px) {
#wmd-spacer2,
#wmd-olist-button,
#wmd-ulist-button,
#wmd-heading-button,
#wmd-hr-button,
#wmd-more-button,
#wmd-spacer3,
#wmd-undo-button,
#wmd-redo-button,
#wmd-spacer4,
#wmd-fullscreen-button,
#wmd-exit-fullscreen-button,
#btn-fullscreen-upload {
display: none;
}
}

44
admin/src/scss/style.scss
View File

@ -171,8 +171,9 @@ a.button:hover, a.balloon-button:hover {
}
.profile-avatar {
border: 1px dashed #D9D9D6;
max-width: 100%;
width: 220px;
height: 220px;
border-radius: 10px;
}
/** 增加配置面板内部的错误样式 by 70 */
@ -435,12 +436,15 @@ a.button:hover, a.balloon-button:hover {
vertical-align: text-top;
}
.typecho-list-operate .operate {
float: left;
}
.typecho-list-operate .search {
float: right;
@media (min-width: $screen-phone) {
.typecho-list-operate {
.operate {
float: left;
}
.search {
float: right;
}
}
}
.typecho-list-operate span.operate-delete, a.operate-delete,
@ -708,7 +712,6 @@ a.operate-reply {
.typecho-post-area .right {
float: right;
padding-left: 24px;
}
.typecho-post-area .left {
@ -949,6 +952,29 @@ background: #FFF1A8;
background-color: #FFFBCC;
}
@media (max-width: $screen-phone - 1px) {
.typecho-list-operate {
.search {
margin-top: 10px;
}
}
.typecho-table-wrap {
padding: 10px;
margin: 0 -10px;
}
.typecho-option-submit {
button[type="submit"] {
width: 100%;
}
}
.profile-avatar {
width: 110px;
height: 110px;
}
}
/**
* 导入扩展样式

2
admin/theme-editor.php
View File

@ -31,7 +31,7 @@ Typecho_Widget::widget('Widget_Themes_Files')->to($files);
<form method="post" name="theme" id="theme" action="<?php $security->index('/action/themes-edit'); ?>">
<label for="content" class="sr-only"><?php _e('编辑源码'); ?></label>
<textarea name="content" id="content" class="w-100 mono" <?php if(!$files->currentIsWriteable()): ?>readonly<?php endif; ?>><?php echo $files->currentContent(); ?></textarea>
<p class="submit">
<p class="typecho-option typecho-option-submit">
<?php if($files->currentIsWriteable()): ?>
<input type="hidden" name="theme" value="<?php echo $files->currentTheme(); ?>" />
<input type="hidden" name="edit" value="<?php echo $files->currentFile(); ?>" />