diff options
author | nztqa <nztqa@users.noreply.github.com> | 2017-11-29 17:06:33 +0900 |
---|---|---|
committer | nztqa <nztqa@users.noreply.github.com> | 2017-11-29 17:06:33 +0900 |
commit | c31d7455f7b7de4198ee46c59fe0886c54bf457c (patch) | |
tree | d4226cd2278347c4f24d51b690b0f4932526a482 /client/components/lists | |
parent | 162b15c0cdba99c406f41a80a431f2b99f4ff027 (diff) | |
download | wekan-c31d7455f7b7de4198ee46c59fe0886c54bf457c.tar.gz wekan-c31d7455f7b7de4198ee46c59fe0886c54bf457c.tar.bz2 wekan-c31d7455f7b7de4198ee46c59fe0886c54bf457c.zip |
Optimize for mobile web, show single list per page with navigate bar
Diffstat (limited to 'client/components/lists')
-rw-r--r-- | client/components/lists/list.jade | 4 | ||||
-rw-r--r-- | client/components/lists/list.js | 7 | ||||
-rw-r--r-- | client/components/lists/list.styl | 49 | ||||
-rw-r--r-- | client/components/lists/listHeader.jade | 26 | ||||
-rw-r--r-- | client/components/lists/listHeader.js | 3 |
5 files changed, 83 insertions, 6 deletions
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, }]; }, |