diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-12-17 07:29:46 +0100 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-12-17 07:29:46 +0100 |
commit | d6f1e6113048f349060a9a49268a8e18faada04b (patch) | |
tree | 887d73d51fc11be2ef2425ab7752ea0b91efb86e /client/lib | |
parent | 15245a9055feef9c45d14931db9d46e16b699258 (diff) | |
parent | 354eff9f7bf550f83d55ef2e96b10aab1a70162d (diff) | |
download | wekan-d6f1e6113048f349060a9a49268a8e18faada04b.tar.gz wekan-d6f1e6113048f349060a9a49268a8e18faada04b.tar.bz2 wekan-d6f1e6113048f349060a9a49268a8e18faada04b.zip |
Merge pull request #442 from floatinghotpot/mobile-web
This PR improves the UI on devices or windows with small screens.
Fixes #75
Fixes #437
Diffstat (limited to 'client/lib')
-rw-r--r-- | client/lib/popup.js | 16 | ||||
-rw-r--r-- | client/lib/utils.js | 17 |
2 files changed, 24 insertions, 9 deletions
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()); |