Fine-tune keywords list in resume

This commit is contained in:
Gergely Polonkai 2013-10-14 20:22:59 +02:00
parent 85b7f30751
commit a621c3e206
3 changed files with 31 additions and 9 deletions

View File

@ -12,15 +12,32 @@
#keywords { #keywords {
position: absolute; position: absolute;
top: 0; top: 100px;
left: 0; left: 100px;
font-size: 75%; font-size: 75%;
background-color: #7f7f7f; background-color: #4d4d4d;
color: #ffffff; color: #ffffff;
text-align: justify; text-align: justify;
width: 50%; width: 50%;
padding: .5em; padding: .5em;
border: 1px solid #f18137; border: 1px solid #f18137;
z-index: 200;
display: none; 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -19,7 +19,7 @@
<p>Although I dont plan to change my workplace right now, but when I do so, I look for firms that can develop my skills and give me financial stability through an interesting job.</p> <p>Although I dont plan to change my workplace right now, but when I do so, I look for firms that can develop my skills and give me financial stability through an interesting job.</p>
</div> </div>
<div id="keywords"></div> <div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div>
<div id="page-disclaimer">You can download the latest version of my resume at <a href="http://{{ site.domain }}{% url "basics:resume" %}">http://{{ site.domain }}{% url "basics:resume" %}</a>.</div> <div id="page-disclaimer">You can download the latest version of my resume at <a href="http://{{ site.domain }}{% url "basics:resume" %}">http://{{ site.domain }}{% url "basics:resume" %}</a>.</div>
<script type="text/javascript"> <script type="text/javascript">
@ -47,25 +47,30 @@ for (i = 0; i < keyword_tags.length; i++) {
kw = $(tag).html(); kw = $(tag).html();
} }
first_letter = kw.charAt(0);
remainder = kw.slice(1);
if (!$(tag).hasClass('noupper')) { if (!$(tag).hasClass('noupper')) {
kw = kw.charAt(0).toUpperCase() + kw.slice(1); first_letter = first_letter.toUpperCase();
} }
kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
keywords.push(kw); keywords.push(kw);
} }
$('#keywords').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-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-button').click(function(e) {
$('#keywords').css({ $('#keywords').css({
top: e.pageY - 10, top: e.pageY + 10,
left: e.pageX - 10 left: e.pageX - 2
}); });
$('#keywords').fadeIn(); $('#keywords').fadeIn();
}); });
$('#keywords').mouseout(function() { $('#keywords-close').click(function() {
$('#keywords').fadeOut(); $('#keywords').fadeOut();
}); });
</script> </script>