mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
middle of wrasslin the new header
This commit is contained in:
Zachary Kain
parent
13673c3ec7
commit
e18c53f97f
5 changed files with 233 additions and 69 deletions
129
public/sticky.js
Normal file
129
public/sticky.js
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
// Sticky Plugin v1.0.0 for jQuery
|
||||
// =============
|
||||
// Author: Anthony Garand
|
||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
|
||||
// Improvements by Leonardo C. Daronco (daronco)
|
||||
// Created: 2/14/2011
|
||||
// Date: 2/12/2012
|
||||
// Website: http://labs.anthonygarand.com/sticky
|
||||
// Description: Makes an element on the page stick on the screen as you scroll
|
||||
// It will only set the 'top' and 'position' of your element, you
|
||||
// might need to adjust the width in some cases.
|
||||
|
||||
(function($) {
|
||||
var defaults = {
|
||||
topSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
className: 'is-sticky',
|
||||
wrapperClassName: 'sticky-wrapper',
|
||||
center: false,
|
||||
getWidthFrom: ''
|
||||
},
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
sticked = [],
|
||||
windowHeight = $window.height(),
|
||||
scroller = function() {
|
||||
var scrollTop = $window.scrollTop(),
|
||||
documentHeight = $document.height(),
|
||||
dwh = documentHeight - windowHeight,
|
||||
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i],
|
||||
elementTop = s.stickyWrapper.offset().top,
|
||||
etse = elementTop - s.topSpacing - extra;
|
||||
|
||||
if (scrollTop <= etse) {
|
||||
if (s.currentTop !== null) {
|
||||
s.stickyElement
|
||||
.css('position', '')
|
||||
.css('top', '');
|
||||
s.stickyElement.parent().removeClass(s.className);
|
||||
s.currentTop = null;
|
||||
}
|
||||
}
|
||||
else {
|
||||
var newTop = documentHeight - s.stickyElement.outerHeight()
|
||||
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
|
||||
if (newTop < 0) {
|
||||
newTop = newTop + s.topSpacing;
|
||||
} else {
|
||||
newTop = s.topSpacing;
|
||||
}
|
||||
if (s.currentTop != newTop) {
|
||||
s.stickyElement
|
||||
.css('position', 'fixed')
|
||||
.css('top', newTop);
|
||||
|
||||
if (typeof s.getWidthFrom !== 'undefined') {
|
||||
s.stickyElement.css('width', $(s.getWidthFrom).width());
|
||||
}
|
||||
|
||||
s.stickyElement.parent().addClass(s.className);
|
||||
s.currentTop = newTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resizer = function() {
|
||||
windowHeight = $window.height();
|
||||
},
|
||||
methods = {
|
||||
init: function(options) {
|
||||
var o = $.extend(defaults, options);
|
||||
return this.each(function() {
|
||||
var stickyElement = $(this);
|
||||
|
||||
stickyId = stickyElement.attr('id');
|
||||
wrapper = $('<div></div>')
|
||||
.attr('id', stickyId + '-sticky-wrapper')
|
||||
.addClass(o.wrapperClassName);
|
||||
stickyElement.wrapAll(wrapper);
|
||||
|
||||
if (o.center) {
|
||||
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
|
||||
}
|
||||
|
||||
if (stickyElement.css("float") == "right") {
|
||||
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
|
||||
}
|
||||
|
||||
var stickyWrapper = stickyElement.parent();
|
||||
stickyWrapper.css('height', stickyElement.outerHeight());
|
||||
sticked.push({
|
||||
topSpacing: o.topSpacing,
|
||||
bottomSpacing: o.bottomSpacing,
|
||||
stickyElement: stickyElement,
|
||||
currentTop: null,
|
||||
stickyWrapper: stickyWrapper,
|
||||
className: o.className,
|
||||
getWidthFrom: o.getWidthFrom
|
||||
});
|
||||
});
|
||||
},
|
||||
update: scroller
|
||||
};
|
||||
|
||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('scroll', scroller, false);
|
||||
window.addEventListener('resize', resizer, false);
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onscroll', scroller);
|
||||
window.attachEvent('onresize', resizer);
|
||||
}
|
||||
|
||||
$.fn.sticky = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sticky');
|
||||
}
|
||||
};
|
||||
$(function() {
|
||||
setTimeout(scroller, 0);
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -20,6 +20,7 @@ loadJavaScripts = (model) ->
|
|||
require '../../public/vendor/jquery-ui/ui/jquery.ui.widget'
|
||||
require '../../public/vendor/jquery-ui/ui/jquery.ui.mouse'
|
||||
require '../../public/vendor/jquery-ui/ui/jquery.ui.sortable'
|
||||
require '../../public/sticky.js'
|
||||
|
||||
require '../../public/vendor/bootstrap-tour/bootstrap-tour'
|
||||
|
||||
|
|
@ -120,6 +121,11 @@ setupTour = (model) ->
|
|||
tour._current = 0 if isNaN(tour._current) #bootstrap-tour bug
|
||||
tour.start()
|
||||
|
||||
|
||||
# jquery sticky header on scroll, no need for position fixed
|
||||
initStickyHeader = (model) ->
|
||||
# $('.site-header').sticky({topSpacing:1})
|
||||
|
||||
###
|
||||
Sets up "+1 Exp", "Level Up", etc notifications
|
||||
###
|
||||
|
|
@ -192,6 +198,7 @@ module.exports.app = (appExports, model, app) ->
|
|||
setupSortable(model)
|
||||
setupTooltips(model)
|
||||
setupTour(model)
|
||||
initStickyHeader(model) unless model.get('_view.mobileDevice')
|
||||
$('.datepicker').datepicker({autoclose:true, todayBtn:true})
|
||||
.on 'changeDate', (ev) ->
|
||||
#for some reason selecting a date doesn't fire a change event on the field, meaning our changes aren't saved
|
||||
|
|
|
|||
|
|
@ -37,35 +37,31 @@ hr
|
|||
-------------------------------------------------- */
|
||||
|
||||
.site-header
|
||||
padding: 0.75em
|
||||
padding: 0 0.75em 0.75em
|
||||
background: #f5f5f5
|
||||
border: 1px solid #ccc
|
||||
white-space: nowrap
|
||||
position:fixed
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
z-index: 1000
|
||||
z-index: 1
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#head {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
#head .pull-right
|
||||
.site-header .pull-right
|
||||
margin-right: 0
|
||||
margin-left: 1%
|
||||
|
||||
.modal
|
||||
whitespace:normal
|
||||
|
||||
.user-menu {
|
||||
text-align: right
|
||||
position: relative
|
||||
top: 1em
|
||||
}
|
||||
|
||||
.dropdown-menu
|
||||
right: 0
|
||||
left: auto
|
||||
|
||||
.char-status
|
||||
// border: 1px dotted grey
|
||||
|
||||
.main-avatar-wrap
|
||||
margin: 0 5px 0 0
|
||||
float: left
|
||||
|
|
@ -75,24 +71,24 @@ hr
|
|||
float: right
|
||||
|
||||
.progress-bars
|
||||
padding-top: 15px
|
||||
// padding-top: 15px
|
||||
|
||||
.progress
|
||||
position: relative
|
||||
height: 25px
|
||||
height: 2em
|
||||
.bar
|
||||
height: 25px
|
||||
height: 2em
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 3px
|
||||
color: black
|
||||
color: #111
|
||||
float: right
|
||||
margin-right: 1em
|
||||
line-height: 2
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.char-status {
|
||||
padding-top: 30px
|
||||
}
|
||||
// .char-status {
|
||||
// padding-top: 30px
|
||||
// }
|
||||
.main-avatar-wrap {
|
||||
border-right: 1px solid grey;
|
||||
padding-right: 20px
|
||||
|
|
@ -105,6 +101,30 @@ hr
|
|||
}
|
||||
}
|
||||
|
||||
$worse = rgb(244, 204, 204)
|
||||
$neutral = rgb(255, 242, 204)
|
||||
|
||||
.progress-bars
|
||||
.progress
|
||||
border-radius: 0
|
||||
background: white
|
||||
opacity: 1
|
||||
outline: 1px solid rgba(0,0,0,0.3)
|
||||
overflow: hidden
|
||||
outline-offset: -1px
|
||||
box-shadow: none
|
||||
.bar
|
||||
background-image: none
|
||||
border: 1px solid rgba(0,0,0,0.3)
|
||||
box-shadow: none
|
||||
|
||||
.progress-danger .bar
|
||||
background-color: darken($worse, 40%)
|
||||
|
||||
.progress-warning .bar
|
||||
background-color: darken($neutral, 40%)
|
||||
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
|
||||
|
|
@ -128,7 +148,9 @@ hr
|
|||
|
||||
/* Customizations to make footer sticky */
|
||||
/*html, body {height: 100%;}*/
|
||||
#wrap {min-height: 100%; margin-top:130px; z-index:-1}
|
||||
#wrap
|
||||
min-height: 100%
|
||||
z-index:-1
|
||||
#main
|
||||
/*overflow:auto;*/
|
||||
padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
|
||||
|
|
@ -200,4 +222,15 @@ hr
|
|||
position: fixed;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
z-index: 1001;
|
||||
z-index: 1001;
|
||||
|
||||
|
||||
/* hero box
|
||||
-------------------- */
|
||||
@media (min-width: 37.5em)
|
||||
.hero-box
|
||||
width: 70%
|
||||
|
||||
@media (min-width: 60em)
|
||||
.hero-box
|
||||
width: 50%
|
||||
|
|
|
|||
|
|
@ -1,54 +1,49 @@
|
|||
<header:>
|
||||
{#unless equal(_user.preferences.hideHeader,true)}
|
||||
<div class="row-fluid">
|
||||
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
|
||||
<div class='hero-box'>
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="party-avatar-wrap" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
|
||||
<div>
|
||||
<div class='progress progress-danger' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
|
||||
</div>
|
||||
<div class='progress progress-warning' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
|
||||
</div>
|
||||
<div>GP: {{floor(:member.stats.gp)}}</div>
|
||||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="party-avatar-wrap" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
|
||||
<div>
|
||||
<div class='progress progress-danger' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
|
||||
</div>
|
||||
">
|
||||
<!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
|
||||
<div class='progress progress-warning' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
|
||||
</div>
|
||||
<div>GP: {{floor(:member.stats.gp)}}</div>
|
||||
</div>
|
||||
">
|
||||
<!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
|
||||
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
{{/}}
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
{{/}}
|
||||
{{/}}
|
||||
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
<!-- end .char-status -->
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
|
||||
<span class="progress-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
</div>
|
||||
<!-- end .row-fluid -->
|
||||
</div>
|
||||
{/}
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
{{/}}
|
||||
|
||||
<menu:>
|
||||
<div class='pull-right'>
|
||||
<div class="user-menu">
|
||||
{#unless _loggedIn}
|
||||
<a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
|
||||
{else}
|
||||
|
|
|
|||
Loading…
Reference in a new issue