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/components/sidebar | |
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/components/sidebar')
-rw-r--r-- | client/components/sidebar/sidebar.jade | 2 | ||||
-rw-r--r-- | client/components/sidebar/sidebar.js | 4 | ||||
-rw-r--r-- | client/components/sidebar/sidebar.styl | 48 |
3 files changed, 53 insertions, 1 deletions
diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 3a5c7fdb..893b5164 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -4,6 +4,8 @@ template(name="sidebar") class="{{#if isTongueHidden}}is-hidden{{/if}}") i.fa.fa-angle-left .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar + a.hide-btn.js-hide-sidebar + i.fa.fa-angle-right unless isDefaultView h2 a.fa.fa-chevron-left.js-back-home diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index ec3ebcf6..4bb53d4d 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -18,7 +18,8 @@ BlazeComponent.extendComponent({ }, onCreated() { - this._isOpen = new ReactiveVar(!Session.get('currentCard')); + const initOpen = Utils.isMiniScreen() ? false : (!Session.get('currentCard')); + this._isOpen = new ReactiveVar(initOpen); this._view = new ReactiveVar(defaultView); Sidebar = this; }, @@ -96,6 +97,7 @@ BlazeComponent.extendComponent({ // XXX Hacky, we need some kind of `super` const mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events(); return [...mixinEvents, { + 'click .js-hide-sidebar': this.hide, 'click .js-toggle-sidebar': this.toggle, 'click .js-back-home': this.setView, }]; diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index 151a8f19..9007af59 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -19,6 +19,9 @@ overflow-x: hidden overflow-y: auto + .hide-btn + display: none + h3 color: darken(white, 50%) font-size: 1em @@ -130,3 +133,48 @@ margin: 0 margin-bottom: 5px padding: 0 2px 0 10px + +@media screen and (max-width: 800px) + .board-sidebar + width: 100% + right: -@width + + .sidebar-content + .hide-btn + width: 40px + height: @width + position: absolute + right: 5px + top: 5px + display: block + z-index: 15 + background: darken(white, 3%) + transition: left .1s + color: darken(white, 50%) + border-radius: 50% + border: 1px solid darken(white, 30%) + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + color: darken(white, 50%) + + i.fa + padding: 8px 16px + font-size: 24px + font-weight: bold + + .sidebar-tongue + width: 40px + height: @width + left: -@width - 7px + top: 5px + display: block + border-radius: 50% + border: 1px solid darken(white, 30%) + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + color: darken(white, 50%) + + .board-sidebar.is-open & + display: none + + i.fa + padding: 8px 0px 8px 16px + font-weight: bold |