diff options
23 files changed, 433 insertions, 128 deletions
diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 65564623..288590da 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -1,7 +1,10 @@ template(name="board") if isBoardReady.get if currentBoard - +boardBody + if onlyShowCurrentCard + +cardDetails(currentCard) + else + +boardBody else //- XXX We need a better error message in case the board has been archived +message(label="board-not-found") diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index a601bc2e..aa55baad 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -57,6 +57,10 @@ BlazeComponent.extendComponent({ return currentCard && currentCard.listId === listId; }, + onlyShowCurrentCard() { + return Utils.isMiniScreen() && Session.get('currentCard'); + }, + events() { return [{ // XXX The board-overlay div should probably be moved to the parent diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl index b1ddfe6d..8e28fcfa 100644 --- a/client/components/boards/boardColors.styl +++ b/client/components/boards/boardColors.styl @@ -23,9 +23,13 @@ setBoardColor(color) .sidebar-list li a:hover background-color: lighten(color, 10%) - &#header #header-quick-access ul li.current + &#header ul li.current, &#header-quick-access ul li.current border-bottom: 2px solid lighten(color, 10%) + &#header-quick-access + background: darken(color, 10%) + color: white + &#header #header-main-bar .board-header-btn.emphasis background: complement(color) @@ -47,6 +51,11 @@ setBoardColor(color) &:not(.is-checked) + .minicard:hover:not(.minicard-composer) background: lighten(color, 97%) + @media screen and (max-width: 800px) + &.pop-over .header + background: color + color: white + .board-color-nephritis setBoardColor(#27AE60) diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index fc1abc88..2a24b6c2 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -5,19 +5,21 @@ template(name="boardHeaderBar") = title .board-header-btns.left + + .board-header-btns.right unless isSandstorm if currentUser a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}" title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}") i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}") if showStarCounter - span {{_ 'board-nb-stars' currentBoard.stars}} + span + = currentBoard.stars a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}") i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}") span {{_ currentBoard.permission}} - .board-header-btns.right a.board-header-btn.js-open-filter-view( title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{/if}}" class="{{#if Filter.isActive}}emphasis{{/if}}") @@ -39,7 +41,7 @@ template(name="boardHeaderBar") .separator a.board-header-btn.js-open-board-menu - i.board-header-btn-icon.fa.fa-cog + i.board-header-btn-icon.fa.fa-navicon template(name="boardMenuPopup") ul.pop-over-list diff --git a/client/components/boards/boardsList.jade b/client/components/boards/boardsList.jade index c11bb2df..ae82dfa9 100644 --- a/client/components/boards/boardsList.jade +++ b/client/components/boards/boardsList.jade @@ -27,7 +27,6 @@ template(name="boardList") template(name="boardListHeaderBar") h1 {{_ 'my-boards'}} - .board-header-btns.right a.board-header-btn.js-open-archived-board i.fa.fa-archive diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl index e24940a0..83d4c9c7 100644 --- a/client/components/boards/boardsList.styl +++ b/client/components/boards/boardsList.styl @@ -1,7 +1,7 @@ $spaceBetweenTiles = 16px .board-list - margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0 + margin: 0 ($spaceBetweenTiles/2) li float: left @@ -24,8 +24,8 @@ $spaceBetweenTiles = 16px display: block font-weight: 700 min-height: 18px - padding: 8px 12px 8px 12px - margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles + padding: 8px + margin: ($spaceBetweenTiles/2) position: relative text-decoration: none @@ -128,3 +128,22 @@ $spaceBetweenTiles = 16px font-size: 25px color: white +@media screen and (max-width: 800px) + .board-list + height: 100% + overflow: scroll + + li + width: 33.3% + + .board-list-item + overflow: hidden + + .board-list-item-sub-name + position: relative + top: -100px + left: -100px + +@media screen and (max-width: 360px) + li + width: 50% diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 5746c92c..0282aa77 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -9,7 +9,7 @@ template(name="cardDetails") else a.fa.fa-times-thin.close-card-details.js-close-card-details if currentUser.isBoardMember - a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu + a.fa.fa-navicon.card-details-menu.js-open-card-details-menu h2.card-details-title.js-card-title( class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") = title diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index b4fdca52..ea1363b5 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -48,7 +48,7 @@ BlazeComponent.extendComponent({ }, onRendered() { - this.scrollParentContainer(); + if (!Utils.isMiniScreen()) this.scrollParentContainer(); }, onDestroyed() { diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 8d71c54d..4ac0578b 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -94,3 +94,20 @@ input[type="submit"].attachment-add-link-submit margin: 0 0 8px 4px padding: 6px 12px width: 18% + +@media screen and (max-width: 800px) + .card-details + width: calc(100% - 40px) + padding: 0px 20px 0px 20px + margin: 0px + transition: none + + .card-details-canvas + width: 100% + + .card-details-header + .close-card-details + margin-right: 0px + + .card-details-menu + margin-right: 10px diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 47d160f4..edef8657 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -136,3 +136,12 @@ min-height: 36px margin-bottom: 20px overflow-y: auto + +@media screen and (max-width: 800px) + .minicard + .is-selected & + transform: translateX(0px) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + z-index: 15 + box-shadow: 0 1px 2px rgba(0,0,0,.15) diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl index 9ae95140..646da657 100644 --- a/client/components/forms/forms.styl +++ b/client/components/forms/forms.styl @@ -629,3 +629,9 @@ button a, .quiet color: white + +@media screen and (max-width: 800px) + .edit-controls, + .add-controls + .fa-times-thin + margin: 3px 20px diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 750cf3a2..33097800 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -7,7 +7,7 @@ template(name="listHeader") class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") = title if currentUser.isBoardMember - a.list-header-menu-icon.fa.fa-ellipsis-v.js-open-list-menu + a.list-header-menu-icon.fa.fa-navicon.js-open-list-menu template(name="editListTitleForm") .list-composer 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%) diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 3a5c7fdb..893b5164 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -4,6 +4,8 @@ template(name="sidebar") class="{{#if isTongueHidden}}is-hidden{{/if}}") i.fa.fa-angle-left .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar + a.hide-btn.js-hide-sidebar + i.fa.fa-angle-right unless isDefaultView h2 a.fa.fa-chevron-left.js-back-home diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index ec3ebcf6..4bb53d4d 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -18,7 +18,8 @@ BlazeComponent.extendComponent({ }, onCreated() { - this._isOpen = new ReactiveVar(!Session.get('currentCard')); + const initOpen = Utils.isMiniScreen() ? false : (!Session.get('currentCard')); + this._isOpen = new ReactiveVar(initOpen); this._view = new ReactiveVar(defaultView); Sidebar = this; }, @@ -96,6 +97,7 @@ BlazeComponent.extendComponent({ // XXX Hacky, we need some kind of `super` const mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events(); return [...mixinEvents, { + 'click .js-hide-sidebar': this.hide, 'click .js-toggle-sidebar': this.toggle, 'click .js-back-home': this.setView, }]; diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index 151a8f19..9007af59 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -19,6 +19,9 @@ overflow-x: hidden overflow-y: auto + .hide-btn + display: none + h3 color: darken(white, 50%) font-size: 1em @@ -130,3 +133,48 @@ margin: 0 margin-bottom: 5px padding: 0 2px 0 10px + +@media screen and (max-width: 800px) + .board-sidebar + width: 100% + right: -@width + + .sidebar-content + .hide-btn + width: 40px + height: @width + position: absolute + right: 5px + top: 5px + display: block + z-index: 15 + background: darken(white, 3%) + transition: left .1s + color: darken(white, 50%) + border-radius: 50% + border: 1px solid darken(white, 30%) + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + color: darken(white, 50%) + + i.fa + padding: 8px 16px + font-size: 24px + font-weight: bold + + .sidebar-tongue + width: 40px + height: @width + left: -@width - 7px + top: 5px + display: block + border-radius: 50% + border: 1px solid darken(white, 30%) + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + color: darken(white, 50%) + + .board-sidebar.is-open & + display: none + + i.fa + padding: 8px 0px 8px 16px + font-weight: bold diff --git a/client/components/users/userForm.styl b/client/components/users/userForm.styl index dbe62b4e..48a6a74e 100644 --- a/client/components/users/userForm.styl +++ b/client/components/users/userForm.styl @@ -55,3 +55,35 @@ .select-lang width: 275px font-size: 1.0em + +@media screen and (max-width: 800px) + .auth-layout + width: 100% + height: 100% + margin: 0px + padding: 0px + + .at-form-landing-logo + margin-top: 20px + margin-bottom: 20px + + .at-form + width: calc(100% - 50px) + height: calc(100% - 162px) + margin: 0px + padding: 25px + + button + width: 100% + + .at-form-lang + width: 100% + margin: 0px + padding: 0px + + .select-lang + width: 200px + font-size: 1.2em + position: absolute + left: calc((100% - 200px)/2) + bottom: 25px diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index 3fc25c8a..8e988c8e 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -1,13 +1,12 @@ template(name="headerUserBar") #header-user-bar a.header-user-bar-name.js-open-header-member-menu - i.fa.fa-chevron-down + .header-user-bar-avatar + +userAvatar(userId=currentUser._id) if currentUser.profile.fullname = currentUser.profile.fullname else = currentUser.username - a.header-user-bar-avatar.js-change-avatar - +userAvatar(userId=currentUser._id) template(name="memberMenuPopup") ul.pop-over-list diff --git a/client/lib/popup.js b/client/lib/popup.js index 7418d938..797eb26d 100644 --- a/client/lib/popup.js +++ b/client/lib/popup.js @@ -1,10 +1,3 @@ -// A simple tracker dependency that we invalidate every time the window is -// resized. This is used to reactively re-calculate the popup position in case -// of a window resize. This is the equivalent of a "Signal" in some other -// programming environments (eg, elm). -const windowResizeDep = new Tracker.Dependency(); -$(window).on('resize', () => windowResizeDep.changed()); - window.Popup = new class { constructor() { // The template we use to render popups @@ -160,7 +153,10 @@ window.Popup = new class { _getOffset(element) { const $element = $(element); return () => { - windowResizeDep.depend(); + Utils.windowResizeDep.depend(); + + if(Utils.isMiniScreen()) return { left:0, top:0 }; + const offset = $element.offset(); const popupWidth = 300 + 15; return { @@ -183,7 +179,9 @@ window.Popup = new class { // was available and returns `false`. There is a (small) risk a false // positives. const title = TAPi18n.__(translationKey); - return title !== translationKey ? title : false; + // when popup showed as full of small screen, we need a default header to clearly see [X] button + const defaultTitle = Utils.isMiniScreen() ? 'Wekan' : false; + return title !== translationKey ? title : defaultTitle; }; } }; diff --git a/client/lib/utils.js b/client/lib/utils.js index 6bdd5822..4f772a60 100644 --- a/client/lib/utils.js +++ b/client/lib/utils.js @@ -22,6 +22,17 @@ Utils = { return string.charAt(0).toUpperCase() + string.slice(1); }, + windowResizeDep: new Tracker.Dependency(), + + // in fact, what we really care is screen size + // large mobile device like iPad or android Pad has a big screen, it should also behave like a desktop + // in a small window (even on desktop), Wekan run in compact mode. + // we can easily debug with a small window of desktop broswer. :-) + isMiniScreen() { + this.windowResizeDep.depend(); + return $(window).width() <= 800; + }, + // Determine the new sort index calculateIndex(prevCardDomElement, nextCardDomElement, nCards = 1) { let base, increment; @@ -54,3 +65,9 @@ Utils = { }; }, }; + +// A simple tracker dependency that we invalidate every time the window is +// resized. This is used to reactively re-calculate the popup position in case +// of a window resize. This is the equivalent of a "Signal" in some other +// programming environments (eg, elm). +$(window).on('resize', () => Utils.windowResizeDep.changed()); |