From c31d7455f7b7de4198ee46c59fe0886c54bf457c Mon Sep 17 00:00:00 2001 From: nztqa Date: Wed, 29 Nov 2017 17:06:33 +0900 Subject: Optimize for mobile web, show single list per page with navigate bar --- client/components/boards/boardBody.jade | 21 +++++++++---- client/components/boards/boardBody.styl | 15 ++++++++++ client/components/boards/boardColors.styl | 3 ++ client/components/boards/boardHeader.js | 4 --- client/components/lists/list.jade | 4 +++ client/components/lists/list.js | 7 +++++ client/components/lists/list.styl | 49 +++++++++++++++++++++++++++++++ client/components/lists/listHeader.jade | 26 ++++++++++++---- client/components/lists/listHeader.js | 3 ++ client/components/main/header.jade | 36 +++++++++++++++-------- client/components/main/header.js | 4 +++ client/components/main/header.styl | 26 ++++++++++++++-- client/components/users/userHeader.jade | 9 +++--- client/config/blazeHelpers.js | 11 +++++++ config/router.js | 5 ++++ 15 files changed, 189 insertions(+), 34 deletions(-) diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index fe10c921..bb3d2906 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -21,12 +21,21 @@ template(name="boardBody") if showOverlay.get .board-overlay .lists.js-lists - each currentBoard.lists - +list(this) - if currentCardIsInThisList - +cardDetails(currentCard) - if canSeeAddList - +addListForm + if isMiniScreen + if currentList + +list(currentList) + else + each currentBoard.lists + +miniList(this) + if currentUser.isBoardMember + +addListForm + else + each currentBoard.lists + +list(this) + if currentCardIsInThisList + +cardDetails(currentCard) + if currentUser.isBoardMember + +addListForm template(name="addListForm") .list.js-list.list-composer.js-list-composer diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index df5696a2..bb9beb19 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -43,3 +43,18 @@ position() .open-minicard-composer, .minicard-wrapper.is-checked display: none + +@media screen and (max-width: 800px) + .board-wrapper + + .board-canvas + + .lists + align-items: flex-start + display: flex + flex-direction: column + margin: 0 + padding: 0 40px 0px 0 + overflow-x: hidden + overflow-y: auto + position: cover diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl index 57a121a2..233659ca 100644 --- a/client/components/boards/boardColors.styl +++ b/client/components/boards/boardColors.styl @@ -67,6 +67,9 @@ setBoardColor(color) background: color color: white + &#header ul li.current, &#header-quick-access ul li.current + border-bottom: 4px solid lighten(color, 20%) + .board-color-nephritis setBoardColor(#27AE60) diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js index b7807ca9..fe10dab1 100644 --- a/client/components/boards/boardHeader.js +++ b/client/components/boards/boardHeader.js @@ -58,10 +58,6 @@ BlazeComponent.extendComponent({ return user && user.hasStarred(boardId); }, - isMiniScreen() { - return Utils.isMiniScreen(); - }, - // Only show the star counter if the number of star is greater than 2 showStarCounter() { const currentBoard = Boards.findOne(Session.get('currentBoard')); diff --git a/client/components/lists/list.jade b/client/components/lists/list.jade index c959b87f..c02e0dd6 100644 --- a/client/components/lists/list.jade +++ b/client/components/lists/list.jade @@ -2,3 +2,7 @@ template(name='list') .list.js-list(id="js-list-{{_id}}") +listHeader +listBody + +template(name='miniList') + a.mini-list.js-select-list.js-list(id="js-list-{{_id}}") + +listHeader diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 0e913207..a65ccc56 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -114,3 +114,10 @@ BlazeComponent.extendComponent({ }); }, }).register('list'); + +Template.miniList.events({ + 'click .js-select-list'() { + const listId = this._id; + Session.set('currentList', listId); + }, +}); diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index b7bc33e8..04685137 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -53,6 +53,9 @@ &.ui-sortable-handle cursor: grab + .list-header-left-icon + display: none + .list-header-name display: inline font-size: 16px @@ -135,3 +138,49 @@ div float: left + +@media screen and (max-width: 800px) + .mini-list + flex: 0 0 60px + height: 60px + width: 100% + border-left: 0px + border-bottom: 1px solid darken(white, 20%) + + .list + display: block + width: 100% + border-left: 0px + + &.ui-sortable-helper + flex: 0 0 60px + height: 60px + width: 100% + border-left: 0px + border-bottom: 1px solid darken(white, 20%) + + .list-header.ui-sortable-handle + cursor: grabbing + + &.placeholder + flex: 0 0 60px + height: 60px + width: 100% + border-left: 0px + border-bottom: 1px solid darken(white, 20%) + + .list-header + + .list-header-left-icon + display: inline + padding: 7px + padding-right: 27px + margin-top: 1px + top: -@padding + left: -@padding + + .list-header-menu-icon + position: absolute + padding: 7px + top: -@padding + right: 17px diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 4bbc023c..c61681c7 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -3,19 +3,33 @@ template(name="listHeader") +inlinedForm +editListTitleForm else + if isMiniScreen + if currentList + a.list-header-left-icon.fa.fa-angle-left.js-unselect-list h2.list-header-name( class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") - = title + = title if wipLimit.enabled | ( span(class="{{#if reachedWipLimit}}highlight{{/if}}") {{cards.count}} |/#{wipLimit.value}) - + if showCardsCountForList cards.count = cards.count span.lowercase | {{_ 'cards'}} - if currentUser.isBoardMember + if isMiniScreen + if currentList + if isWatching + i.list-header-watch-icon.fa.fa-eye + div.list-header-menu + unless currentUser.isCommentOnly + if canSeeAddCard + a.js-add-card.fa.fa-plus.list-header-plus-icon + a.fa.fa-navicon.js-open-list-menu + else + a.list-header-menu-icon.fa.fa-angle-right.js-select-list + else if currentUser.isBoardMember if isWatching i.list-header-watch-icon.fa.fa-eye div.list-header-menu @@ -80,8 +94,8 @@ template(name="setWipLimitPopup") #js-wip-limit-edit label {{_ 'set-wip-limit-value'}} ul.pop-over-list - li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}} - if isWipLimitEnabled + li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}} + if isWipLimitEnabled i.fa.fa-check if isWipLimitEnabled p @@ -92,7 +106,7 @@ template(name="setWipLimitPopup") .soft-wip-limit .materialCheckBox(class="{{#if isWipLimitSoft}}is-checked{{/if}}") label {{_ 'soft-wip-limit'}} - + template(name="wipLimitErrorPopup") .wip-limit-invalid p {{_ 'wipLimitErrorPopup-dialog-pt1'}} diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index 04dba683..60dd6a34 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -41,6 +41,9 @@ BlazeComponent.extendComponent({ position: 'top', }); }, + 'click .js-unselect-list'() { + Session.set('currentList', null); + }, submit: this.editTitle, }]; }, diff --git a/client/components/main/header.jade b/client/components/main/header.jade index 51bccd09..dd071b3e 100644 --- a/client/components/main/header.jade +++ b/client/components/main/header.jade @@ -7,19 +7,31 @@ template(name="header") 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'}} + if isMiniScreen + ul + li + a(href="{{pathFor 'home'}}") + span.fa.fa-home + if currentList + each currentBoard.lists + li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}") + a.js-select-list + = title + #header-new-board-icon + else + 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") diff --git a/client/components/main/header.js b/client/components/main/header.js index c8f415df..b005775a 100644 --- a/client/components/main/header.js +++ b/client/components/main/header.js @@ -28,4 +28,8 @@ Template.header.events({ 'click .js-close-announcement'() { $('.announcement').hide(); }, + 'click .js-select-list'() { + Session.set('currentList', this._id); + Session.set('currentCard', null); + }, }); diff --git a/client/components/main/header.styl b/client/components/main/header.styl index 191e8893..4abc1d55 100644 --- a/client/components/main/header.styl +++ b/client/components/main/header.styl @@ -191,11 +191,33 @@ bottom: 0px ul - width: calc(100% - 150px) + width: calc(100% - 60px) overflow: ellipsis + padding: 10px + margin: -10px li - height: 28px + height: 100% + padding: 12px 0px + margin: -10px 0px + + a + height: 100% + padding: 12px 10px + margin: -10px 0px + + .fa-home + font-size: 26px + margin-top: -2px + + #header-new-board-icon + display: none + + #header-user-bar + position: absolute + right: 0px + padding: 10px + margin: -10px .announcement, .offline-warning diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index f67f82ee..096745ad 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -3,10 +3,11 @@ template(name="headerUserBar") a.header-user-bar-name.js-open-header-member-menu .header-user-bar-avatar +userAvatar(userId=currentUser._id) - if currentUser.profile.fullname - = currentUser.profile.fullname - else - = currentUser.username + unless isMiniScreen + if currentUser.profile.fullname + = currentUser.profile.fullname + else + = currentUser.username template(name="memberMenuPopup") ul.pop-over-list diff --git a/client/config/blazeHelpers.js b/client/config/blazeHelpers.js index 73ee24b6..e058d722 100644 --- a/client/config/blazeHelpers.js +++ b/client/config/blazeHelpers.js @@ -16,6 +16,17 @@ Blaze.registerHelper('currentCard', () => { } }); +Blaze.registerHelper('currentList', () => { + const listId = Session.get('currentList'); + if (listId) { + return Lists.findOne(listId); + } else { + return null; + } +}); + Blaze.registerHelper('getUser', (userId) => Users.findOne(userId)); Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join('')); + +Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen()); diff --git a/config/router.js b/config/router.js index c86a92ac..1f80004a 100644 --- a/config/router.js +++ b/config/router.js @@ -8,6 +8,7 @@ FlowRouter.route('/', { triggersEnter: [AccountsTemplates.ensureSignedIn], action() { Session.set('currentBoard', null); + Session.set('currentList', null); Session.set('currentCard', null); Filter.reset(); @@ -88,6 +89,7 @@ FlowRouter.route('/import/:source', { Session.set('fromBoard', Session.get('currentBoard')); } Session.set('currentBoard', null); + Session.set('currentList', null); Session.set('currentCard', null); Session.set('importSource', params.source); @@ -106,6 +108,7 @@ FlowRouter.route('/setting', { AccountsTemplates.ensureSignedIn, () => { Session.set('currentBoard', null); + Session.set('currentList', null); Session.set('currentCard', null); Filter.reset(); @@ -126,6 +129,7 @@ FlowRouter.route('/information', { AccountsTemplates.ensureSignedIn, () => { Session.set('currentBoard', null); + Session.set('currentList', null); Session.set('currentCard', null); Filter.reset(); @@ -146,6 +150,7 @@ FlowRouter.route('/people', { AccountsTemplates.ensureSignedIn, () => { Session.set('currentBoard', null); + Session.set('currentList', null); Session.set('currentCard', null); Filter.reset(); -- cgit v1.2.3-1-g7c22