Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* improve UI of block views for placement in small column.

Browse Source
This commit is contained in:
Catouse
2018-07-09 09:54:46 +08:00
parent 1cbbb130d8
commit 2d2df9c013
8 changed files with 132 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/block/view/bugblock.html.php
+1 -3
View File
@@ -19,8 +19,6 @@
.block-bugs .c-pri {width: 35px;text-align: center;}
.block-bugs .c-deadline {width: 95px;}
.block-bugs .c-status {width: 80px;}
.block-bugs.block-sm .c-pri,
.block-bugs.block-sm .c-status .label-dot {display: none;}
.block-bugs.block-sm .c-status {text-align: center;}
</style>
<div class='panel-body has-table scrollbar-hover'>
@@ -53,7 +51,7 @@
<td class='c-name' style='color: <?php echo $bug->color?>' title='<?php echo $bug->title?>'><?php echo $bug->title?></td>
<td class='c-status' title='<?php echo zget($lang->bug->statusList, $bug->status)?>'>
<span class="status-<?php echo $bug->status?>">
<span class="label label-dot"></span>
<span class="label label-dot hide-in-sm"></span>
<span class='status-text'><?php echo zget($lang->bug->statusList, $bug->status);?></span>
</span>
</td>
module/block/view/flowchart.html.php
+7 -5
View File
@@ -1,5 +1,4 @@
<style>
.block-flowchart {}
.block-flowchart .panel-body {padding-top: 0}
.block-flowchart .table {margin-bottom: 0;}
.block-flowchart .table > thead > tr > th,
@@ -8,8 +7,8 @@
.block-flowchart .table > thead > tr > th:first-child,
.block-flowchart .table > tbody > tr > td:first-child,
.block-flowchart .table > tbody > tr > th:first-child {text-align: left;}
.block-flowchart .table > thead > tr > th {width: 18%;vertical-align: top;}
.block-flowchart .table > thead > tr > th:first-child {width: auto;padding: 10px 10px 15px 10px;background: none;}
.block-flowchart .table > thead > tr > th {width: 18%; padding-top: 0}
.block-flowchart .table > thead > tr > th:first-child {width: auto; padding: 0 10px 0 10px;background: none;}
.block-flowchart .table > thead > tr > th:first-child + th > div {background: none;}
.block-flowchart .table > thead > tr > th,
.block-flowchart .table > thead > tr > th > div {padding: 0;background: url('data:image/gif;base64,R0lGODlhLQAPAJEAAAAAAP///+7u7v///yH5BAEAAAMALAAAAAAtAA8AAAJEnH8imMvKopzKofrg3FRfb2Dc+FmNOYgkqZ4ZunZwm4KxHNH0nds1uuOFfDqf8NcDGoW7IuzYtAWZROmSF1U+oc+qsAAAOw==') no-repeat;background-position: right -22px top 15px;}
@@ -19,11 +18,14 @@
.block-flowchart .table > tbody > tr:nth-child(even) > td {background: #f7f8f9;}
.block-flowchart .flowchart-title {font-size: 14px;font-weight: bold;color: #3c4353;}
.block-flowchart .flowchart-step {display: inline-block;width: 24px;height: 24px;font-size: 14px;line-height: 24px;color: #fff; border-radius: 50%;}
.block-flowchart.block-sm .table > tbody > tr > td,
.block-flowchart.block-sm .table > tbody > tr > th {padding: 10px 4px; font-size: 12px;}
.block-flowchart.block-sm .table > thead > tr > th:first-child {padding: 0 4px 0 4px; width: 65px}
</style>
<div class='panel-body has-table scrollbar-hover'>
<table class="table table-borderless">
<thead>
<tr>
<tr class='text-middle'>
<?php for($i = 0; $i < 6; $i++):?>
<?php if($i == 0):?>
<th><span class="flowchart-title"><?php echo $lang->block->role?></span></th>
@@ -35,7 +37,7 @@
</thead>
<tbody>
<?php foreach($lang->block->flowchart as $flowchart):?>
<tr>
<tr class='text-middle'>
<?php for($i = 0; $i < 6; $i++):?>
<?php if($i == 0):?>
<th><?php echo $flowchart[$i];?></th>
module/block/view/productstatisticblock.html.php
+37 -1
View File
@@ -41,7 +41,41 @@
.block-statistic .nav-secondary > li.active > a:focus,
.block-statistic .nav-secondary > li > a:hover {box-shadow: none;}
.block-statistic .nav-secondary > li.active > a:before {content: ' '; display: block; left: -1px; top: 10px; bottom: 10px; width: 4px; background: #006af1; position: absolute;}
.block-statistic .nav-secondary > li.switch-icon {display: none;}
.block-statistic.block-sm .panel-body {padding-bottom: 10px; position: relative; padding-top: 45px;}
.block-statistic.block-sm .panel-body > .table-row,
.block-statistic.block-sm .panel-body > .table-row > .col {display: block; width: auto;}
.block-statistic.block-sm .panel-body > .table-row > .tab-content {padding: 0; margin: 0 -5px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 {width: 125px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 > .table-row {padding: 5px 0;}
.block-statistic.block-sm .col-nav {border-left: none; position: absolute; top: 0; left: 15px; right: 15px; background: #f5f5f5; border-radius: 3px;}
.block-statistic.block-sm .nav-secondary {display: table; width: 100%; padding: 0; table-layout: fixed;}
.block-statistic.block-sm .nav-secondary > li {display: none}
.block-statistic.block-sm .nav-secondary > li.switch-icon,
.block-statistic.block-sm .nav-secondary > li.active {display: table-cell; width: 100%; text-align: center;}
.block-statistic.block-sm .nav-secondary > li.active > a:hover {cursor: default; background: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon > a:hover {background: rgba(0,0,0,0.07);}
.block-statistic.block-sm .nav-secondary > li > a {padding: 5px 10px; border-radius: 4px;}
.block-statistic.block-sm .nav-secondary > li > a:before {display: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon {width: 40px;}
.block-statistic.block-sm .types-line > li > div {padding: 18px 2px 5px;}
</style>
<script>
<?php $blockNavId = 'nav-' . uniqid(); ?>
$(function()
{
var $nav = $('#<?php echo $blockNavId;?>');
$nav.on('click', '.switch-icon', function(e)
{
var isPrev = $(this).is('.prev');
var $activeItem = $nav.children('.active');
var $next = $activeItem[isPrev ? 'prev' : 'next']('li:not(.switch-icon)');
if ($next.length) $next.find('a').trigger('click');
else $nav.children('li:not(.switch-icon)')[isPrev ? 'last' : 'first']().find('a').trigger('click');
e.preventDefault();
});
});
</script>
<div class="panel-body">
<div class="table-row">
<?php if(empty($products)):?>
@@ -162,10 +196,12 @@
<?php endforeach;?>
</div>
<div class="col col-nav">
<ul class="nav nav-stacked nav-secondary scrollbar-hover">
<ul class="nav nav-stacked nav-secondary scrollbar-hover" id='<?php echo $blockNavId;?>'>
<li class='switch-icon prev'><a><i class='icon icon-arrow-left'></i></a></li>
<?php foreach($products as $product):?>
<li <?php if($product == reset($products)) echo "class='active'";?>><a href="javascript:;" data-target="#tab<?php echo $product->code;?>" data-toggle="tab" title='<?php echo $product->name;?>'><?php echo $product->name;?></a></li>
<?php endforeach;?>
<li class='switch-icon next'><a><i class='icon icon-arrow-right'></i></a></li>
</ul>
</div>
<?php endif;?>
module/block/view/projectstatisticblock.html.php
+36 -1
View File
@@ -28,7 +28,40 @@
.block-statistic .nav-secondary > li.active > a:focus,
.block-statistic .nav-secondary > li > a:hover {box-shadow: none;}
.block-statistic .nav-secondary > li.active > a:before {content: ' '; display: block; left: -1px; top: 10px; bottom: 10px; width: 4px; background: #006af1; position: absolute;}
.block-statistic .nav-secondary > li.switch-icon {display: none;}
.block-statistic.block-sm .panel-body {padding-bottom: 10px; position: relative; padding-top: 45px; border-radius: 3px;}
.block-statistic.block-sm .panel-body > .table-row,
.block-statistic.block-sm .panel-body > .table-row > .col {display: block; width: auto;}
.block-statistic.block-sm .panel-body > .table-row > .tab-content {padding: 0; margin: 0 -5px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 {width: 125px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 > .table-row {padding: 5px 0;}
.block-statistic.block-sm .col-nav {border-left: none; position: absolute; top: 0; left: 15px; right: 15px; background: #f5f5f5;}
.block-statistic.block-sm .nav-secondary {display: table; width: 100%; padding: 0; table-layout: fixed;}
.block-statistic.block-sm .nav-secondary > li {display: none}
.block-statistic.block-sm .nav-secondary > li.switch-icon,
.block-statistic.block-sm .nav-secondary > li.active {display: table-cell; width: 100%; text-align: center;}
.block-statistic.block-sm .nav-secondary > li.active > a:hover {cursor: default; background: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon > a:hover {background: rgba(0,0,0,0.07);}
.block-statistic.block-sm .nav-secondary > li > a {padding: 5px 10px; border-radius: 4px;}
.block-statistic.block-sm .nav-secondary > li > a:before {display: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon {width: 40px;}
</style>
<script>
<?php $blockNavId = 'nav-' . uniqid(); ?>
$(function()
{
var $nav = $('#<?php echo $blockNavId;?>');
$nav.on('click', '.switch-icon', function(e)
{
var isPrev = $(this).is('.prev');
var $activeItem = $nav.children('.active');
var $next = $activeItem[isPrev ? 'prev' : 'next']('li:not(.switch-icon)');
if ($next.length) $next.find('a').trigger('click');
else $nav.children('li:not(.switch-icon)')[isPrev ? 'last' : 'first']().find('a').trigger('click');
e.preventDefault();
});
});
</script>
<div class="panel-body">
<div class="table-row">
<?php if(empty($projects)):?>
@@ -116,10 +149,12 @@
<?php endforeach;?>
</div>
<div class="col col-nav">
<ul class="nav nav-stacked nav-secondary scrollbar-hover">
<ul class="nav nav-stacked nav-secondary scrollbar-hover" id='<?php echo $blockNavId;?>'>
<li class='switch-icon prev'><a><i class='icon icon-arrow-left'></i></a></li>
<?php foreach($projects as $project):?>
<li <?php if($project == reset($projects)) echo "class='active'";?>><a href="###" data-target="#tab3Content<?php echo $project->id;?>" data-toggle="tab"><?php echo $project->name;?></a></li>
<?php endforeach;?>
<li class='switch-icon next'><a><i class='icon icon-arrow-right'></i></a></li>
</ul>
</div>
<?php endif;?>
module/block/view/qastatisticblock.html.php
+44 -13
View File
@@ -32,7 +32,48 @@
.block-statistic .progress-pie .progress-info > strong {font-size: 24px;}
.block-statistic .chosen-single {font-size: 16px; font-weight: bold;}
.block-statistic .chosen-container-single .chosen-single div b {top: -2px}
.block-statistic .nav-secondary > li.switch-icon {display: none;}
.block-statistic.block-sm .panel-body {padding-bottom: 10px; position: relative; padding-top: 45px;}
.block-statistic.block-sm .panel-body > .table-row,
.block-statistic.block-sm .panel-body > .table-row > .col {display: block; width: auto;}
.block-statistic.block-sm .panel-body > .table-row > .tab-content {padding: 0; margin: 0 -5px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 {width: 125px;}
.block-statistic.block-sm .tab-pane > .table-row > .col-5 > .table-row {padding: 5px 0;}
.block-statistic.block-sm .col-nav {border-left: none; position: absolute; top: 0; left: 15px; right: 15px; background: #f5f5f5; border-radius: 3px;}
.block-statistic.block-sm .nav-secondary {display: table; width: 100%; padding: 0; table-layout: fixed;}
.block-statistic.block-sm .nav-secondary > li {display: none}
.block-statistic.block-sm .nav-secondary > li.switch-icon,
.block-statistic.block-sm .nav-secondary > li.active {display: table-cell; width: 100%; text-align: center;}
.block-statistic.block-sm .nav-secondary > li.active > a:hover {cursor: default; background: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon > a:hover {background: rgba(0,0,0,0.07);}
.block-statistic.block-sm .nav-secondary > li > a {padding: 5px 10px; border-radius: 4px;}
.block-statistic.block-sm .nav-secondary > li > a:before {display: none;}
.block-statistic.block-sm .nav-secondary > li.switch-icon {width: 40px;}
</style>
<script>
<?php $blockNavId = 'nav-' . uniqid(); ?>
$(function()
{
var $nav = $('#<?php echo $blockNavId;?>');
$nav.on('click', '.switch-icon', function(e)
{
var isPrev = $(this).is('.prev');
var $activeItem = $nav.children('.active');
var $next = $activeItem[isPrev ? 'prev' : 'next']('li:not(.switch-icon)');
if ($next.length) $next.find('a').trigger('click');
else $nav.children('li:not(.switch-icon)')[isPrev ? 'last' : 'first']().find('a').trigger('click');
e.preventDefault();
});
$('[name^=build]').change(function()
{
var $tab = $('#bugBox' + $(this).val());
$tab.removeClass('hidden');
$tab.find('.progress-pie').progressPie();
$(this).parents('.tab-pane').find('.table-row').not($tab).addClass('hidden');
});
});
</script>
<div class="panel-body">
<div class="table-row">
<div class="col tab-content">
@@ -124,25 +165,15 @@
<?php endforeach;?>
</div>
<div class="col col-nav">
<ul class="nav nav-stacked nav-secondary">
<ul class="nav nav-stacked nav-secondary" id='<?php echo $blockNavId;?>'>
<li class='switch-icon prev'><a><i class='icon icon-arrow-left'></i></a></li>
<?php $index = 1;?>
<?php foreach($products as $product):?>
<li class="<?php if($index == 1) echo 'active';?>"><a data-target="#tabContent<?php echo $product->id;?>" data-toggle="tab"><?php echo $product->name;?></a></li>
<?php $index++;?>
<?php endforeach;?>
<li class='switch-icon next'><a><i class='icon icon-arrow-right'></i></a></li>
</ul>
</div>
</div>
</div>
<script>
$(function()
{
$('[name^=build]').change(function()
{
var $tab = $('#bugBox' + $(this).val());
$tab.removeClass('hidden');
$tab.find('.progress-pie').progressPie();
$(this).parents('.tab-pane').find('.table-row').not($tab).addClass('hidden');
});
})
</script>
module/block/view/taskblock.html.php
+1 -4
View File
@@ -19,9 +19,6 @@
.block-tasks .c-estimate {width: 60px;}
.block-tasks .c-deadline {width: 95px;}
.block-tasks .c-status {width: 80px;}
.block-tasks.block-sm .estimate,
.block-tasks.block-sm .c-deadline,
.block-tasks.block-sm .c-status .label-dot {display: none;}
.block-tasks.block-sm .c-status {text-align: center;}
</style>
<div class='panel-body has-table scrollbar-hover'>
@@ -54,7 +51,7 @@
<?php endif;?>
<td class='c-status' title='<?php echo zget($lang->task->statusList, $task->status)?>'>
<span class="status-<?php echo $task->status?>">
<span class="label label-dot"></span>
<span class="label label-dot hide-in-sm"></span>
<span class='status-text'><?php echo zget($lang->task->statusList, $task->status);?></span>
</span>
</td>
module/block/view/welcome.html.php
+5 -3
View File
@@ -14,7 +14,6 @@
.block-welcome .col-left {width: 25%;}
.block-welcome .col-left > h4 {margin: 5px 0;line-height: 30px;}
.block-welcome .col-left .timeline {margin: 10px 0 0;font-size: 12px;}
.block-welcome .col-right {width: 75%;}
.block-welcome .col-right > h4 {font-weight: normal;}
.block-welcome .col-right > h4 small {display: inline-block;margin-right: 8px;font-size: 14px;}
.block-welcome .col-right .tiles {padding: 10px 0 0 16px;border-left: 1px solid #e5e8ec;}
@@ -22,11 +21,14 @@
.block-welcome .panel-body {padding-top: 15px;}
.block-welcome .user-notification-icon {position: relative;display: inline-block;margin-left: 5px;}
.block-welcome .user-notification-icon .label-badge {position: absolute;top: 1px;right: -8px;min-width: 16px;padding: 2px;font-size: 12px;font-weight: normal;}
.block-welcome.block-sm .col-right {padding: 0;}
.block-welcome.block-sm .col-right .tiles {border-left: none; padding-left: 0}
.block-welcome.block-sm .tile-title {font-size: 12px; margin: 0 -10px;}
</style>
<div class='panel-move-handler'></div>
<div class="panel-body conatiner-fluid">
<div class="row">
<div class="col col-left">
<div class="table-row">
<div class="col col-left hide-in-sm">
<h4><?php printf($lang->block->welcomeList[$welcomeType], $app->user->realname)?></h4>
<ul class="timeline timeline-sm">
<?php
module/user/view/login.html.php
+1 -1
View File
@@ -11,7 +11,7 @@
include '../../common/view/header.lite.html.php';
if(empty($config->notMd5Pwd))js::import($jsRoot . 'md5.js');
?>
<main id="main" class="fade">
<main id="main" class="fade no-padding">
<div class="container" id="login">
<div id="loginPanel">
<header>