github-mirrors/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-04-23 21:47:10 -04:00
Code Issues Projects Releases Packages Wiki Activity

Optimize for mobile web, show single list per page with navigate bar

Browse source
This commit is contained in:
nztqa 2017-11-29 17:06:33 +09:00
parent 162b15c0cd
commit c31d7455f7
15 changed files with 189 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/components/boards/boardBody.jade
View file

@ -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

15
client/components/boards/boardBody.styl
View file

@ -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

3
client/components/boards/boardColors.styl
View file

@ -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)

4
client/components/boards/boardHeader.js
View file

@ -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'));

4
client/components/lists/list.jade
View file

@ -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

7
client/components/lists/list.js
View file

@ -114,3 +114,10 @@ BlazeComponent.extendComponent({
});
},
}).register('list');
Template.miniList.events({
'click .js-select-list'() {
const listId = this._id;
Session.set('currentList', listId);
},
});

49
client/components/lists/list.styl
View file

@ -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

26
client/components/lists/listHeader.jade
View file

@ -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'}}

3
client/components/lists/listHeader.js
View file

@ -41,6 +41,9 @@ BlazeComponent.extendComponent({
position: 'top',
});
},
'click .js-unselect-list'() {
Session.set('currentList', null);
},
submit: this.editTitle,
}];
},

36
client/components/main/header.jade
View file

@ -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")

4
client/components/main/header.js
View file

@ -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);
},
});

26
client/components/main/header.styl
View file

@ -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

9
client/components/users/userHeader.jade
View file

@ -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

11
client/config/blazeHelpers.js
View file

@ -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());

5
config/router.js
View file

@ -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();