From 35308f5b09eca93b5908b4649a73dee5ab0dc915 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 15 May 2014 14:52:36 +0200 Subject: [PATCH 01/25] hide navigation by default, not only on small screens, first step --- core/css/header.css | 74 +++++++++++++++++++++++++++++++++++++++++ core/css/mobile.css | 80 --------------------------------------------- lib/base.php | 1 + 3 files changed, 75 insertions(+), 80 deletions(-) create mode 100644 core/css/header.css diff --git a/core/css/header.css b/core/css/header.css new file mode 100644 index 0000000000..65afdf5570 --- /dev/null +++ b/core/css/header.css @@ -0,0 +1,74 @@ +/* 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; +} +/* do not show menu toggle on public share links as there is no menu */ +#body-public #owncloud.menutoggle { + background-image: none; + padding-right: 0 !important; +} + +/* toggle navigation */ +#content-wrapper { + padding-left: 0; +} + +#navigation { + top: 45px; + bottom: initial; + width: 255px; + 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: 80px; + 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: 80px; +} +#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; +} \ No newline at end of file diff --git a/core/css/mobile.css b/core/css/mobile.css index 025bee6415..9cea0dddc8 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -21,19 +21,6 @@ box-align: center; } -/* 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; -} -/* do not show menu toggle on public share links as there is no menu */ -#body-public #owncloud.menutoggle { - background-image: none; - padding-right: 0 !important; -} - /* compress search box on mobile, expand when focused */ .searchbox input[type="search"] { width: 15%; @@ -53,73 +40,6 @@ display: none; } -/* toggle navigation */ -#content-wrapper { - padding-left: 0; -} - -#navigation { - top: 45px; - bottom: initial; - width: 255px; - 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: 80px; - 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: 80px; -} -#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 app list */ -#body-user #controls, -#body-settings #controls { - padding-left: 0; -} -#body-user .app-files #controls { - left: 230px !important; /* sidebar only */ -} - /* don’t require a minimum width for controls bar */ #controls { min-width: initial !important; diff --git a/lib/base.php b/lib/base.php index 376bb6c1d0..639aac8355 100644 --- a/lib/base.php +++ b/lib/base.php @@ -344,6 +344,7 @@ class OC { } OC_Util::addStyle("styles"); + OC_Util::addStyle("header"); OC_Util::addStyle("mobile"); OC_Util::addStyle("icons"); OC_Util::addStyle("fonts"); From e2e05c4798a1c7aff439b2d91d6578e2fcc49260 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 16 May 2014 16:03:35 +0200 Subject: [PATCH 02/25] adjust controls bar position for removed nav bar --- apps/files/css/files.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 501a216043..9303910b3e 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -101,7 +101,7 @@ * to be more flexible / relative */ #body-user .app-files #controls { - left: 310px; /* main nav bar + sidebar */ + left: 230px; /* sidebar width */ position: fixed; padding-left: 0px; } From 19d7d8796461a36dc9f73f3fe2e55df9c87bb1f7 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 16 May 2014 16:04:36 +0200 Subject: [PATCH 03/25] toggle the navigation on desktop, not only on mobile --- core/js/js.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/core/js/js.js b/core/js/js.js index 834916b2e3..67da7915cf 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1111,18 +1111,12 @@ function initCore() { * If the screen is bigger, the main menu is not a toggle any more. */ function setupMainMenu() { - // toggle the navigation on mobile - if (!OC._matchMedia) { - return; - } - var mq = OC._matchMedia('(max-width: 768px)'); - var lastMatch = mq.matches; + // toggle the navigation var $toggle = $('#header #owncloud'); var $navigation = $('#navigation'); function updateMainMenu() { - // mobile mode ? - if (lastMatch && !$toggle.hasClass('menutoggle')) { + if (!$toggle.hasClass('menutoggle')) { // init the menu OC.registerMenu($toggle, $navigation); $toggle.data('oldhref', $toggle.attr('href')); From e27a4092871482fcaffef5672d5623f2f9f9e881 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 16 May 2014 17:11:51 +0200 Subject: [PATCH 04/25] show appname next to logo for better hint at navigation --- core/css/header.css | 34 ++++++++++++++++++++++++++-------- core/css/mobile.css | 5 +++++ core/css/styles.css | 3 +++ core/templates/layout.user.php | 4 ++++ 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 65afdf5570..4548903832 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -1,16 +1,34 @@ +/* display logo so appname can be shown next to it */ +#header .logo-wide { + display: inline-block; +} +/* show appname next to logo */ +.header-appname { + display: inline-block; + position: relative; + color: #fff; + font-size: 26px; + opacity: .4; + margin-left: 5px; +} /* 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; +#header .icon-caret { + display: inline-block; + width: 12px; + height: 14px; +} +.header-appname, +#header .icon-caret { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; + filter: alpha(opacity=45); + opacity: .45; } /* do not show menu toggle on public share links as there is no menu */ -#body-public #owncloud.menutoggle { - background-image: none; - padding-right: 0 !important; +#body-public #header .icon-caret { + display: none; } + /* toggle navigation */ #content-wrapper { padding-left: 0; diff --git a/core/css/mobile.css b/core/css/mobile.css index 9cea0dddc8..49bc6a2195 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -4,6 +4,11 @@ padding-top: 10px; } +/* don’t show appname next to logo on narrow screens */ +.header-appname { + display: none; +} + #body-login .wrapper { display: -webkit-box; -webkit-box-orient: horizontal; diff --git a/core/css/styles.css b/core/css/styles.css index 595b553267..9b70d6fe09 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -59,6 +59,9 @@ body { left: 0; padding: 6px; padding-bottom: 0; + height: 45px; /* header height */ + -moz-box-sizing: border-box; + box-sizing: border-box; } /* info part on the right, used e.g. for info on who shared something */ diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index d551c53521..891221227c 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -47,6 +47,10 @@