From dcc64f44f9f81d32c8071c6bdac86546eaeb57a0 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 27 May 2015 17:17:00 +0200 Subject: UI improvements * Implement visibility choice on board creation; * Rework the board header bar. Remove links to un-implemented features; * Implement a board star counter (visible if the board have >2 stars); * Define a new icon (a thin cross) to close elements; * Remove $(document).on('mouseover') event handlers that were basically fired hundreds of times for nothing, we now define a proper Tracker dependency to execute jquery-ui plugin initialization only when something has changed; * Bug fixes related to list scrolling. --- client/components/main/header.styl | 284 ++++++++++--------------------------- 1 file changed, 72 insertions(+), 212 deletions(-) (limited to 'client/components/main/header.styl') diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 1177d930..248e2851 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -1,7 +1,5 @@ @import 'nib' -global-reset() - #header color: white transition: background-color 0.4s @@ -9,15 +7,16 @@ global-reset() #header-quick-access background-color: rgba(0, 0, 0, 0.2) - padding: 4px 10px - height: 16px + padding: 0px 10px + height: 28px font-size: 12px display: flex - ul li, #header-user-bar + #header-user-bar + ul li color: darken(white, 17%) - a + a, .fa color: inherit text-decoration: none @@ -27,240 +26,101 @@ global-reset() ul flex: 1 transition: opacity 0.2s - margin-left: 5px + margin: 4px 0 0 5px li display: block float: left width: auto color: darken(white, 15%) - padding: 0 4px 1px 4px - - &.separator - padding: 0 2px 1px 2px + padding: 2px 5px 0 &.current - font-style: italic + color: darken(white, 5%) &:first-child .fa-home margin-right: 5px - #header-main-bar - height: 30px - padding: 8px - - h1 - font-size: 19px - line-height: 1.7em - margin: 0 20px 0 10px - float: left - - &.header-board-menu - cursor: pointer - - .fa-angle-down - font-size: 0.8em - // line-height: 1.1em + a.js-create-board margin-left: 5px - .board-header-starred .fa - color: yellow - - .board-header-members - float: right + #header-user-bar + margin: 2px 0 .member - display: block - width: 32px + width: 24px height: @width + float: left + margin: 0 + margin-top: 1px - .add-board-member - color: white - display: flex - align-items: center - justify-content: center - border: 1px solid white - height: 32px - 2px - width: @height - - i.fa-plus - margin-top: 2px - - .header-btn:last-child - margin-right: 0 - - - -// #header { -// background: #138871; -// height: 30px; -// overflow: hidden; -// padding: 5px; -// position: relative; -// z-index: 10; -// } - -// .header-logo { -// bottom: 0; -// display: block; -// height: 25px; -// left: 50%; -// position: absolute; -// top: 8px; -// width: 80px; -// margin-left: - @width/2; -// text-align: center; -// z-index: 2; -// opacity: .5; -// transition: opacity ease-in 85ms; -// color: white; -// font-size: 22px; -// text-decoration: none; -// background-image: url('/logos/white_logo.png'); - -// &:hover { -// opacity: .8; -// color: white; -// } -// } - -// .header-btn.header-btn-feedback { -// background: rgba(255, 255, 255, .1); -// background: linear-gradient(to bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%); -// padding-left: 22px; -// margin-right: 16px; - -// .header-btn-icon { -// top: 1px; -// } -// } - -.header-btn { - border-radius: 3px; - user-select: none; - background: rgba(255, 255, 255, .3); - background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .2) 100%); - color: #f3f3f3; - display: block; - float: left; - font-weight: 700; - height: 30px; - line-height: 30px; - padding: 0 10px; - position: relative; - margin-right: 8px; - min-width: 30px; - text-decoration: none; - cursor: pointer; - - .header-btn-icon { - font-size: 16px; - line-height: 28px; - position: absolute; - top: 0; - left: 0; - } - - &.new-notifications { - background: #ba1212; - - &:hover { - background: #d11515; - } - } - - &.header-member .member { - margin: 0; - border-top-left-radius: 3px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 3px; - - &:hover .member-avatar { - opacity: 1; - } - } - - &:hover { - background: rgba(255, 255, 255, .4); - background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); - color: #fff; - - .header-btn-count { - background: #d11515; - } - } - - &:active { - background: rgba(255, 255, 255, .4); - background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); - } - - &.upgrade { - margin-right: 16px; + .header-user-bar-name + margin: 4px 8px 0 0 + float: left - .icon-sm { - padding: 6px 2px 6px 4px; - } - } + #header-main-bar + height: 28px * 1.618034 - 6px + padding: 7px 10px 0 - &.upgrade, - &.header-boards { - padding-left: 4px; - } + h1 + font-size: 20px + line-height: 1.7em + padding: 0 10px + margin: 0 + margin-right: 10px + float: left + border-radius: 3px - &.header-boards { - padding-right: 4px; - } + &.is-clickable + cursor: pointer - &.header-login, - &.header-signup { - padding: 0 12px; - } + .board-header-btns + display: block + margin-top: 3px + width: auto - &.header-signup { - background: #48b512; - background: linear-gradient(to bottom, #48b512 0, #3d990f 100%); + // XXX Use a flexbox instead of floats? + &.left + float: left - &:hover { - background: #3d990f; - background: linear-gradient(to bottom, #3d990f 0, #327d0c 100%); - } + &.right + float: right - &:active { - background: #327d0c; - } - } + .board-header-btn + border-radius: 3px + color: darken(white, 5%) + padding: 0 + height: 28px + font-size: 13px + float: left + overflow: hidden + line-height: @height + margin: 0 2px - &.header-go-to-boards { - padding: 0 8px 0 38px; - } + i.fa + float: left + display: block + line-height: 28px + color: darken(white, 5%) + margin: 0 10px - &.header-go-to-boards .member { - border-top-left-radius: 3px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 3px; - position: absolute; - left: 0; - } -} + + span + margin-right: 10px -// .header-btn-text { -// padding: 0 8px; -// } + .board-header-btn-close + float: right -// .header-notification-list ul { -// margin-top: 8px; -// } + i.fa + margin: 0 6px -// .header-notification-list .action-comment { -// max-height: 250px; -// overflow-y: auto; -// } + .board-header-btn, + h1.is-clickable + &.is-hovered, + &:hover + background: rgba(0, 0, 0, .15) -// .header-user { -// position: absolute; -// top: 5px; -// right: 0; -// } + .separator + margin: 2px 4px + border-left: 1px solid rgba(255, 255, 255, .3) + height: 24px + float: left -- cgit v1.2.3-1-g7c22