Move resume keywords into a popover

This commit is contained in:
Gergely Polonkai 2015-04-25 01:06:44 +02:00
parent 208f24e562
commit f013399a4e
3 changed files with 33 additions and 67 deletions

View File

@ -22,6 +22,9 @@ a
#main-container #main-container
background-color: $content-background background-color: $content-background
.popover
max-width: 100%
article.post article.post
div.meta div.meta
font-size: 80% font-size: 80%
@ -352,40 +355,17 @@ body
font-size: 50% font-size: 50%
color: #7f7f7f color: #7f7f7f
font-weight: normal font-weight: normal
text-decoration: none
#keywords-button:hover #keywords-button:hover
background-color: #4d4d4d background-color: #4d4d4d
color: #ffffff color: #ffffff
cursor: pointer 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 .keyword-first-letter
font-weight: bold font-weight: bold
color: #f18137 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 .i
font-style: italic font-style: italic

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -2,8 +2,7 @@
layout: default layout: default
title: Resume title: Resume
--- ---
<h3>Resume <span id="keywords-button">[ want some keywords only? click <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>
this! ]</span></h3>
<div itemscope itemtype="http://schema.org/Person"> <div itemscope itemtype="http://schema.org/Person">
<p> <p>
@ -229,22 +228,17 @@ this! ]</span></h3>
<div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div> <div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div>
<script type="text/javascript"> <script type="text/javascript">
Array.prototype.unique = function() { var keywords = null;
var unique = [];
for (var i = 0; i < this.length; i++) { $(function() {
if (unique.indexOf(this[i]) == -1) { $('[data-toggle="popover"]').popover({
unique.push(this[i]); 'html': true,
} 'content': function(){
} if (keywords == null) {
keyword_tags = $('.keyword');
keywords = new Array();
return unique; for (i = 0; i < keyword_tags.length; i++) {
};
keyword_tags = $('.keyword');
keywords = new Array();
for (i = 0; i < keyword_tags.length; i++) {
tag = keyword_tags[i]; tag = keyword_tags[i];
if ($(tag).attr('title')) { if ($(tag).attr('title')) {
@ -263,20 +257,12 @@ for (i = 0; i < keyword_tags.length; i++) {
kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder; kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
keywords.push(kw); keywords.push(kw);
}
}
} 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-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').fadeIn();
});
$('#keywords-close').click(function() {
$('#keywords').fadeOut();
});
</script> </script>