From 6c3ab5003aba45f71f30da8a0fb2bf43eca65415 Mon Sep 17 00:00:00 2001
From: ArthurJahn <stutrzbecher@gmail.com>
Date: Thu, 3 Sep 2015 13:05:25 -0300
Subject: [PATCH] Adding popover to home page

---
 css/home-page.css | 42 +++++++++++++++++++++++++++++-------------
 css/popover.css   | 43 +++++++++++++++++++++++++++----------------
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/css/home-page.css b/css/home-page.css
index dd2c27e..d259834 100644
--- a/css/home-page.css
+++ b/css/home-page.css
@@ -148,7 +148,7 @@
   display:none;
 }
 
-.action-home-index #content .software-block { 
+.action-home-index #content .software-block {
   width: 145px;
   height: 218px;
   margin: 0px 18px 14px 0px;
@@ -236,7 +236,7 @@
 /*** News block - display content block **/
 
 .action-home-index #content .display-content-block .block-title {
-  margin: 0px;  
+  margin: 0px;
   border-top: 4px solid #643C67;
   background: #eee;
   color: #643C67;
@@ -303,8 +303,8 @@
   font: 15px/1.3em arial;
 }
 
-.action-home-index #content .display-content-block .lead a:visited, 
-.action-home-index #content .lead a:visited, 
+.action-home-index #content .display-content-block .lead a:visited,
+.action-home-index #content .lead a:visited,
 .action-home-index #content .lead dl.portlet a:visited {
   color: #172738;
 }
@@ -372,7 +372,7 @@
 
 .action-home-index #content .highlights-border {
   border: 1px solid #c0c1c1;
-  border-radius: 8px 8px 8px 8px;
+  border-radius: 8px;
   width: auto;
   height: 248px;
   max-height: 250px;
@@ -385,15 +385,15 @@
 }
 
 .action-home-index #content .highlights-container {
-  border-radius: 8px 8px 8px 8px;
+  border-radius: 8px;
   border-width: 0px 0px 1px 0px;
   border-bottom: none;
-  padding: 0px 0px 0px 0px;
+  padding: 0;
   width: 100% !important;
   max-height: 230px;
   background: transparent;
   position: relative;
-  top: 0px;
+  top: 0;
 }
 
 .action-home-index #content .highlights-image-link {
@@ -423,11 +423,9 @@
 }
 
 .action-home-index #content .highlights-block-pager {
-  border: 0;
-  padding: 0px 0px 0px 0px;
-  width: 232px;
-  float: left;
-  position: static;
+  float: none;
+  display: block;
+  text-align: center;
 }
 
 .action-home-index #content .highlights-block-pager a {
@@ -449,6 +447,24 @@
   color: transparent;
 }
 
+/*** software highlights block ***/
+
+.action-home-index #content a.toggle-popover,
+.action-home-index #content a.toggle-popover:hover {
+  margin: 0 0 0 55px;
+  color: #3867b7;
+  cursor: pointer;
+}
+
+.action-home-index #content span.popover-span {
+  padding: 1px 6px;
+  border-radius: 50%;
+  background-color: #3867b7;
+  color: #ffffff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
 /*** mais software block **/
 .action-home-index #content #mais-software-block {
   margin: 11px 0px;
diff --git a/css/popover.css b/css/popover.css
index f6f86f8..889409c 100644
--- a/css/popover.css
+++ b/css/popover.css
@@ -33,7 +33,7 @@
   line-break: auto;
 }
 .popover.top {
-  margin-top: -10px;
+  margin-top: -12px;
 }
 .popover.right {
   margin-left: 10px;
@@ -133,41 +133,52 @@
 }
 
 .highlights-popover {
-  width: 300px;
-  padding: 8px 6px;
+  max-width: 280px;
+  margin: 0 0 0 -75px;
   background: #172638;
   color: #FFFFFF;
 }
 
+.highlights-popover .popover-content {
+  padding: 0;
+}
+
 .highlights-popover p {
+  padding: 13px 13px 15px;
+  margin: 0px;
   font-size: 14px;
+  line-height: 20px;
 }
-
+    
 .highlights-popover span {
   font-weight: bold;
-  border-bottom: 2px dotted #FFFFFF;
+  border-bottom: 1px dotted #FFFFFF;
 }
 
 #content .highlights-popover a,
 #content .highlights-popover a:visited,
-#content .highlights-popover a:hover {
+#content .highlights-popover a:hover,
+#content .highlights-popover a:link {
   font-weight: bold;
   color: #FFFFFF;
+  display: block;
+  padding: 8px 15px;
+  border-top: 1px dotted rgba(255,255,255,0.1);
 }
 
 .highlights-popover a:before {
-  content: "";
-  background:
-    linear-gradient( to bottom,
-      transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%),
-    linear-gradient( to right,
-      transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%);
-  margin: 5px;
-  padding: 0 8px;
+  font-family: "FontAwesome";
+  content: "\f067";
+  vertical-align: middle;
+  color: #ff0066;
+  padding: 0 5px 0 0;
 }
 
-.highlights-popover .popover-content {
-  padding: 9px 12px;
+.highlights-popover.top > .arrow,
+.highlights-popover.right > .arrow,
+.highlights-popover.bottom > .arrow,
+.highlights-popover.left > .arrow {
+  margin-left: 64px;
 }
 
 .highlights-popover.top > .arrow:after,
--
libgit2 0.21.2