作者 Karson

优化移动端下Tabs滚动

优化移动端下系统配置页面展示
... ... @@ -20,6 +20,15 @@
.edit-form table > tbody > tr:hover td a.btn-delcfg {
visibility: visible;
}
@media (max-width: 767px) {
.edit-form table tr th:nth-last-child(-n + 2), .edit-form table tr td:nth-last-child(-n + 2) {
display: none;
}
.edit-form table tr td .msg-box {
display: none;
}
}
</style>
<div class="panel panel-default panel-intro">
<div class="panel-heading">
... ... @@ -36,6 +45,7 @@
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<!--@formatter:off-->
{foreach $siteList as $index=>$vo}
<div class="tab-pane fade {$vo.active ? 'active in' : ''}" id="{$vo.name}">
<div class="widget-body no-padding">
... ... @@ -316,6 +326,7 @@ value2|title2</textarea>
</form>
</div>
<!--@formatter:on-->
</div>
</div>
</div>
... ...
... ... @@ -275,7 +275,7 @@ return [
'multiplenav' => false,
//是否开启多选项卡(仅在开启多级菜单时起作用)
'multipletab' => true,
//后台皮肤,为空时表示使用skin-green
//后台皮肤,为空时表示使用skin-black-green
'adminskin' => '',
//后台是否启用面包屑
'breadcrumb' => false,
... ...
... ... @@ -271,6 +271,18 @@ form.form-horizontal .control-label {
border-bottom-color: transparent;
cursor: default;
}
@media (max-width: 768px) {
.panel-intro > .panel-heading .nav-tabs {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: -1px;
}
.panel-intro > .panel-heading .nav-tabs > li {
display: inline-block;
float: none;
}
}
/*单表格*/
.panel-tabs .panel-heading {
padding: 12px 15px 12px 15px;
... ... @@ -480,19 +492,16 @@ form.form-horizontal .control-label {
color: #222e32;
}
.multiplenav .content-wrapper,
.multiplenav .right-side {
.multiplenav .right-side,
.multiplenav .main-sidebar {
padding-top: 50px;
}
.multiplenav #firstnav .nav-addtabs {
padding-right: 450px;
}
@media (max-width: 767px) {
.multipletab .fixed .content-wrapper,
.multipletab .fixed .right-side {
padding-top: 94px;
}
.multipletab .content-wrapper,
.multipletab .right-side {
.multipletab.multiplenav .content-wrapper,
.multipletab.multiplenav .right-side {
padding-top: 94px;
}
}
... ... @@ -1022,7 +1031,7 @@ table.table-nowrap thead > tr > th {
.left-side {
padding-top: 50px;
}
.multiplenav .main-sidebar {
.multipletab.multiplenav .main-sidebar {
padding-top: 95px;
}
.n-bootstrap .n-right {
... ...
... ... @@ -55,10 +55,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'adminlte', 'form'], functi
//切换左侧sidebar显示隐藏
$(document).on("click fa.event.toggleitem", ".sidebar-menu li > a", function (e) {
var nextul = $(this).next("ul");
if (nextul.length > 0) {
return;
}
if (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu"))) {
if (nextul.length == 0 && (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu")))) {
$(".sidebar-menu li").removeClass("active");
}
//当外部触发隐藏的a时,触发父辈a的事件
... ...
... ... @@ -338,6 +338,20 @@ form.form-horizontal .control-label {
border-bottom-color: transparent;
cursor: default;
}
@media (max-width: @screen-tablet) {
.nav-tabs {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: -1px;
> li {
display: inline-block;
float: none;
}
}
}
}
}
... ... @@ -595,7 +609,7 @@ form.form-horizontal .control-label {
}
.multiplenav {
.content-wrapper, .right-side {
.content-wrapper, .right-side, .main-sidebar {
padding-top: 50px;
}
... ... @@ -606,14 +620,12 @@ form.form-horizontal .control-label {
@media (max-width: 767px) {
.multipletab {
.fixed .content-wrapper, .fixed .right-side {
padding-top: 94px;
}
&.multiplenav {
.content-wrapper, .right-side {
padding-top: 94px;
}
}
}
}
.multipletab {
... ... @@ -1266,7 +1278,7 @@ table.table-nowrap {
padding-top: 50px;
}
.multiplenav {
.multipletab.multiplenav {
.main-sidebar {
padding-top: 95px;
}
... ...