diff --git a/puppetboard/static/css/puppetboard.css b/puppetboard/static/css/puppetboard.css index 047129e..c8eeb7a 100644 --- a/puppetboard/static/css/puppetboard.css +++ b/puppetboard/static/css/puppetboard.css @@ -1,75 +1,120 @@ body { margin: 0; font-family: "Open Sans", sans-serif; } a { color: #2E5D8C; text-decoration: none; } h1.ui.header.no-margin-bottom { margin-bottom: 0; } .tablesorter-header-inner { float: left; } th.tablesorter-headerAsc::after { content: '\25b4' !important; float: right; } th.tablesorter-headerDesc::after { content: '\25be' !important; float: right; } .ui.grid.padding-bottom { padding-bottom: 40px !important; } .status { width: 47%; text-align: center; display: block; } .count { width: 21%; text-align: center; display: block; } .no-margin-top { margin-top: -35px !important; } .absolute { position: fixed; bottom: 0; width: 100%; background: #E8E8E8; } .absolute div { padding: 1em; } .ui.menu.darkblue { - background-color:#2C3E50; + background-color: #2C3E50; } .ui.darkblue.header, i.darkblue { - color:#2C3E50; + color: #2C3E50; } .ui.labels .darkblue.label::before, .ui.darkblue.labels .label::before, .ui.darkblue.label::before { - background-color:#2C3E50; + background-color: #2C3E50; } .ui.darkblue.labels .label, .ui.darkblue.label { - background-color:#2C3E50; - border-color:#2C3E50; - color:#FFF; + background-color: #2C3E50; + border-color: #2C3E50; + color: #FFF; +} + +#scroll-btn-top { + position: fixed; + overflow: hidden; + z-index: 99999999; + opacity: 0; + visibility: hidden; + width: 50px; + height: 48px; + line-height: 48px; + right: 30px; + bottom: 85px; + padding-top: 2px; + background-color: #777777; + text-align: center; + color: #EEE; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +#scroll-btn-top:hover { + background-color: #888; +} + +#scroll-btn-top.show { + visibility: visible; + cursor: pointer; + opacity: 1.0; +} + +#scroll-btn-top i { + position: absolute; + top: 50%; + left: 50%; + margin: 0; + margin-right: -50%; + transform: translate(-50%, -50%) } diff --git a/puppetboard/static/js/scroll.top.js b/puppetboard/static/js/scroll.top.js new file mode 100644 index 0000000..3242403 --- /dev/null +++ b/puppetboard/static/js/scroll.top.js @@ -0,0 +1,13 @@ +jQuery(function($) { + $(document).scroll(function() { + if ( $(window).scrollTop() > 100 ) { + $('#scroll-btn-top').addClass('show'); + } else { + $('#scroll-btn-top').removeClass('show'); + } + }); + + $('#scroll-btn-top').click(function() { + $('html, body').animate( { scrollTop: 0 }, 500 ); + }); +}); diff --git a/puppetboard/templates/layout.html b/puppetboard/templates/layout.html index 6dd6fcc..c29728c 100644 --- a/puppetboard/templates/layout.html +++ b/puppetboard/templates/layout.html @@ -1,79 +1,84 @@ Puppetboard {% if config.OFFLINE_MODE %} {% else %} {% endif %}
{% block content %} {% endblock content %}
+
+ +
+ {% if config.OFFLINE_MODE %} {% if config.LOCALISE_TIMESTAMP %} {% endif %} {% else %} {% if config.LOCALISE_TIMESTAMP %} {% endif %} {% endif %} {% if config.LOCALISE_TIMESTAMP %} {% endif %} + {% block script %} {% endblock script %}