From 8089838f5706446c3448fbeb5b846556806d8bf5 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 27 Mar 2018 15:47:10 +0200 Subject: [PATCH 1/6] Increase header height from 45px to 50 Signed-off-by: Jan-Christoph Borchardt --- core/css/header.scss | 26 +++++++++++++------------- core/css/mobile.scss | 2 -- core/css/styles.scss | 9 +++++---- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index b1141476a0..95632ade4a 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -49,7 +49,7 @@ left: 0; right: 0; z-index: 2000; - height: 45px; + height: 50px; background-color: $color-primary; box-sizing: border-box; justify-content: space-between; @@ -57,10 +57,8 @@ /* LOGO and APP NAME -------------------------------------------------------- */ #nextcloud { - padding: 5px; - padding-bottom: 0; - height: 45px; - /* header height */ + padding: 8px 5px; + height: 100%; box-sizing: border-box; opacity: 1; &:focus { @@ -82,8 +80,8 @@ position: absolute; max-width: 350px; max-height: 280px; - right: 0; - top: 44px; + right: 12px; + top: 50px; margin: 0; &:not(.popovermenu) { @@ -167,10 +165,11 @@ justify-content: center; align-items: center; width: 44px; - height: 44px; + height: 100%; cursor: pointer; opacity: 0.6; padding: 0; + padding-right: 12px; margin: 0; } } @@ -340,9 +339,9 @@ nav[role='navigation'] { #settings { display: inline-block; + height: 100%; color: rgba($color-primary-text, 0.7); cursor: pointer; - margin-right: 13px; flex: 0 0 auto; /* User menu on the right */ @@ -439,8 +438,9 @@ nav[role='navigation'] { #appmenu { display: inline-block; width: auto; - clear: both; min-width: 88px; + height: 100%; + clear: both; li { float: left; @@ -454,8 +454,8 @@ nav[role='navigation'] { position: relative; display: inline-block; margin: 0; - padding: 12px; - height: 21px; + padding: 15px 12px; + height: 20px; text-align: center; vertical-align: top !important; opacity: .6; @@ -496,7 +496,7 @@ nav[role='navigation'] { border-radius: $border-radius; border-top-left-radius: 0; border-top-right-radius: 0; - margin-top: 0; + margin-top: 5px; color: rgba($color-main-text, .7); width: auto; left: 50%; diff --git a/core/css/mobile.scss b/core/css/mobile.scss index ebc7e094cd..c7db11919f 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -136,8 +136,6 @@ table.multiselect thead { #header .header-right .menu { max-width: calc(100vw - 26px); position: fixed; - right: 13px; - top: 45px; &::after { display: none !important; } diff --git a/core/css/styles.scss b/core/css/styles.scss index 0b15718eef..134ee9476d 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -207,10 +207,11 @@ body { & ~ .icon-close-white { display: inline; position: absolute; - width: 15px; - height: 32px; - right: 3px; + width: 30px; + height: 100%; + right: 0; top: 0; + margin: 0; &, &:focus, &:active, &:hover { border: none; background-color: transparent; @@ -287,7 +288,7 @@ body { width: 100%; overflow-x: hidden; /* prevent horizontal scrollbar */ - padding-top: 45px; + padding-top: 50px; box-sizing: border-box; } From bb37bdbfc4b2d70873dc70befc774f329de40c74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 28 Mar 2018 10:39:24 +0200 Subject: [PATCH 2/6] Add more space to the logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/header.scss b/core/css/header.scss index 95632ade4a..7aa4990823 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -57,7 +57,7 @@ /* LOGO and APP NAME -------------------------------------------------------- */ #nextcloud { - padding: 8px 5px; + padding: 8px 12px; height: 100%; box-sizing: border-box; opacity: 1; From 4a3538bbd854ccad51fa79d2ae060383f2bbe83d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 28 Mar 2018 10:41:00 +0200 Subject: [PATCH 3/6] Fix app menu, popovers and searchbox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/header.scss | 24 ++++++++++++------------ core/css/styles.scss | 5 +++-- core/js/js.js | 4 ---- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 7aa4990823..228c6869d1 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -80,7 +80,7 @@ position: absolute; max-width: 350px; max-height: 280px; - right: 12px; + right: 5px; top: 50px; margin: 0; @@ -98,7 +98,7 @@ width: 0; position: absolute; pointer-events: none; - right: 12px; + right: 10px; } } .logo { @@ -159,17 +159,17 @@ .header-right { > div, > form { + height: 100%; position: relative; > .menutoggle { display: flex; justify-content: center; align-items: center; - width: 44px; + width: 50px; height: 100%; cursor: pointer; opacity: 0.6; padding: 0; - padding-right: 12px; margin: 0; } } @@ -224,14 +224,14 @@ /* NAVIGATION --------------------------------------------------------------- */ nav[role='navigation'] { display: inline-block; - width: 44px; - height: 44px; - margin-left: -44px; + width: 50px; + height: 50px; + margin-left: -50px; } .header-left #navigation { position: relative; - left: 22px; /* half the togglemenu */ + left: 25px; /* half the togglemenu */ transform: translateX(-50%); width: 160px; } @@ -347,6 +347,7 @@ nav[role='navigation'] { /* User menu on the right */ #expand { opacity: 1; /* override icon opacity */ + padding-right: 12px; img { opacity: .7; @@ -438,7 +439,7 @@ nav[role='navigation'] { #appmenu { display: inline-block; width: auto; - min-width: 88px; + min-width: 50px; height: 100%; clear: both; @@ -447,14 +448,14 @@ nav[role='navigation'] { display: inline-block; position: relative; vertical-align: top !important; - height: 45px; + height: 100%; cursor: pointer; a { position: relative; display: inline-block; margin: 0; - padding: 15px 12px; + padding: 15px 15px; height: 20px; text-align: center; vertical-align: top !important; @@ -496,7 +497,6 @@ nav[role='navigation'] { border-radius: $border-radius; border-top-left-radius: 0; border-top-right-radius: 0; - margin-top: 5px; color: rgba($color-main-text, .7); width: auto; left: 50%; diff --git a/core/css/styles.scss b/core/css/styles.scss index 134ee9476d..0bbd89f075 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -184,17 +184,18 @@ body { padding: 3px; padding-left: 25px; padding-right: 20px; - background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center; + background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center; color: $color-primary-text; border: 0; border-radius: $border-radius; - margin-top: 3px; + margin-top: 9px; width: 0; cursor: pointer; -webkit-transition: all 100ms; transition: all 100ms; opacity: .6; &:focus, &:active, &:valid { + background-position-x: 6px; color: $color-primary-text; width: 155px; cursor: text; diff --git a/core/js/js.js b/core/js/js.js index 26dbbdb6e6..3d5f489895 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1553,10 +1553,6 @@ function initCore() { if(appList.length-1-appCount >= 1) { appCount--; } - // show at least one icon - if(appCount < 1) { - appCount = 1; - } $('#more-apps a').removeClass('active'); var lastShownApp; From f37f145c55d45c7a9d8568362b34c77bf66cdac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 28 Mar 2018 10:47:07 +0200 Subject: [PATCH 4/6] Fix settings menu offset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/css/header.scss b/core/css/header.scss index 228c6869d1..8e52095788 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -407,6 +407,9 @@ nav[role='navigation'] { } #expanddiv { + &.menu { + right: 17px; + } a { display: inline-flex; align-items: center; From 2887b9bdabc0cc375dc5e20f04ace70b47f314c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 4 Apr 2018 15:05:51 +0200 Subject: [PATCH 5/6] Fix arrow position on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/mobile.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index c7db11919f..0d8dda8ca7 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -156,9 +156,14 @@ table.multiselect thead { width: 0; position: absolute; pointer-events: none; - right: 13px; + right: 15px; z-index: 2001; display: none; } + + /* settings need a different offset, since they have a right padding */ + &#settings::after { + right: 27px; + } } } From 85cb1305102ecc7309a5e7b8909daa0b3012dead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Tue, 10 Apr 2018 21:34:51 +0200 Subject: [PATCH 6/6] Fix max-width to fit the new margin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- core/css/mobile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 0d8dda8ca7..cfc8c002e1 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -134,7 +134,7 @@ table.multiselect thead { @media only screen and (max-width: 480px) { #header .header-right .menu { - max-width: calc(100vw - 26px); + max-width: calc(100vw - 10px); position: fixed; &::after { display: none !important;