Merge pull request #9 from jordanmccullough/style-and-pos-tuning

Style and pos tuning
jordanmccullough · Nov 22, 2014 · 580af7a · 580af7a
2 parents 8ec3ed0 + 2bc2cdb
commit 580af7a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/activate.js b/activate.js
@@ -46,6 +46,10 @@
           helpIcon.css("left", offset.left + "px");
         }
 
+        if (offset.top < helpIcon.height()){
+          helpIcon.addClass("top");
+        }
+
 
         helpIcon.mouseover({selector: helpMap[i].selector, link: helpLink, offsetLeft: offset.left, offsetTop: offset.top},
           function(event){
@@ -55,7 +59,7 @@
             highlight.css("left", event.data.offsetLeft + "px");
 
 
-            answer.css("top", event.data.offsetTop+$(event.data.selector).height() + "px");
+            answer.css("top", event.data.offsetTop+$(event.data.selector).height() + ((offset.top < helpIcon.height()) ? helpIcon.height() : 0) + "px");
 
             if( ((answer.width() + event.data.offsetLeft )) > page.width() ){
               answer.css("left", (event.data.offsetLeft-answer.width()) + "px");
@@ -71,13 +75,7 @@
         );
         helpIcon.mouseout({selector: helpMap[i].selector},
           function(event){
-            // $(event.data.selector).css("box-shadow", "none");
-
             highlight.toggle();
-
-            // $(event.data.selector).toggleClass("highlight");
-
-            // page.css("-webkit-filter", "");
             answer.hide();
             answer.html("");
           }

diff --git a/assets/github.css b/assets/github.css
@@ -45,7 +45,7 @@
   margin-top: -16px;
   background: rgba(147,45,112,.6);
   color: #fff;
-  transition: all 200ms;
+  transition: background 200ms, box-shadow 200ms, border-radius 200ms, height 200ms, width 200ms, margin 200ms;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
@@ -62,6 +62,14 @@
   box-shadow: 0 0 0 2px #fff, 2px 3px 5px rgba(0,0,0,1);
 }
 
+.question.top{
+  border-top-left-radius: 50%;
+  border-top-right-radius: 0%;
+  border-bottom-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  margin-top: 16px;
+}
+
 a.question {
   color: #fff;
   text-decoration: none;