From 6dff23b065bd933ff2f571d2264c86902173d40b Mon Sep 17 00:00:00 2001
From: Kelly Rauchenberger <fefferburbia@gmail.com>
Date: Fri, 29 Sep 2017 18:36:57 -0400
Subject: Added ribbons

Gift ribbons currently partially work: the correct ribbon image and name
is shown, but the ribbon description is not yet extracted from the game
and thus is just blank.
---
 .../javascripts/pokeviewer/pokemon.js.coffee       | 12 +++---
 app/assets/stylesheets/pokeviewer/pokemon.css.scss | 46 ++++++++++++++--------
 2 files changed, 36 insertions(+), 22 deletions(-)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/pokeviewer/pokemon.js.coffee b/app/assets/javascripts/pokeviewer/pokemon.js.coffee
index f82f196..28a1ec1 100644
--- a/app/assets/javascripts/pokeviewer/pokemon.js.coffee
+++ b/app/assets/javascripts/pokeviewer/pokemon.js.coffee
@@ -1,7 +1,7 @@
 $ ->
-  $(".pc-pokemon").mouseover ->
-    $(this).children(".pc-data").show()
-  $(".pc-pokemon").mouseout ->
-    $(this).children(".pc-data").hide()
-  $(".pc-pokemon").mousemove (event) ->
-    $(this).children(".pc-data").offset({left: event.pageX + 16, top: event.pageY - 16})
+  $(".pkv-has-hover").mouseover ->
+    $(this).children(".pkv-hover").show()
+  $(".pkv-has-hover").mouseout ->
+    $(this).children(".pkv-hover").hide()
+  $(".pkv-has-hover").mousemove (event) ->
+    $(this).children(".pkv-hover").offset({left: event.pageX + 16, top: event.pageY - 16})
diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss
index 2a75730..f44b499 100644
--- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss
+++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss
@@ -152,21 +152,19 @@ body {
   }
 }
 
-.pc-pokemon {
-  .pc-data {
-    display: none;
-    background-color: #111;
-    color: #fff;
-    z-index: 1;
-    padding: .5em;
-    box-shadow: 0px 0px 2px 1px #B3B3B3;
-    border-radius: 4px;
-    position: absolute;
-
-    .pc-data-name {
-      font-weight: bold;
-      white-space: pre;
-    }
+.pkv-hover {
+  display: none;
+  background-color: #111;
+  color: #fff;
+  z-index: 1;
+  padding: .5em;
+  box-shadow: 0px 0px 2px 1px #B3B3B3;
+  border-radius: 4px;
+  position: absolute;
+
+  .pc-data-name {
+    font-weight: bold;
+    white-space: pre;
   }
 }
 
@@ -203,7 +201,6 @@ body {
 
   .pd-details {
     color: white;
-    font-size: bold;
     padding: .25em .5em;
   }
 
@@ -355,4 +352,21 @@ body {
       stroke-linejoin: butt;
     }
   }
+
+  .pokemon-ribbons {
+    .pd-details {
+      background-color: #ffc8c8;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0.5em;
+
+      li {
+        display: block;
+      }
+    }
+  }
 }
-- 
cgit 1.4.1