Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-23 08:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

add: support compact mode for mobile web, auto adapt to small screen/window

Browse source
This commit is contained in:
Liming Xie 2015-12-17 14:23:35 +08:00
parent 0954cff5b4
commit 354eff9f7b
23 changed files with 436 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/lib/popup.js
View file

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

17
client/lib/utils.js
View file

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