diff options
| -rw-r--r-- | pytask/static/css/base.css | 16 | ||||
| -rw-r--r-- | pytask/static/js/uberbar.js | 40 | ||||
| -rw-r--r-- | pytask/templates/base.html | 9 | ||||
| -rw-r--r-- | pytask/templates/templatetags/_as_uberbar.html | 9 | ||||
| -rw-r--r-- | pytask/templatetags/browse_helpers.py | 11 |
5 files changed, 84 insertions, 1 deletions
diff --git a/pytask/static/css/base.css b/pytask/static/css/base.css index f926b00..6191aee 100644 --- a/pytask/static/css/base.css +++ b/pytask/static/css/base.css @@ -16,7 +16,7 @@ body { } #header { - margin-bottom: 30px; + margin-bottom: 30px; padding: 5px 0px 5px 0px; height: auto; width: auto; @@ -304,3 +304,17 @@ div #modification a:hover { font-weight: bold; text-decoration: none; } + +/* Uberbar is the sticky bar at the top of the page */ +/* Code taken from http://davidwalsh.name/persistent-header-opacity#bottom */ +#uberbar { + border-bottom:1px solid #eb7429; + background:#fc9453; + padding:10px 20px 0px 10px; + position:fixed; + top:0; + left:0; + z-index:2000; + width:98%; + text-align: center; +} diff --git a/pytask/static/js/uberbar.js b/pytask/static/js/uberbar.js new file mode 100644 index 0000000..dafe9e2 --- /dev/null +++ b/pytask/static/js/uberbar.js @@ -0,0 +1,40 @@ +/* Original code from http://davidwalsh.name/persistent-header-opacity#bottom */ +var create_uberbar = function () { +$(document).ready(function() { + $("#header").css("position", "relative"); + $("#header").css("top", "40px"); + $("#header").css("margin-bottom", "70px"); + + //settings + var fadeSpeed = 200; + var fadeTo = 0.5; + var topDistance = 30; + + var topbarME = function() { + $('#uberbar').fadeTo(fadeSpeed,1); + }; + + var topbarML = function() { + $('#uberbar').fadeTo(fadeSpeed,fadeTo); + }; + + var inside = false; + //do + $(window).scroll(function() { + position = $(window).scrollTop(); + if(position > topDistance && !inside) { + //add events + topbarML(); + $('#uberbar').bind('mouseenter',topbarME); + $('#uberbar').bind('mouseleave',topbarML); + inside = true; + } + else if (position < topDistance){ + topbarME(); + $('#uberbar').unbind('mouseenter',topbarME); + $('#uberbar').unbind('mouseleave',topbarML); + inside = false; + } + }); + }); +} diff --git a/pytask/templates/base.html b/pytask/templates/base.html index 2931f08..eb30b73 100644 --- a/pytask/templates/base.html +++ b/pytask/templates/base.html @@ -1,3 +1,5 @@ +{% load browse_helpers %} + <html> <head> <title> @@ -48,6 +50,13 @@ layout trick in CSS. --> <div id="container1"> <div id="container2"> + + <!-- Generate Uberbar if the uberbar_message is present --> + {% if uberbar_message %} + {% as_uberbar uberbar_message %} + {% endif %} + + <div id="left"> {% include '_left_sidebar.html' %} diff --git a/pytask/templates/templatetags/_as_uberbar.html b/pytask/templates/templatetags/_as_uberbar.html new file mode 100644 index 0000000..7005c68 --- /dev/null +++ b/pytask/templates/templatetags/_as_uberbar.html @@ -0,0 +1,9 @@ +<script type="text/javascript" + src="/pytask/static/js/uberbar.js"> +</script> +<script type="text/javascript"> + create_uberbar(); +</script> +<div id="uberbar"> + {{ message }} +</div>
\ No newline at end of file diff --git a/pytask/templatetags/browse_helpers.py b/pytask/templatetags/browse_helpers.py index 072cdce..96a660d 100644 --- a/pytask/templatetags/browse_helpers.py +++ b/pytask/templatetags/browse_helpers.py @@ -36,3 +36,14 @@ def as_modification_display(title, user, creation_datatime): 'user': user, 'modification_datetime': creation_datatime, } + + +@register.inclusion_tag('templatetags/_as_uberbar.html') +def as_uberbar(message): + """Returns a context dictionary containing the fields necessary + to render the uberbar. + """ + + return { + 'message': message, + } |