From f013399a4e76ffbcca2b5f7e237307b1c927b410 Mon Sep 17 00:00:00 2001
From: Gergely Polonkai <gergely@polonkai.eu>
Date: Sat, 25 Apr 2015 01:06:44 +0200
Subject: [PATCH] Move resume keywords into a popover

---
 css/style.sass    |  28 +++---------------
 images/close.png  | Bin 1158 -> 0 bytes
 resume/index.html |  72 +++++++++++++++++++---------------------------
 3 files changed, 33 insertions(+), 67 deletions(-)
 delete mode 100644 images/close.png

diff --git a/css/style.sass b/css/style.sass
index 6c861b3..d2190c2 100644
--- a/css/style.sass
+++ b/css/style.sass
@@ -22,6 +22,9 @@ a
 #main-container
   background-color: $content-background
 
+.popover
+  max-width: 100%
+
 article.post
   div.meta
     font-size: 80%
@@ -352,40 +355,17 @@ body
     font-size: 50%
     color: #7f7f7f
     font-weight: normal
+    text-decoration: none
 
   #keywords-button:hover
     background-color: #4d4d4d
     color: #ffffff
     cursor: pointer
 
-  #keywords
-    position: absolute
-    top: 100px
-    left: 100px
-    font-size: 75%
-    background-color: #4d4d4d
-    color: #ffffff
-    text-align: justify
-    width: 50%
-    padding: .5em
-    border: 1px solid #f18137
-    z-index: 200
-    display: none
-
   .keyword-first-letter
     font-weight: bold
     color: #f18137
 
-  #keywords-close
-    width: 24px
-    height: 24px
-    background-image: url('../images/close.png')
-    z-index: 210
-    position: absolute
-    display: block
-    top: -13px
-    right: -13px
-
   .i
     font-style: italic
 
