From 03f38a45f1fbde92fc0a8e615ddf04d7eac97303 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Fri, 8 Jun 2018 16:08:20 +0800
Subject: [PATCH]  * improve UI of tutorial views.

---
 module/tutorial/css/index.css       | 10 +++++-----
 module/tutorial/view/index.html.php | 12 +++++++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/module/tutorial/css/index.css b/module/tutorial/css/index.css
index 9a63875d32..bf71893208 100644
--- a/module/tutorial/css/index.css
+++ b/module/tutorial/css/index.css
@@ -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;}
diff --git a/module/tutorial/view/index.html.php b/module/tutorial/view/index.html.php
index 46eb8a8d4d..0bfe26975f 100644
--- a/module/tutorial/view/index.html.php
+++ b/module/tutorial/view/index.html.php
@@ -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);