From 507a0fc3c97ea5880510c42ba8fd26a091d74ec1 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 23:42:03 -0400 Subject: [PATCH] MASSIVE HEADER CHANGES OH SHIT --- src/app/browser.coffee | 2 +- src/app/helpers.coffee | 2 + styles/app/avatar.styl | 84 +++++++++++++++++++++++++++-------- styles/app/header.styl | 99 ++++++++++++++++++++++++------------------ styles/app/index.styl | 7 +-- views/app/alerts.html | 6 +-- views/app/avatar.html | 11 +++-- views/app/header.html | 38 +++++++--------- 8 files changed, 155 insertions(+), 94 deletions(-) diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 1d9e2d0eaf..a097bb8035 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -124,7 +124,7 @@ setupTour = (model) -> # jquery sticky header on scroll, no need for position fixed initStickyHeader = (model) -> - $('.header-wrap').sticky({topSpacing:1}) + $('.header-wrap').sticky({topSpacing:0}) ### Sets up "+1 Exp", "Level Up", etc notifications diff --git a/src/app/helpers.coffee b/src/app/helpers.coffee index 363f0b7ada..88230466ce 100644 --- a/src/app/helpers.coffee +++ b/src/app/helpers.coffee @@ -42,4 +42,6 @@ module.exports.viewHelpers = (view) -> view.fn "and", -> _.reduce arguments, (cumm, curr) -> cumm && curr view.fn "or", -> _.reduce arguments, (cumm, curr) -> cumm || curr + view.fn "truarr", (num) -> + return num-1 diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl index 369f0483c4..f7170566f7 100644 --- a/styles/app/avatar.styl +++ b/styles/app/avatar.styl @@ -1,23 +1,71 @@ -// basic avatar sprite group -.avatar - cursor: pointer - position: relative - width: 90px - height: 90px +/* herobox & avatar +====================== +* this is the canonical `herobox` avatar component +* it can be placed anywhere on the site and look the +* way it's supposed to. TODO: add variables for show/ +* or hiding user metadata in different situations - .character-sprites - position: absolute +Seeing as the sprites might change drastically in the +future re: pets and whatnot, this is just temporary. +---------------------------------------------------- */ - .lvl - position: absolute - bottom: 0px - right: 10px +// basic herobox styles +.herobox + height: 10.5em // higher to acct for the name area + width: 10em + max-width: 10em + margin: 0 // need this b/c of bootstrap, remove or reset later + padding: 0 // push down the sprite + position: relative + cursor: pointer + background: #f5f5f5 + transition: padding 0.13s ease-out, border 0.25s ease-out, background 0.25s ease-out + outline: 1px solid rgba(0,0,0,0.1) -// main and party avatars -.main-avatar, .party-avatar - .character-sprites - top: -15px +// vertically center avatar sprite +// depending on if they have a pet +.herobox[data-haspet="hasPet"] + padding-top: 2em +.herobox:not([data-haspet="hasPet"]) + padding-top: 1.75em + +// the hero's info frame +.herobox:after + content: attr(data-name) ": " "lv " attr(data-level) // " " attr(data-class) + opacity: 0 // hidden by default + position: absolute + top: 0 + display: block + width: 100% + line-height: 2 + color: black + text-align: center + border-bottom: 1px solid rgba(0,0,0,0.1) + background: darken($good, 15%) + transition: opacity 0.2s ease-out + +// expose hero info on hover, taking +// into account the extra pet space +.herobox:hover, .herobox:focus + background: desaturate(lighten($better, 30%), 10%) + &:after + opacity: 1 + +.herobox[data-haspet="hasPet"] + &:hover, &:focus + padding-top: 3.25em + +.herobox:not([data-haspet="hasPet"]) + &:hover, &:focus + padding-top: 2.5em -.character-sprites span - position: absolute \ No newline at end of file +// positioning the sprites, etc +.herobox + .character-sprites + width: 6.428571429em // 90px + height: 6.428571429em + margin: 0 auto + + .character-sprites span, .pet + position: absolute \ No newline at end of file diff --git a/styles/app/header.styl b/styles/app/header.styl index 75f7273c01..335769823e 100644 --- a/styles/app/header.styl +++ b/styles/app/header.styl @@ -1,30 +1,31 @@ -/* site header +/* header wrapper -------------------- */ - .header-wrap width: 100% // this is for the sticky - height: 10em - padding: 2.25em 1.5em 2em + padding: 0 z-index: 1 background: #f5f5f5 - border-bottom: 1px solid #ccc - margin-top: -1px + border-bottom: 1px solid rgba(0,0,0,0.2) + // margin-top: -1px + overflow: hidden +/* login/menu buttons +--------------------- */ .user-menu position: absolute top: 0.5em right: 0.5em + font-size: 0.85em .tile cursor: pointer font-weight: 400 color: #494949 color: hsla(0, 0%, 15%, 0.8) - background-color: darken($better, 10%) + background-color: darken($better, 5%) &:hover, &:focus - background-color: darken($best, 20%) + background-color: darken($good, 15%) &:active - background-color: darken($best, 30%) - color: white + background-color: darken($good, 25%) .user-reporter:after content: '▾' @@ -66,39 +67,39 @@ border-top: 0 } -/* hero box + +/* header layout -------------------- */ .site-header display: table - margin: 0 auto - width: 100% + height: 10.5em -.hero-avatar, .party-member-avatar - display: table-cell - -@media (min-width: 37.5em) +@media (min-width: 42.5em) .site-header - width: 80% + width: 75% @media (min-width: 60em) .site-header - width: 60% - -.hero-avatar, .party-member-avatar - padding: 0 - margin: 0 - vertical-align: top - -.hero-avatar - width: 90px - -.party-member-avatar - width: 90px + // margin: 0 auto + width: 66% +@media (min-width: 70em) + .site-header + width: 70% + +// this is a wrapper for avatars in the header +// inside this is the actual `herobox` module +// that can be used anywhere on the site +.herobox-wrap + display: table-cell + vertical-align: middle + width: 10em + height: 10.5em /* progress bars -------------------- */ .hero-stats - padding: 0 0.5em + padding: 0 1.25em + margin: 0 display: table-cell vertical-align: middle @@ -112,25 +113,39 @@ opacity: 1 outline: 1px solid rgba(0,0,0,0.2) outline-offset: -1px - overflow: visible // firefox outline fix - margin-bottom: 1.5em - height: 2em - + overflow: hidden // firefox outline fix + height: 2.25em + margin: 0 0 1em + cursor: help; + color: #111 + &:last-of-type + margin-bottom: 0 + &:after + content: attr(title) + position: absolute + left: -1em + top 0.4em + font-weight: 400 + z-index: -1 + transition: all 0.25s ease-out + .bar - background: none - border: 1px solid rgba(0,0,0,0.2) + border: 1px solid rgba(0,0,0,0.1) height: 100% + transition: width 0.25s ease-out + .meter:hover:after + left: 1em + z-index: 1 .health .bar - background-color: darken($worse, 38%) + background: darken($worse, 38%) .experience .bar - background-color: darken($neutral, 30%) + background: darken($neutral, 30%) .meter-text position: absolute top: 0 - right: 1em + right: 0.5em z-index: 1 - color: #111 - line-height: 2 \ No newline at end of file + line-height: 2.25 \ No newline at end of file diff --git a/styles/app/index.styl b/styles/app/index.styl index c2f4dd465a..fefd934fc2 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -28,6 +28,8 @@ html,body,p,h1,ul,li,table,tr,th,td -moz-box-sizing: border-box box-sizing: border-box +* { font-family: "Lato", sans-serif } + hr border-top: 0 border-bottom: 1px solid #ddd @@ -58,12 +60,11 @@ hr } /* Customizations to make footer sticky */ -/*html, body {height: 100%;}*/ +/*html, body {height: 100%;}*/ #wrap min-height: 100% z-index:-1 -#main - /*overflow:auto;*/ +#main padding-bottom: 250px; /* don't know why this works, sticky footers are weird */ @media (max-width: 600px) { diff --git a/views/app/alerts.html b/views/app/alerts.html index 55ad0571e8..0c16ba0e70 100644 --- a/views/app/alerts.html +++ b/views/app/alerts.html @@ -7,7 +7,7 @@ {#if equal(_user.flags.algosNotification,'show')}
- [x] + ✕

