From 354eff9f7bf550f83d55ef2e96b10aab1a70162d Mon Sep 17 00:00:00 2001 From: Liming Xie Date: Thu, 17 Dec 2015 14:23:35 +0800 Subject: add: support compact mode for mobile web, auto adapt to small screen/window --- client/components/main/header.jade | 69 +++++++------- client/components/main/header.styl | 177 ++++++++++++++++++++++-------------- client/components/main/layouts.styl | 12 +++ client/components/main/popup.styl | 87 +++++++++++++++++- 4 files changed, 242 insertions(+), 103 deletions(-) (limited to 'client/components/main') diff --git a/client/components/main/header.jade b/client/components/main/header.jade index 0d178250..ff79617e 100644 --- a/client/components/main/header.jade +++ b/client/components/main/header.jade @@ -1,32 +1,32 @@ template(name="header") - #header(class=currentBoard.colorClass) - //- - If the user is connected we display a small "quick-access" top bar that - list all starred boards with a link to go there. This is inspired by the - Reddit "subreddit" bar. - The first link goes to the boards page. - unless isSandstorm - if currentUser - #header-quick-access - ul - li - a(href="{{pathFor 'home'}}") - span.fa.fa-home - | {{_ 'all-boards'}} - each currentUser.starredBoards - li.separator - - li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}") - a(href="{{pathFor 'board' id=_id slug=slug}}") - = title - else - li.current {{_ 'quick-access-description'}} + //- + If the user is connected we display a small "quick-access" top bar that + list all starred boards with a link to go there. This is inspired by the + Reddit "subreddit" bar. + The first link goes to the boards page. + unless isSandstorm + if currentUser + #header-quick-access(class=currentBoard.colorClass) + ul + li + a(href="{{pathFor 'home'}}") + span.fa.fa-home + | {{_ 'all-boards'}} + each currentUser.starredBoards + li.separator - + li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}") + a(href="{{pathFor 'board' id=_id slug=slug}}") + = title + else + li.current {{_ 'quick-access-description'}} - a#header-new-board-icon.js-create-board - i.fa.fa-plus(title="Create a new board") + a#header-new-board-icon.js-create-board + i.fa.fa-plus(title="Create a new board") - +headerUserBar + +headerUserBar + #header(class=currentBoard.colorClass) //- The main bar is a colorful bar that provide all the meta-data for the current page. This bar is contextual based. @@ -34,13 +34,14 @@ template(name="header") #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}") +Template.dynamic(template=headerBar) - //- - On sandstorm, the logo shouldn't be clickable, because we only have one - page/document on it, and we don't want to see the home page containing - the list of all boards. - if isSandstorm - .wekan-logo - img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan") - else - a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}") - img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan") + if wrappedHeader + //- + On sandstorm, the logo shouldn't be clickable, because we only have one + page/document on it, and we don't want to see the home page containing + the list of all boards. + if isSandstorm + .wekan-logo + img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan") + else + a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}") + img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan") diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 6decf2df..d9abe07f 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -5,75 +5,8 @@ transition: background-color 0.4s background: #2980B9 - #header-quick-access - background-color: rgba(0, 0, 0, 0.2) - padding: 0px 10px - height: 28px - font-size: 12px - display: flex - - #header-user-bar, - #header-new-board-icon, - ul li - color: darken(white, 17%) - - .fa - color: inherit - - a:hover, a.is-active - color: white - - ul - transition: opacity 0.2s - margin: 4px 0 0 5px - overflow: hidden - - li - display: block - float: left - width: auto - color: darken(white, 15%) - padding: 2px 5px 0 - - &.current - color: darken(white, 5%) - - &:first-child .fa-home - margin-right: 5px - - a.js-create-board - margin-left: 5px - - #header-user-bar, - #header-new-board-icon - flex-shrink: 0 - - #header-user-bar - margin: 2px 0 - - .header-user-bar-avatar - float: left - - .member - width: 24px - height: @width - margin: 0 - margin-top: 1px - - .header-user-bar-name - margin: 4px 8px 0 0 - float: left - - i.fa-chevron-down - margin-right: 4px - - #header-new-board-icon - flex-grow: 1 - margin: 6px 5px 0 - width: 12px - #header-main-bar - height: 28px * 1.618034 - 6px + height: 40px padding: 7px 10px 0 h1 @@ -155,3 +88,111 @@ border-left: 1px solid rgba(255, 255, 255, .3) height: 24px float: left + +#header-quick-access + color: white + transition: background-color 0.4s + background: #2573a7 + height: 28px + font-size: 12px + display: flex + + #header-user-bar, + #header-new-board-icon, + ul li + color: darken(white, 17%) + + .fa + color: inherit + + a:hover, a.is-active + color: white + + ul + transition: opacity 0.2s + margin: 4px 0 0 5px + overflow: hidden + + li + display: block + float: left + width: auto + color: darken(white, 15%) + padding: 2px 5px 0 + + &.current + color: darken(white, 5%) + + &:first-child .fa-home + margin-right: 5px + + a.js-create-board + margin-left: 5px + + #header-user-bar, + #header-new-board-icon + flex-shrink: 0 + + #header-user-bar + margin: 2px 0 + + .header-user-bar-avatar + float: left + position: relative + top: -5px + margin-right: 5px + + .member + width: 24px + height: @width + margin: 0 + margin-top: 1px + + .header-user-bar-name + margin: 4px 8px 0 0 + float: left + + i.fa-chevron-down + margin-right: 4px + + #header-new-board-icon + flex-grow: 1 + margin: 6px 5px 0 + width: 12px + +@media screen and (max-width: 800px) + #header + #header-main-bar + height: 40px + + h1 + display: none + + .board-header-btns + margin-top: 0px + + .board-header-btn + height: 32px + line-height: @height + font-size: 16px + + i.fa + line-height: 32px + + + span + display: none + + #header-quick-access + transition: background-color 0.4s + width: 100% + padding: 10px 0px + z-index: 30 + position: absolute + bottom: 0px + + ul + width: calc(100% - 150px) + overflow: ellipsis + + li + height: 28px diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index 0e50dd55..b364d91b 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -355,3 +355,15 @@ a @keyframes flexGrowIn from flex-basis: 0 + +@media screen and (max-width: 800px) + #content + margin: 1px 0px 49px 0px + height: calc(100% - 96px) + + > .wrapper + margin-top: 0px + + .wrapper + height: 100% + margin: 0px diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl index 8a685069..b7c9e264 100644 --- a/client/components/main/popup.styl +++ b/client/components/main/popup.styl @@ -83,7 +83,7 @@ $popupWidth = 300px transition: transform 0.2s .content - width: 300 - 20px + width: $popupWidth - 20px padding: 0 10px 10px float: left @@ -243,3 +243,88 @@ $popupWidth = 300px &:hover text-decoration: underline + +@media screen and (max-width: 800px) + .pop-over + width: 100% + height: 100% + overflow: hidden + margin-top: 0px + border: 0px solid #dbdbdb + + .header + color: white + background: #2980B9 + height: 48px + padding: 0px 0px + border: 0px + margin: 0px 0px + width: 100% + position: absolute + top: 0px + + .header-title + font-size: 20px + font-weight: normal + padding-top: 8px + + .back-btn + width: 30px + padding: 8px 12px 8px 12px + + i.fa + color: white + + .close-btn + padding: 10px 12px + + i.fa + font-size: 24px + color: white + + .content-wrapper + width: 100% + height: calc(100% - 48px) + overflow-y: scroll + overflow-x: hidden + margin: 48px 0px 0px 0px + + .content-container + width: 1000% + height: 100% + max-height: 100% + + .content + width: calc(10% - 20px) + height: calc(100% - 20px) + padding: 10px + + form + margin: 10px 10px + width: calc(100% - 20px) + + p, + textarea, + input[type="text"], + input[type="email"], + input[type="password"], + input[type="file"] + margin: 4px 0 12px + width: 100% + + .pop-over-list + li > a + width: calc(100% - 20px) + padding: 10px 10px + margin: 0px 0px + border-bottom: 1px solid #eee + + hr + width: 100% + height: 20px + margin: 0px 0px + color: #eee + + for depth in (1..6) + .popup-container-depth-{depth} + transform: translateX(- depth * 10%) -- cgit v1.2.3-1-g7c22