gergely/gergelypolonkai-web-jekyll
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move resume keywords into a popover

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/style.sass
View File

@ -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

BIN
images/close.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

72
resume/index.html
View File

@ -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>