Merge pull request #455 from mpsonntag/fixesRelease2019

Favourite abstract style updates

LGTM

Author: achilleas-k

app/assets/stylesheets/layout.less

@@ -160,15 +160,15 @@ body {
   }
 
   .favour{
-    color: white !important;
-    background-color: gold !important;
+    color: @color-dark-gray-dark !important;
+    background-color: white !important;
     border-radius: 4px;
   }
+
   .disfavour{
-    color: white;
-    background-color: darkred;
+    color: rgb(184, 134, 11);
+    background-color: rgb(255, 250, 120);
     border-radius: 4px;
-    border: none;
   }
 
   .abstract-text {
@@ -411,3 +411,33 @@ body {
 .tab-content {
   margin-top: 10px;
 }
+
+ /* Tooltip container */
+.gn-tooltip {
+  color: black;
+}
+
+/* Tooltip text */
+.gn-tooltip .gn-tooltiptext {
+  visibility: hidden;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  padding: 5px;
+  border-radius: 5px;
+
+  /* Position the tooltip text */
+  position: fixed;
+  z-index: 1;
+  margin-top: -60px;
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.gn-tooltip:hover .gn-tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}

app/views/abstractlist.scala.html

@@ -86,10 +86,16 @@ <h4 class="list-group-item-heading" data-bind="text: title"></h4>
 
             @if(account.isDefined) {
                 <li data-bind="visible: !$root.isFavouriteAbstract()">
-                    <a class="favour" data-bind="click: $root.favourAbstract">&#9733</a>
+                    <a class="favour gn-tooltip" data-bind="click: $root.favourAbstract" href="">
+                        &#9733
+                        <span class="gn-tooltiptext">Add abstract to favourites</span>
+                    </a>
                 </li>
                 <li data-bind="visible: $root.isFavouriteAbstract">
-                    <a class="disfavour" data-bind="click: $root.disfavourAbstract">&#9733</a>
+                    <a class="disfavour gn-tooltip" data-bind="click: $root.disfavourAbstract" href="">
+                        &#9733
+                        <span class="gn-tooltiptext">Remove abstract from favourites</span>
+                    </a>
                 </li>
             }
 

app/views/dashboard/favouriteabstracts.scala.html

@@ -20,7 +20,7 @@ <h4>Loading data</h4>
     <!-- If no Favourites -->
     <div data-bind="if: noFavouriteAbstracts">
         <div class="alert alert-info fade in out">
-            <h4>You have no favourite abstracts yet. Click the star button shown for abstracts to add them.</h4>
+            <h4>You have no favourite abstracts yet. Click the star button on an abstract to add it.</h4>
         </div>
     </div>
 
@@ -48,11 +48,11 @@ <h4 class="panel-title" data-bind="text: name"></h4>
                     <span data-bind="text: cite"></span>
                 </div>
                 <ul id="abstract-list" class="list-group" data-bind="foreach: abstracts">
-                    <a data-bind="attr: { href: createLink().absLink }">
-                        <li id="abstract-list-item" class="list-group-item abstract">
+                    <li id="abstract-list-item" class="list-group-item abstract">
+                        <a data-bind="attr: { href: createLink().absLink }">
                             <span data-bind="text: title"></span>
-                        </li>
-                    </a>
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>