TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented the content tabs style, minor fixes in the back-end styling.

This commit is contained in:
alekseybobkov 2014-06-27 00:17:22 +11:00
parent 25f02c33cd
commit 4e2d6b5da8
10 changed files with 172 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
modules/backend/assets/css/october.css
View File

@ -7856,6 +7856,11 @@ label {
.control-list table.table.data .list-pagination {
font-size: 14px;
text-align: right;
padding-top: 20px;
}
.control-list table.table.data .list-pagination .loading-indicator div {
margin-left: 20px;
font-size: 12px;
}
table.table.data {
font-size: 12px;
@ -8079,7 +8084,7 @@ table.table.data tbody tr.safe td a,
table.table.data tbody tr.special td a,
table.table.data tbody tr.safe th a,
table.table.data tbody tr.special th a {
font-style: italic;
color: #98a7a8;
}
table.table.data tfoot a {
color: #666666;
@ -10159,6 +10164,47 @@ body.dropdown-open .dropdown-overlay {
margin-right: 0;
padding-right: 0;
}
.control-tabs.content-tabs > ul.nav-tabs {
position: relative;
}
.control-tabs.content-tabs > ul.nav-tabs:before {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #e3e5e7;
}
.control-tabs.content-tabs > ul.nav-tabs li {
margin-right: 0;
border-right: 1px solid #e3e5e7;
}
.control-tabs.content-tabs > ul.nav-tabs li a {
font-size: 12px;
padding: 17px 20px;
margin: 0;
border: none;
text-transform: uppercase;
background: transparent;
}
.control-tabs.content-tabs > ul.nav-tabs li:last-child {
border-right: none;
}
.control-tabs.content-tabs > ul.nav-tabs li.active {
background: #ffffff;
}
.control-tabs.content-tabs > ul.nav-tabs li.active a {
font-weight: 600;
}
.control-tabs.content-tabs > ul.nav-tabs li.active:last-child {
border-right: 1px solid #e3e5e7;
}
.control-tabs.content-tabs > .tab-content > .tab-pane div.toolbar-widget {
background: #ffffff;
margin-top: -20px;
padding-top: 20px;
}
.hide-tabs .control-tabs ul.nav-tabs {
display: none;
}
@ -10224,7 +10270,8 @@ body.dropdown-open .dropdown-overlay {
}
.control-pagination .page-iteration {
margin-right: 4px;
font-size: 14px;
font-size: 12px;
color: #98a7a8;
}
.control-pagination .page-next,
.control-pagination .page-back {
@ -10234,14 +10281,16 @@ body.dropdown-open .dropdown-overlay {
.control-pagination .page-next:before,
.control-pagination .page-back:before {
color: #666666;
font-size: 14px;
line-height: 14px;
font-size: 19px;
line-height: 19px;
display: inline-block;
vertical-align: baseline;
position: relative;
top: 2px;
}
.control-pagination a.page-next:hover:before,
.control-pagination a.page-back:hover:before {
color: #222222;
color: #1795f1;
}
.control-pagination span.page-next:before,
.control-pagination span.page-back:before {
@ -10260,7 +10309,7 @@ body.dropdown-open .dropdown-overlay {
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f054";
content: "\f105";
}
.control-pagination .page-back:before {
font-family: FontAwesome;
@ -10269,7 +10318,7 @@ body.dropdown-open .dropdown-overlay {
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
content: "\f053";
content: "\f104";
}
div.scoreboard {
position: relative;
@ -10652,10 +10701,11 @@ ul.status-list li span.status.info {
.control-breadcrumb {
font-size: 12px;
text-transform: uppercase;
padding: 0 0 20px 0;
padding: 15px 20px;
margin: -20px -20px 20px -20px;
background-color: #2b343d;
}
.control-breadcrumb ul {
margin: 0;
padding: 0;
}
.control-breadcrumb li {
@ -10663,14 +10713,15 @@ ul.status-list li span.status.info {
margin: 0;
padding: 0;
display: inline-block;
color: #999999;
color: #9da3a7;
letter-spacing: 0.05em;
}
.control-breadcrumb li a {
color: #405261;
color: #ecf0f1;
text-decoration: none;
}
.control-breadcrumb li a:hover {
color: #999999;
color: #ecf0f1;
}
.control-breadcrumb li:after {
font-size: 14px;
@ -10679,7 +10730,7 @@ ul.status-list li span.status.info {
margin-left: 6px;
margin-right: 2px;
vertical-align: baseline;
color: #405261;
color: #9da3a7;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -10691,8 +10742,12 @@ ul.status-list li span.status.info {
.control-breadcrumb li:last-child:after {
content: '';
}
.control-breadcrumb + .content-tabs {
margin-top: -20px;
}
body.slim-container .control-breadcrumb {
padding: 0 20px 20px 20px;
margin-left: 0;
margin-right: 0;
}
div.control-popover {
position: absolute;

9
modules/backend/assets/js/october.layout.js
View File

@ -30,8 +30,15 @@
$.oc.layout = new OctoberLayout()
$(document).ready($.oc.layout.updateLayout())
$(document).ready(function(){
$.oc.layout.updateLayout()
window.setTimeout($.oc.layout.updateLayout, 100)
})
$(window).on('resize', function() {
$.oc.layout.updateLayout()
})
$(window).on('oc.updateUi', function() {
$.oc.layout.updateLayout()
})
})(jQuery);

19
modules/backend/assets/less/controls/breadcrumb.less
View File

@ -1,22 +1,26 @@
.control-breadcrumb {
font-size: 12px;
text-transform: uppercase;
padding: 0 0 20px 0;
padding: 15px 20px;
margin: -20px -20px 20px -20px;
background-color: @color-breadcrumb-background;
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
color: @color-breadcrumb-text-active;
letter-spacing: 0.05em;
a {
color: @color-breadcrumb-text;
text-decoration: none;
&:hover { color: @color-breadcrumb-text-active; }
&:hover { color: @color-breadcrumb-text; }
}
&:after {
@ -26,7 +30,7 @@
margin-left: 6px;
margin-right: 2px;
vertical-align: baseline;
color: @color-breadcrumb-text;
color: @color-breadcrumb-text-active;
.icon(@angle-right);
}
@ -34,10 +38,15 @@
content:'';
}
}
+ .content-tabs {
margin-top: -20px;
}
}
body.slim-container {
.control-breadcrumb {
padding: 0 20px 20px 20px;
margin-left: 0;
margin-right: 0;
}
}

10
modules/backend/assets/less/controls/lists.less
View File

@ -112,6 +112,14 @@
.list-pagination {
font-size: 14px;
text-align: right;
padding-top: 20px;
.loading-indicator {
div {
margin-left: 20px;
font-size: 12px;
}
}
}
}
}
@ -280,7 +288,7 @@ table.table.data {
tr.safe, tr.special {
td, th, td a, th a {
font-style: italic;
color: #98a7a8;
}
}
}

13
modules/backend/assets/less/controls/pagination.less
View File

@ -6,17 +6,20 @@
font-size: 0;
.page-iteration {
margin-right: 4px;
font-size: 14px;
font-size: 12px;
color: @color-pagination;
}
.page-next, .page-back {
display: inline-block;
padding: 10px 15px;
&:before {
color: @color-pagination-icon;
font-size: 14px;
line-height: 14px;
font-size: 19px;
line-height: 19px;
display: inline-block;
vertical-align: baseline;
position: relative;
top: 2px;
}
}
a.page-next, a.page-back {
@ -35,6 +38,6 @@
.page-back {
padding-right: 6px;
}
.page-next:before { .icon(@chevron-right); }
.page-back:before { .icon(@chevron-left); }
.page-next:before { .icon(@angle-right); }
.page-back:before { .icon(@angle-left); }
}

53
modules/backend/assets/less/controls/tab.less
View File

@ -243,6 +243,59 @@
}
}
}
&.content-tabs {
> ul.nav-tabs {
position: relative;
&:before {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: @color-tab-content-border;
}
li {
margin-right: 0;
border-right: 1px solid @color-tab-content-border;
a {
font-size: 12px;
padding: 17px 20px;
margin: 0;
border: none;
text-transform: uppercase;
background: transparent;
}
&:last-child {
border-right: none;
}
&.active {
background: @color-tab-content-active-bg;
a {
font-weight: 600;
}
&:last-child {
border-right: 1px solid @color-tab-content-border;
}
}
}
}
> .tab-content > .tab-pane {
div.toolbar-widget {
background: @color-tab-content-active-bg;
margin-top: -20px;
padding-top: 20px;
}
}
}
}
&.hide-tabs {

10
modules/backend/assets/less/core/variables.less
View File

@ -132,6 +132,8 @@
@color-tab-active-border: #5fb6f5;
@color-tab-bg: #ffffff;
@color-tab-active-marker: #ec8017;
@color-tab-content-active-bg: #ffffff;
@color-tab-content-border: #e3e5e7;
@color-ui-border: #d7d7d7;
@ -159,8 +161,9 @@
@color-scoreboard-positive: #95b753;
@color-scoreboard-negative: #cc3300;
@color-breadcrumb-text-active: #999999;
@color-breadcrumb-text: #405261;
@color-breadcrumb-text-active: #9da3a7;
@color-breadcrumb-text: #ecf0f1;
@color-breadcrumb-background: #2b343d;
@color-custom-input-icon: #666666;
@color-custom-input-border: #999999;
@ -194,8 +197,9 @@
@color-filelist-cb-border: #cccccc;
@color-pagination-icon: #666666;
@color-pagination-hover: #222222;
@color-pagination-hover: @link-color;
@color-pagination-inactive: #b6b6b6;
@color-pagination: #98a7a8;
@color-fancy-master-tabs-bg: #d35400;
@color-fancy-master-tabs-active-text: #ffffff;

2
modules/backend/widgets/lists/partials/_list_pagination.htm
View File

@ -1,6 +1,6 @@
<div class="loading-indicator-container size-small pull-right">
<div class="control-pagination">
<span class="page-iteration"><?= $pageFrom ?>-<?= $pageTo ?> of <?= $recordTotal ?></span>
<span class="page-iteration">Displayed records: <?= $pageFrom ?>-<?= $pageTo ?> of <?= $recordTotal ?></span>
<?php if ($pageCurrent > 1): ?>
<a
href="javascript:;"

1
modules/system/controllers/EmailTemplates.php
View File

@ -47,7 +47,6 @@ class EmailTemplates extends Controller
EmailTemplate::syncAll();
$this->getClassExtension('Backend.Behaviors.ListController')->index();
$this->bodyClass = null;
}
public function formBeforeSave($model)

10
modules/system/controllers/emailtemplates/index.htm
View File

@ -6,21 +6,17 @@
<?php Block::endPut() ?>
<div class="control-tabs secondary" data-control="tab">
<div class="control-tabs content-tabs" data-control="tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#templates"><?= e(trans('system::lang.email_templates.templates')) ?></a></li>
<li><a href="#templates"><?= e(trans('system::lang.email_templates.layouts')) ?></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="list-preview">
<?= $this->listRender('templates') ?>
</div>
<?= $this->listRender('templates') ?>
</div>
<div class="tab-pane">
<div class="list-preview">
<?= $this->listRender('layouts') ?>
</div>
<?= $this->listRender('layouts') ?>
</div>
</div>
</div>