New features! Custom day start, new and better algorithms, authentication enhancements. See details here.  "Hey, I had more Exp before this roll-out!" Restore your Exp here.

@@ -15,7 +15,7 @@ {#if equal(_user.flags.onliesNotification, 'show')}
- [x] + ✕

"Onlies" now gain / lose value just like other habits, and are reset back to 0 at the beginning of each day.  See details here, and @@ -26,7 +26,7 @@ {#if equal(_user.flags.priorityNotification, 'show')}

- [x] + ✕

New Feature: Priority Multiplier! You can now multiply "more important" tasks on a 1x, 1.5x, or 2x scale. See details.

{/} \ No newline at end of file diff --git a/views/app/avatar.html b/views/app/avatar.html index d39b5c57f4..5036de68df 100644 --- a/views/app/avatar.html +++ b/views/app/avatar.html @@ -24,9 +24,13 @@ -
- {#unless @minimal}{#if @profile.items.pet}{/}{/} +
+ {#unless @minimal}{#if @profile.items.pet}{/}{/} {#with @profile.preferences as :p} @@ -41,9 +45,8 @@ {/}
{{#unless @minimal}} -
Lvl {@profile.stats.lvl}
{{/}} -
+ diff --git a/views/app/header.html b/views/app/header.html index 396542bae0..796ade9802 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -1,24 +1,25 @@ {#unless equal(_user.preferences.hideHeader,true)} -