diff --git a/images/close.png b/images/close.png
deleted file mode 100644
index d07cbb965dff32ece8edb3cde53a74200051c77d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1158
zcmV;11bO?3P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00006VoOIv0Cxa)
z0Cz2J9qIr8010qNS#tmY4c7nw4c7reD4Tcy000McNliru-3ks7FE4B|2Cx7C1QSU_
zK~zY`m6pqI6IU3;f8X4>V^3@nJH|Yk*rE?qiAI&W0#&e}UiGzU{{XsTU3Jq<B@3zB
zO5Jx;@dtF(ibacr)C%Mk8&oP5G+<01#C8(L&pY?tE;3FHBs3jq7BkX4=iWKzJ7<Ld
zxUOG08v;jwGBBUM-U2p&Uaj6pUbS9c0h|FUKowX4-b<eWn!s(~4)73Y*6NM%p$M*D
zIjex9z<KZa(4fyvye<uWHdfeJfCM#+Wi*V$Y-r3a5q<)Guhkp<!w?(?zDT^f+_uGH
z*A<F8F2}@c0&xI19}tNlAM_~%TkWFSyq^*CJ@8Ad-q<>j;QE!b3*Pg|j?aCwYL?&L
zcJng!5f+7iVK0J5VTonLQPp;p@bOwkCSQy28?aHUH!Ogf0nY)Sj(z64`=)xT=khY~
z5eXUy(!D%?I}{E<@UrcW%+Cd*m5dk<+`D?C)hAs!74*W`M_)CQlg9@xrV_4kGF&IZ
z9O#gcgk!4BTlxV*AG2zfPbXeo2F|CLy97YRdp_^j!s!iLl7XM2@8?(w*C?wtA;|&Y
z&#3Aa&Ez$<-4V9kytHkx<UJov9j8*CziZH!pV;G-t}BqB8M>InYbv@$;uS+5<I?@i
zf<H7%tlKh{5Rah6W*1a1QsQo2y13k&4$;cQ>!Uj^heZLxgovlMj0dW^1;Dy31H1&D
z5CULPq>d{^Vpf3LA+QLX8Mrta`v|}H)gU3<1Fh;70Tw}6(rYh)19$?)K4ReFC?5>Y
z0E=O&gH8yuexJdfk_1>@*G&LcP4y-4e@TP{m4#jV1sw8{8FG(5>@q^Y0VX6F3O+u_
zElYZhRa3>|S=LW*sC`c%ctY$DFn|kz4sdra7)~-WVc_FE9rkkzfI~ee{FFp+WMslz
zFf_njpc4W;;7%l_lMnhQwq2eCA;M5rZ7Tb?WmfoE5``rn^ohi@)1>VMX`VmOm|MkQ
zvy+htnuHVKI#vCM=00wj3jfe7QPnMusb?q*v5Y7LTWyWG2|TFP8_9H4Q-o`as{6sb
zEfsq%FF6^|N>1|3miBeatc5G#W5!-HAME&|+Wb3>@8(|EUA@t=mo6@MmG~qV43`Ez
zE_ZB!t}9^B2lkR9VBlkRe2%P)c_V7JGGe|3ey!CT!{^fU(#7Q=a8F}e3qkLkLFXqv
z5=W3m^^0-s2uaAwgnZC<r}U%0Vj0y%__<bZ^j=js3&6)?ufOct!ke3JVR6Uh*qw6O
zvtni!m}0QmDXDHZ6#E14W3AqJ`k$SgcEbhl`OKi-pLkswxVdbC%IqH7j&s3alvZX#
zgloVbvqf{5($CJ6{yV^#bo@z&=+D%O&9wAK|Ld<JC6QF8d7w0-nFZRwHehS@#(~-K
Y57y5771F+X*Z=?k07*qoM6N<$f&*?CCIA2c

diff --git a/resume/index.html b/resume/index.html
index a3f64a9..e20e849 100644
--- a/resume/index.html
+++ b/resume/index.html
@@ -2,8 +2,7 @@
 layout: default
 title: Resume
 ---
-<h3>Resume <span id="keywords-button">[ want some keywords only? click
-this! ]</span></h3>
+<h3>Resume <a id="keywords-button" data-toggle="popover" data-placement="bottom" role="button" tabindex="0" data-trigger="focus">[ want some keywords only? click this! ]</a></h3>
 
 <div itemscope itemtype="http://schema.org/Person">
     <p>
@@ -229,54 +228,41 @@ this! ]</span></h3>
 <div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div>
 
 <script type="text/javascript">
-Array.prototype.unique = function() {
-    var unique = [];
+    var keywords = null;
 
-    for (var i = 0; i < this.length; i++) {
-        if (unique.indexOf(this[i]) == -1) {
-            unique.push(this[i]);
-        }
-    }
+    $(function() {
+        $('[data-toggle="popover"]').popover({
+            'html': true,
+            'content': function(){
+                if (keywords == null) {
+                    keyword_tags = $('.keyword');
+                    keywords = new Array();
 
-    return unique;
-};
+                    for (i = 0; i < keyword_tags.length; i++) {
+                        tag = keyword_tags[i];
 
-keyword_tags = $('.keyword');
-keywords = new Array();
+                        if ($(tag).attr('title')) {
+                            kw = $(tag).attr('title');
+                        } else {
+                            kw = $(tag).html();
+                        }
 
-for (i = 0; i < keyword_tags.length; i++) {
-    tag = keyword_tags[i];
+                        first_letter = kw.charAt(0);
+                        remainder = kw.slice(1);
 
-    if ($(tag).attr('title')) {
-        kw = $(tag).attr('title');
-    } else {
-        kw = $(tag).html();
-    }
+                        if (!$(tag).hasClass('noupper')) {
+                            first_letter = first_letter.toUpperCase();
+                        }
 
-    first_letter = kw.charAt(0);
-    remainder = kw.slice(1);
+                        kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
 
-    if (!$(tag).hasClass('noupper')) {
-        first_letter = first_letter.toUpperCase();
-    }
+                        keywords.push(kw);
+                    }
+                }
 
-    kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
-
-    keywords.push(kw);
-
-}
-
-$('#keywords-list').html(keywords.unique().sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', '));
-
-$('#keywords-button').click(function(e) {
-    $('#keywords').css({
-        top: e.pageY + 10,
-        left: e.pageX - 2
+                keywords = $.grep(keywords, function(el, index){return index === $.inArray(el, keywords);});
+                return keywords.sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', ');
+            }
+        });
     });
-    $('#keywords').fadeIn();
-});
-
-$('#keywords-close').click(function() {
-    $('#keywords').fadeOut();
-});
 </script>