From a70494be4e1767e0cb7ff4218e7f266ece56089c Mon Sep 17 00:00:00 2001
From: Kelly Rauchenberger <fefferburbia@gmail.com>
Date: Wed, 4 Jul 2018 14:42:21 -0400
Subject: Made pokemon embeddable

---
 .../javascripts/pokeviewer/pokemon.js.coffee       | 10 +++
 app/assets/stylesheets/pokeviewer/pokemon.css.scss | 94 ++++++++++++++++++++++
 2 files changed, 104 insertions(+)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/pokeviewer/pokemon.js.coffee b/app/assets/javascripts/pokeviewer/pokemon.js.coffee
index a6fd326..e80ae77 100644
--- a/app/assets/javascripts/pokeviewer/pokemon.js.coffee
+++ b/app/assets/javascripts/pokeviewer/pokemon.js.coffee
@@ -1,3 +1,9 @@
+show_pokemon_tab = (tab) ->
+  $(".pokemon-tab").hide()
+  $(".ptabe-button").removeClass("active")
+  $(".pokemon-" + tab).show()
+  $(".ptabe-" + tab).addClass("active")
+
 $ ->
   $(".pkv-has-hover").mouseover ->
     $(this).children(".pkv-hover").show()
@@ -7,3 +13,7 @@ $ ->
     $(this).children(".pkv-hover").offset({left: event.pageX + 16, top: event.pageY - 16})
   $(".in-emerald .pokemon-image img").mouseover ->
     $(this).attr("src", $(this)[0].src)
+  $(".ptabe-button a").click ->
+    show_pokemon_tab($(this).data("tab"))
+  if $("#pokemon-embed").length > 0
+    show_pokemon_tab("details")
diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss
index 1b1ce5d..df2a184 100644
--- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss
+++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss
@@ -200,6 +200,15 @@
   .pokemon-name {
     font-weight: bold;
     white-space: pre;
+
+    a {
+      color: blue;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 
   &.in-emerald {
@@ -578,3 +587,88 @@
 .clear {
   clear: both;
 }
+
+#pokemon-embed {
+  width: 350px;
+  margin: 1em;
+
+  #pokemon-embed-tabs {
+    margin: 0;
+    padding: 0;
+    text-align: right;
+
+    li {
+      display: inline-block;
+      padding: 3px;
+      border-width: 1px 1px 0 1px;
+      border-style: solid;
+      border-color: #888;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+
+      a {
+        font-family: 'Power Green';
+        color: white;
+        text-decoration: none;
+        text-transform: uppercase;
+      }
+
+      &.ptabe-details {
+        background-color: #94c49c;
+
+        &.active, &:hover {
+          background-color: #84ac88;
+        }
+      }
+
+      &.ptabe-stats {
+        background-color: #8890f8;
+
+        &.active, &:hover {
+          background-color: #6870d8;
+        }
+      }
+
+      &.ptabe-moves {
+        background-color: #f7aca6;
+
+        &.active, &:hover {
+          background-color: #ff847c;
+        }
+      }
+
+      &.ptabe-contest {
+        background-color: #b9d7f2;
+
+        &.active, &:hover {
+          background-color: #63aef2;
+        }
+      }
+
+      &.ptabe-ribbons {
+        background-color: #f8d8f8;
+
+        &.active, &:hover {
+          background-color: #f8a0f8;
+        }
+      }
+    }
+  }
+
+  .pokemon {
+    margin: 0;
+  }
+
+  .pokemon-tab {
+    display: none;
+  }
+}
+
+#pk-embed-code {
+  width: 50%;
+
+  textarea {
+    width: 100%;
+    height: 4em;
+  }
+}
-- 
cgit 1.4.1