From 84c96c2bf701711cc54d1bb44b49e364123a5aa9 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 14 Mar 2014 09:14:52 +0100 Subject: mobile: don't require a minimum width for controls bar --- core/css/mobile.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index a63aa902d34..15ff8c65458 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -18,5 +18,10 @@ display: none; } +/* don’t require a minimum width for controls bar */ +#controls { + min-width: initial !important; +} + } -- cgit v1.2.3 From eb7b12525438df4345a588f1e87d208daa040654 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 14 Mar 2014 09:15:20 +0100 Subject: mobile: position share dropdown --- core/css/mobile.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index 15ff8c65458..665ad0daae9 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -23,5 +23,11 @@ min-width: initial !important; } +/* position share dropdown */ +#dropdown { + margin-right: 10% !important; + width: 80% !important; +} + } -- cgit v1.2.3 From b37aae9925a1d5516a24f1f9db31a156c2d3bc72 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 14 Mar 2014 10:33:19 +0100 Subject: mobile: menu togglable for mobile, use code by @PVince81 --- core/css/mobile.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++ core/js/js.js | 40 +++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index 665ad0daae9..5a465b35fb9 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -18,6 +18,71 @@ display: none; } +/* toggle navigation */ +#content-wrapper { + padding-left: 0; +} + +#navigation { + top: 45px; + bottom: initial; + width: 90%; + max-width: 320px; + max-height: 90%; + margin-top: 0; + top: 45px; + background-color: rgba(36, 40, 47, .97); + overflow-x: initial; + border-bottom-right-radius: 7px; + border-bottom: 1px #333 solid; + border-right: 1px #333 solid; + box-shadow: 0 0 7px rgba(29,45,68,.97); + display: none; +} +#navigation, #navigation * { + box-sizing:border-box; -moz-box-sizing:border-box; +} +#navigation li { + display: inline-block; +} +#navigation a { + width: 70px; + height: 80px; + display: inline-block; + text-align: center; + padding: 20px 0; +} +#navigation a span { + display: inline-block; + font-size: 13px; + padding-bottom: 0; + padding-left: 0; + width: initial; +} +#navigation .icon { + margin: 0 auto; + padding: 0; +} +#navigation li:first-child .icon { + padding-top: 0; +} +/* Apps management as sticky footer */ +#navigation .wrapper { + min-height: initial; + margin: 0; +} +#apps-management, #navigation .push { + height: initial; +} + + + +/* shift to account for missing navigation */ +#body-user #controls, +#body-settings #controls { + padding-left: 0; +} + /* don’t require a minimum width for controls bar */ #controls { min-width: initial !important; diff --git a/core/js/js.js b/core/js/js.js index 841f3a769f1..2b3a9f04770 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -482,6 +482,29 @@ var OC={ }).show(); }, 'html'); } + }, + + // for menu toggling + registerMenu: function($toggle, $menuEl) { + $menuEl.addClass('menu'); + $toggle.addClass('menutoggle'); + $toggle.on('click', function(event) { + if ($menuEl.is(OC._currentMenu)) { + $menuEl.hide(); + OC._currentMenu = null; + OC._currentMenuToggle = null; + return false; + } + // another menu was open? + else if (OC._currentMenu) { + // close it + OC._currentMenu.hide(); + } + $menuEl.show(); + OC._currentMenu = $menuEl; + OC._currentMenuToggle = $toggle; + return false + }); } }; OC.search.customResults={}; @@ -940,6 +963,23 @@ function initCore() { $('a.action').tipsy({gravity:'s', fade:true, live:true}); $('td .modified').tipsy({gravity:'s', fade:true, live:true}); $('input').tipsy({gravity:'w', fade:true}); + + // toggle for menus + $(document).on('mouseup.closemenus', function(event) { + var $el = $(event.target); + if ($el.closest('.menu').length || $el.closest('.menutoggle').length) { + // don't close when clicking on the menu directly or a menu toggle + return false; + } + if (OC._currentMenu) { + OC._currentMenu.hide(); + } + OC._currentMenu = null; + OC._currentMenuToggle = null; + }); + + // toggle the navigation on mobile + OC.registerMenu($('#header #owncloud'), $('#navigation')); } $(document).ready(initCore); -- cgit v1.2.3 From ac48563efd74675f75b2b300b7d8b0c4f74be70b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 14 Mar 2014 10:48:28 +0100 Subject: add spans around replaced 'Shared' indicators to make text hide on mobile --- core/js/share.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'core') diff --git a/core/js/share.js b/core/js/share.js index 129e50b22d5..90119105fa1 100644 --- a/core/js/share.js +++ b/core/js/share.js @@ -48,7 +48,7 @@ OC.Share={ var action = $(file).find('.fileactions .action[data-action="Share"]'); var img = action.find('img').attr('src', image); action.addClass('permanent'); - action.html(' '+t('core', 'Shared')).prepend(img); + action.html(' '+t('core', 'Shared')+'').prepend(img); } else { var dir = $('#dir').val(); if (dir.length > 1) { @@ -63,7 +63,7 @@ OC.Share={ if (img.attr('src') != OC.imagePath('core', 'actions/public')) { img.attr('src', image); $(action).addClass('permanent'); - $(action).html(' '+t('core', 'Shared')).prepend(img); + $(action).html(' '+t('core', 'Shared')+'').prepend(img); } }); } @@ -103,10 +103,10 @@ OC.Share={ var img = action.find('img').attr('src', image); if (shares) { action.addClass('permanent'); - action.html(' '+ escapeHTML(t('core', 'Shared'))).prepend(img); + action.html(' '+ escapeHTML(t('core', 'Shared'))+'').prepend(img); } else { action.removeClass('permanent'); - action.html(' '+ escapeHTML(t('core', 'Share'))).prepend(img); + action.html(' '+ escapeHTML(t('core', 'Share'))+'').prepend(img); } } } -- cgit v1.2.3 From 872006da035b92b17b0a0d5da781844080861531 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 17 Mar 2014 20:40:22 +0100 Subject: Only enable toggle for sidebar in mobile mode --- core/js/js.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'core') diff --git a/core/js/js.js b/core/js/js.js index 2b3a9f04770..23d16b69234 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -979,7 +979,12 @@ function initCore() { }); // toggle the navigation on mobile - OC.registerMenu($('#header #owncloud'), $('#navigation')); + if (window.matchMedia) { + var mq = window.matchMedia('(max-width: 600px)'); + if (mq && mq.matches) { + OC.registerMenu($('#header #owncloud'), $('#navigation')); + } + } } $(document).ready(initCore); -- cgit v1.2.3 From fe04106e0f6a88b5e3cf490773f2cb625465e98a Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 18 Mar 2014 13:09:25 +0100 Subject: Add/remove main menu action when switching between desktop/mobile mode --- core/js/js.js | 59 ++++++++++++++++++++--- core/js/tests/specs/coreSpec.js | 101 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 6 deletions(-) (limited to 'core') diff --git a/core/js/js.js b/core/js/js.js index 23d16b69234..aefca235093 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -488,7 +488,7 @@ var OC={ registerMenu: function($toggle, $menuEl) { $menuEl.addClass('menu'); $toggle.addClass('menutoggle'); - $toggle.on('click', function(event) { + $toggle.on('click.menu', function(event) { if ($menuEl.is(OC._currentMenu)) { $menuEl.hide(); OC._currentMenu = null; @@ -505,6 +505,17 @@ var OC={ OC._currentMenuToggle = $toggle; return false }); + }, + + unregisterMenu: function($toggle, $menuEl) { + // close menu if opened + if ($menuEl.is(OC._currentMenu)) { + $menuEl.hide(); + OC._currentMenu = null; + OC._currentMenuToggle = null; + } + $toggle.off('click.menu').removeClass('menutoggle'); + $menuEl.removeClass('menu'); } }; OC.search.customResults={}; @@ -978,13 +989,49 @@ function initCore() { OC._currentMenuToggle = null; }); - // toggle the navigation on mobile - if (window.matchMedia) { - var mq = window.matchMedia('(max-width: 600px)'); - if (mq && mq.matches) { - OC.registerMenu($('#header #owncloud'), $('#navigation')); + + /** + * Set up the main menu toggle to react to media query changes. + * If the screen is small enough, the main menu becomes a toggle. + * If the screen is bigger, the main menu is not a toggle any more. + */ + function setupMainMenu() { + // toggle the navigation on mobile + if (window.matchMedia) { + var mq = window.matchMedia('(max-width: 600px)'); + var lastMatch = mq.matches; + var $toggle = $('#header #owncloud'); + var $navigation = $('#navigation'); + + function updateMainMenu() { + // mobile mode ? + if (lastMatch && !$toggle.hasClass('menutoggle')) { + // init the menu + OC.registerMenu($toggle, $navigation); + $toggle.data('oldhref', $toggle.attr('href')); + $toggle.attr('href', '#'); + $navigation.hide(); + } + else { + OC.unregisterMenu($toggle, $navigation); + $toggle.attr('href', $toggle.data('oldhref')); + $navigation.show(); + } + } + + updateMainMenu(); + + // TODO: debounce this + $(window).resize(function() { + if (lastMatch !== mq.matches) { + lastMatch = mq.matches; + updateMainMenu(); + } + }); } } + + setupMainMenu(); } $(document).ready(initCore); diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js index 069546387c7..7fa0b8e9e62 100644 --- a/core/js/tests/specs/coreSpec.js +++ b/core/js/tests/specs/coreSpec.js @@ -279,5 +279,106 @@ describe('Core base tests', function() { expect(OC.generateUrl('apps/files/download{file}', {file: '/Welcome.txt'})).toEqual(OC.webroot + '/index.php/apps/files/download/Welcome.txt'); }); }); + describe('Main menu mobile toggle', function() { + var oldMatchMedia; + var $toggle; + var $navigation; + + beforeEach(function() { + oldMatchMedia = window.matchMedia; + window.matchMedia = sinon.stub(); + $('#testArea').append('' + + ''); + $toggle = $('#owncloud'); + $navigation = $('#navigation'); + }); + + afterEach(function() { + window.matchMedia = oldMatchMedia; + }); + it('Sets up menu toggle in mobile mode', function() { + window.matchMedia.returns({matches: true}); + window.initCore(); + expect($toggle.hasClass('menutoggle')).toEqual(true); + expect($navigation.hasClass('menu')).toEqual(true); + }); + it('Does not set up menu toggle in desktop mode', function() { + window.matchMedia.returns({matches: false}); + window.initCore(); + expect($toggle.hasClass('menutoggle')).toEqual(false); + expect($navigation.hasClass('menu')).toEqual(false); + }); + it('Switches on menu toggle when mobile mode changes', function() { + var mq = {matches: false}; + window.matchMedia.returns(mq); + window.initCore(); + expect($toggle.hasClass('menutoggle')).toEqual(false); + mq.matches = true; + $(window).trigger('resize'); + expect($toggle.hasClass('menutoggle')).toEqual(true); + }); + it('Switches off menu toggle when mobile mode changes', function() { + var mq = {matches: true}; + window.matchMedia.returns(mq); + window.initCore(); + expect($toggle.hasClass('menutoggle')).toEqual(true); + mq.matches = false; + $(window).trigger('resize'); + expect($toggle.hasClass('menutoggle')).toEqual(false); + }); + it('Clicking menu toggle toggles navigation in mobile mode', function() { + window.matchMedia.returns({matches: true}); + window.initCore(); + $navigation.hide(); // normally done through media query triggered CSS + expect($navigation.is(':visible')).toEqual(false); + $toggle.click(); + expect($navigation.is(':visible')).toEqual(true); + $toggle.click(); + expect($navigation.is(':visible')).toEqual(false); + }); + it('Clicking menu toggle does not toggle navigation in desktop mode', function() { + window.matchMedia.returns({matches: false}); + window.initCore(); + expect($navigation.is(':visible')).toEqual(true); + $toggle.click(); + expect($navigation.is(':visible')).toEqual(true); + }); + it('Switching to mobile mode hides navigation', function() { + var mq = {matches: false}; + window.matchMedia.returns(mq); + window.initCore(); + expect($navigation.is(':visible')).toEqual(true); + mq.matches = true; + $(window).trigger('resize'); + expect($navigation.is(':visible')).toEqual(false); + }); + it('Switching to desktop mode shows navigation', function() { + var mq = {matches: true}; + window.matchMedia.returns(mq); + window.initCore(); + expect($navigation.is(':visible')).toEqual(false); + mq.matches = false; + $(window).trigger('resize'); + expect($navigation.is(':visible')).toEqual(true); + }); + it('Switch to desktop with opened menu then back to mobile resets toggle', function() { + var mq = {matches: true}; + window.matchMedia.returns(mq); + window.initCore(); + expect($navigation.is(':visible')).toEqual(false); + $toggle.click(); + expect($navigation.is(':visible')).toEqual(true); + mq.matches = false; + $(window).trigger('resize'); + expect($navigation.is(':visible')).toEqual(true); + mq.matches = true; + $(window).trigger('resize'); + expect($navigation.is(':visible')).toEqual(false); + $toggle.click(); + expect($navigation.is(':visible')).toEqual(true); + }); + }); }); -- cgit v1.2.3 From cc6c1529848022765b9be6be808cf4dfb5b2d029 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 18 Mar 2014 15:52:06 +0100 Subject: Fixed matchMedia usage to make unit tests work in PhantomJS PhantomJS has a bug that makes it impossible to properly stub window.matchMedia. This fix adds a wrapper as OC._matchMedia that is used for unit tests --- core/js/js.js | 67 +++++++++++++++++++++++------------------ core/js/tests/specs/coreSpec.js | 27 +++++++++-------- 2 files changed, 52 insertions(+), 42 deletions(-) (limited to 'core') diff --git a/core/js/js.js b/core/js/js.js index aefca235093..87b2d59f160 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -997,41 +997,48 @@ function initCore() { */ function setupMainMenu() { // toggle the navigation on mobile - if (window.matchMedia) { - var mq = window.matchMedia('(max-width: 600px)'); - var lastMatch = mq.matches; - var $toggle = $('#header #owncloud'); - var $navigation = $('#navigation'); - - function updateMainMenu() { - // mobile mode ? - if (lastMatch && !$toggle.hasClass('menutoggle')) { - // init the menu - OC.registerMenu($toggle, $navigation); - $toggle.data('oldhref', $toggle.attr('href')); - $toggle.attr('href', '#'); - $navigation.hide(); - } - else { - OC.unregisterMenu($toggle, $navigation); - $toggle.attr('href', $toggle.data('oldhref')); - $navigation.show(); - } + if (!OC._matchMedia) { + return; + } + var mq = OC._matchMedia('(max-width: 600px)'); + var lastMatch = mq.matches; + var $toggle = $('#header #owncloud'); + var $navigation = $('#navigation'); + + function updateMainMenu() { + // mobile mode ? + if (lastMatch && !$toggle.hasClass('menutoggle')) { + // init the menu + OC.registerMenu($toggle, $navigation); + $toggle.data('oldhref', $toggle.attr('href')); + $toggle.attr('href', '#'); + $navigation.hide(); } + else { + OC.unregisterMenu($toggle, $navigation); + $toggle.attr('href', $toggle.data('oldhref')); + $navigation.show(); + } + } - updateMainMenu(); + updateMainMenu(); - // TODO: debounce this - $(window).resize(function() { - if (lastMatch !== mq.matches) { - lastMatch = mq.matches; - updateMainMenu(); - } - }); - } + // TODO: debounce this + $(window).resize(function() { + if (lastMatch !== mq.matches) { + lastMatch = mq.matches; + updateMainMenu(); + } + }); } - setupMainMenu(); + if (window.matchMedia) { + // wrapper needed for unit tests due to PhantomJS bugs + OC._matchMedia = function(media) { + return window.matchMedia(media); + } + setupMainMenu(); + } } $(document).ready(initCore); diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js index 7fa0b8e9e62..57ea5be8be0 100644 --- a/core/js/tests/specs/coreSpec.js +++ b/core/js/tests/specs/coreSpec.js @@ -285,8 +285,11 @@ describe('Core base tests', function() { var $navigation; beforeEach(function() { - oldMatchMedia = window.matchMedia; - window.matchMedia = sinon.stub(); + oldMatchMedia = OC._matchMedia; + // a separate method was needed because window.matchMedia + // cannot be stubbed due to a bug in PhantomJS: + // https://github.com/ariya/phantomjs/issues/12069 + OC._matchMedia = sinon.stub(); $('#testArea').append('' + @@ -296,23 +299,23 @@ describe('Core base tests', function() { }); afterEach(function() { - window.matchMedia = oldMatchMedia; + OC._matchMedia = oldMatchMedia; }); it('Sets up menu toggle in mobile mode', function() { - window.matchMedia.returns({matches: true}); + OC._matchMedia.returns({matches: true}); window.initCore(); expect($toggle.hasClass('menutoggle')).toEqual(true); expect($navigation.hasClass('menu')).toEqual(true); }); it('Does not set up menu toggle in desktop mode', function() { - window.matchMedia.returns({matches: false}); + OC._matchMedia.returns({matches: false}); window.initCore(); expect($toggle.hasClass('menutoggle')).toEqual(false); expect($navigation.hasClass('menu')).toEqual(false); }); it('Switches on menu toggle when mobile mode changes', function() { var mq = {matches: false}; - window.matchMedia.returns(mq); + OC._matchMedia.returns(mq); window.initCore(); expect($toggle.hasClass('menutoggle')).toEqual(false); mq.matches = true; @@ -321,7 +324,7 @@ describe('Core base tests', function() { }); it('Switches off menu toggle when mobile mode changes', function() { var mq = {matches: true}; - window.matchMedia.returns(mq); + OC._matchMedia.returns(mq); window.initCore(); expect($toggle.hasClass('menutoggle')).toEqual(true); mq.matches = false; @@ -329,7 +332,7 @@ describe('Core base tests', function() { expect($toggle.hasClass('menutoggle')).toEqual(false); }); it('Clicking menu toggle toggles navigation in mobile mode', function() { - window.matchMedia.returns({matches: true}); + OC._matchMedia.returns({matches: true}); window.initCore(); $navigation.hide(); // normally done through media query triggered CSS expect($navigation.is(':visible')).toEqual(false); @@ -339,7 +342,7 @@ describe('Core base tests', function() { expect($navigation.is(':visible')).toEqual(false); }); it('Clicking menu toggle does not toggle navigation in desktop mode', function() { - window.matchMedia.returns({matches: false}); + OC._matchMedia.returns({matches: false}); window.initCore(); expect($navigation.is(':visible')).toEqual(true); $toggle.click(); @@ -347,7 +350,7 @@ describe('Core base tests', function() { }); it('Switching to mobile mode hides navigation', function() { var mq = {matches: false}; - window.matchMedia.returns(mq); + OC._matchMedia.returns(mq); window.initCore(); expect($navigation.is(':visible')).toEqual(true); mq.matches = true; @@ -356,7 +359,7 @@ describe('Core base tests', function() { }); it('Switching to desktop mode shows navigation', function() { var mq = {matches: true}; - window.matchMedia.returns(mq); + OC._matchMedia.returns(mq); window.initCore(); expect($navigation.is(':visible')).toEqual(false); mq.matches = false; @@ -365,7 +368,7 @@ describe('Core base tests', function() { }); it('Switch to desktop with opened menu then back to mobile resets toggle', function() { var mq = {matches: true}; - window.matchMedia.returns(mq); + OC._matchMedia.returns(mq); window.initCore(); expect($navigation.is(':visible')).toEqual(false); $toggle.click(); -- cgit v1.2.3 From 67b8cfedf9f500eb25871265a05c874acc4809ff Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 18 Mar 2014 16:02:13 +0100 Subject: Define _matchMedia wrapper earlier The unit test stub didn't work because the _matchMedia wrapper was defined too late. This fix defines it earlier. --- core/js/js.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'core') diff --git a/core/js/js.js b/core/js/js.js index 87b2d59f160..121a4062d37 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -516,6 +516,19 @@ var OC={ } $toggle.off('click.menu').removeClass('menutoggle'); $menuEl.removeClass('menu'); + }, + + /** + * Wrapper for matchMedia + * + * This is makes it possible for unit tests to + * stub matchMedia (which doesn't work in PhantomJS) + */ + _matchMedia: function(media) { + if (window.matchMedia) { + return window.matchMedia(media); + } + return false; } }; OC.search.customResults={}; @@ -1033,10 +1046,6 @@ function initCore() { } if (window.matchMedia) { - // wrapper needed for unit tests due to PhantomJS bugs - OC._matchMedia = function(media) { - return window.matchMedia(media); - } setupMainMenu(); } } -- cgit v1.2.3 From 59906fbb4deeed881dd1e0c590c360ad48697169 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 18 Mar 2014 17:48:28 +0100 Subject: mobile: show caret indicator next to logo to make clear it is tappable --- core/css/mobile.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index 5a465b35fb9..56bee8f8a30 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -1,5 +1,13 @@ @media only screen and (max-width: 600px) { +/* show caret indicator next to logo to make clear it is tappable */ +#owncloud.menutoggle { + background-image: url('../img/actions/caret.svg'); + background-repeat: no-repeat; + background-position: right 26px; + padding-right: 16px !important; +} + /* compress search box on mobile, expand when focused */ .searchbox input[type="search"] { width: 15%; -- cgit v1.2.3 From c9d97d2ef22ca8b07f692a93f16619f7316d7d8f Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Fri, 21 Mar 2014 11:56:47 +0100 Subject: add top:45px to position:fixed controls, fixes alignment on android 4.0.4 browser --- core/css/styles.css | 1 + 1 file changed, 1 insertion(+) (limited to 'core') diff --git a/core/css/styles.css b/core/css/styles.css index 69cf6df07d0..af7f6dfd58e 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -246,6 +246,7 @@ input[type="submit"].enabled { -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; + top:45px; right: 0; left: 0; height: 44px; -- cgit v1.2.3 From ecf52e05fb9e88910167351dfa75bde5db2267ae Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 14:30:11 +0100 Subject: mobile: adjust width of app title, fix overlap --- core/css/mobile.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index 56bee8f8a30..6665b95f27c 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -54,7 +54,7 @@ display: inline-block; } #navigation a { - width: 70px; + width: 80px; height: 80px; display: inline-block; text-align: center; @@ -65,7 +65,7 @@ font-size: 13px; padding-bottom: 0; padding-left: 0; - width: initial; + width: 80px; } #navigation .icon { margin: 0 auto; -- cgit v1.2.3 From f2566e649ffd944dd5dfea3ba38124fef9472ed8 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 16:36:45 +0100 Subject: mobile: adjust break to 768, also fix min-widths --- apps/files/css/files.css | 2 +- apps/files/css/mobile.css | 2 +- core/css/mobile.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'core') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index af863aca33e..a463eb51d8f 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,7 +77,7 @@ } /* make sure there's enough room for the file actions */ #body-user #filestable { - min-width: 750px; + min-width: 688px; } #body-user #controls { min-width: 600px; diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 221c23e5ad5..087bb1f8364 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 768px) { /* don’t require a minimum width for files table */ #body-user #filestable { diff --git a/core/css/mobile.css b/core/css/mobile.css index 6665b95f27c..dbe1c55a560 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 768px) { /* show caret indicator next to logo to make clear it is tappable */ #owncloud.menutoggle { -- cgit v1.2.3 From 9b9b6ec31eac005f98bf38e691f81812335544e9 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 16:40:39 +0100 Subject: mobile: set a width for navigation popover to it's always 3 columns --- core/css/mobile.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'core') diff --git a/core/css/mobile.css b/core/css/mobile.css index dbe1c55a560..c67ac3e5ecf 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -34,8 +34,7 @@ #navigation { top: 45px; bottom: initial; - width: 90%; - max-width: 320px; + width: 255px; max-height: 90%; margin-top: 0; top: 45px; -- cgit v1.2.3 From 89ee5511580b7e9f5619961b12cd96b984b6b6e9 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 16:43:04 +0100 Subject: mobile: adjust breakpoint in JS as well --- core/js/js.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'core') diff --git a/core/js/js.js b/core/js/js.js index 121a4062d37..3c169cfb21f 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1013,7 +1013,7 @@ function initCore() { if (!OC._matchMedia) { return; } - var mq = OC._matchMedia('(max-width: 600px)'); + var mq = OC._matchMedia('(max-width: 768px)'); var lastMatch = mq.matches; var $toggle = $('#header #owncloud'); var $navigation = $('#navigation'); -- cgit v1.2.3 From a54260b5174cca222fb7589d9f582b454b37ef08 Mon Sep 17 00:00:00 2001 From: Thomas Müller Date: Tue, 25 Mar 2014 23:35:55 +0100 Subject: use minimum-scale=1.0 --- core/templates/layout.user.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'core') diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 3d897503480..b7266d50cfb 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -15,7 +15,7 @@ - + -- cgit v1.2.3