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

* improve UI of tutorial views.

Browse Source
This commit is contained in:
Catouse
2018-06-08 16:08:20 +08:00
parent 900e46d19e
commit 03f38a45f1
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/tutorial/css/index.css
+5 -5
View File
@@ -1,6 +1,6 @@
#pageContainer {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;}
#iframeWrapper {position: absolute; left: 0; top: 0; bottom: 0; right: 300px; display: block}
#sidebar {position: absolute; right: 0; top: 0; bottom: 0; width: 300px; background: #f5f5f5; overflow-y: auto; padding-top: 56px; border-left: 1px solid #ddd}
#sidebar {position: absolute; right: 0; top: 0; bottom: 0; width: 300px; background: #efefef; overflow-y: auto; padding-top: 56px; border-left: 1px solid #ddd}
#sidebar > header {color: #fff; padding: 10px; position: fixed; top: 0; right: 0; z-index: 10; width: 300px; border-bottom: 1px solid #ddd}
#sidebar > header > h2 {margin: 0 0 0 40px; font-size: 18px; padding: 0; line-height: 36px; color: #fff}
#sidebar > header .start-icon {position: absolute; left: 10px; top: 10px; width: 36px; height: 36px; text-align: center; margin-right: 5px;}
@@ -52,17 +52,17 @@
#tasksProgress.finish .progress-text {color: #00da88; opacity: 1}
#tasks {background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,0.045); border-radius: 6px;}
#tasks > li > a {padding: 8px;}
#tasks > li > a {padding: 8px 8px 8px 12px;}
#tasks > li > a > .pull-right {filter: alpha(opacity=0); opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2); color: #00da88}
#tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 2px 0 0 #00da88; border-left-color: #00da88; color: #808080}
#tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 4px 0 0 #00da88; border-left-color: #00da88; color: #808080}
#tasks > li.finish > a > .pull-right {filter: alpha(opacity=100); opacity: 1; transform: scale(1)}
#tasks > li.finish > a > .task-name {text-decoration: line-through;}
#tasks > li.active > a, #tasks > li.active.finish > a {box-shadow: inset 2px 0 0 #006af1; border-color: #ddd; border-left-color: #006af1; color: #006af1; background: #EBF2F9}
#tasks > li.active > a, #tasks > li.active.finish > a {box-shadow: inset 4px 0 0 #006af1; border-color: #ddd; border-left-color: #006af1; color: #006af1; background: #EBF2F9}
#tasks > li.finish > a:hover, #tasks > li.active > a:hover {background-color: #f1f1f1}
#taskModalBack {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; transition: opacity .4s; opacity: 0; display: none}
#taskModalBack.in {filter: alpha(opacity=60); opacity: 0.6;}
#taskModal {width: 500px; position: absolute; background: #00da88; color: #fff; text-align: center; overflow: hidden; transform: scale(.5) translate(0, 200px) rotateX(120deg); transition: transform .4s, opacity .4s; opacity: 0; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); top: 0; padding: 30px; left: 50%; margin-left: -250px; top: 20%; box-shadow: 0 0 20px 0 rgba(0,0,0,.25); display: none}
#taskModal {width: 500px; position: absolute; background: #00da88; color: #fff; text-align: center; overflow: hidden; transform: scale(.5) translate(0, 200px) rotateX(120deg); transitizon: transform .4s, opacity .4s; opacity: 0; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); top: 0; padding: 30px; left: 50%; margin-left: -250px; top: 20%; box-shadow: 0 0 20px 0 rgba(0,0,0,.25); display: none}
#taskModal.in {transform: scale(1) translate(0) rotateX(0); opacity: 1}
#taskModal h3 {margin-bottom: 20px}
#taskModal .start-icon > .icon-spin {-moz-animation: spin 10s infinite linear;-o-animation: spin 10s infinite linear;-webkit-animation: spin 10s infinite linear;animation: spin 10s infinite linear;}
module/tutorial/view/index.html.php
+11 -1
View File
@@ -205,11 +205,21 @@ $(function()
{
if(!$e.length) return;
$e.closest('body').find('[data-toggle=tooltip]').tooltip('destroy');
var offset = $e.offset();
var winWidth = $(window).width();
var placement = 'top';
if (offset.left > (winWidth*2/3)) {
placement = 'left';
} else if (offset.left < (winWidth/3) && (offset.left + $e.outerWidth()) < (winWidth*2/3)) {
placement = 'right';
} else if (offset.top < 50) {
placement = 'bottom';
}
options = $.extend(
{
trigger: 'manual',
title: text,
placement: $e.offset().left > ($(window).width()*2/3) ? 'left' : 'top',
placement: placement,
container: 'body',
tipClass: 'tooltip-warning tooltip-max'
}, options);