Fine-tune keywords list in resume
This commit is contained in:
parent
85b7f30751
commit
a621c3e206
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
BIN
basics/static/images/close.png
Normal file
BIN
basics/static/images/close.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
@ -19,7 +19,7 @@
|
|||||||
<p>Although I don’t 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 don’t 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>
|
||||||
|
Loading…
Reference in New Issue
Block a user