Fix search box overlapping on mobile

[jancborchardt]

Fix search bar is overlapping in mobile view #286

Simply added a background color again, the same as the header color is. Also adjusted that in theming.
Bonus: the background color of the log in page is now also fixed to be the themed one.

Please review @nextcloud/designers @Mar1u5@Bugsbane @williambargent @juliushaertl :)
Needs backport too.

[mention-bot]

@jancborchardt, thanks for your PR! By analyzing the annotation information on this pull request, we identified @schiessle, @LukasReschke and @MorrisJobke to be potential reviewers

[MorrisJobke]

Tested and works 👍

[MorrisJobke]

@jancborchardt Please fix the unit tests:

There were 4 failures:
1) OCA\Theming\Tests\Controller\ThemingControllerTest::testGetStylesheetWithOnlyColor
Failed asserting that two objects are equal.
--- Expected
+++ Actual
@@ @@
OCP\AppFramework\Http\DataDownloadResponse Object (
- 'data' => '#body-user #header,#body-settings #header,#body-public #header {background-color: #000}'
+ 'data' => '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}'
'filename' => 'style'
'contentType' => 'text/css'
'headers' => Array (...)
'cookies' => Array ()
'status' => 200
'lastModified' => null
'ETag' => null
'contentSecurityPolicy' => null
)
/drone/src/github.com/nextcloud/server/apps/theming/tests/lib/controller/ThemingControllerTest.php:328
2) OCA\Theming\Tests\Controller\ThemingControllerTest::testGetStylesheetWithOnlyColorInvert
Failed asserting that two objects are equal.
--- Expected
+++ Actual
@@ @@
OCP\AppFramework\Http\DataDownloadResponse Object (
- 'data' => '#body-user #header,#body-settings #header,#body-public #header {background-color: #fff}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url('/owncloud/core/img/actions/caret-dark.svg'); } .searchbox input[type="search"] { background: transparent url('/owncloud/core/img/actions/search.svg') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }'
+ 'data' => '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url('/owncloud/core/img/actions/caret-dark.svg'); } .searchbox input[type="search"] { background: transparent url('/owncloud/core/img/actions/search.svg') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }'
'filename' => 'style'
'contentType' => 'text/css'
'headers' => Array (...)
'cookies' => Array ()
'status' => 200
'lastModified' => null
'ETag' => null
'contentSecurityPolicy' => null
)
/drone/src/github.com/nextcloud/server/apps/theming/tests/lib/controller/ThemingControllerTest.php:355
3) OCA\Theming\Tests\Controller\ThemingControllerTest::testGetStylesheetWithAllCombined
Failed asserting that two objects are equal.
--- Expected
+++ Actual
@@ @@
OCP\AppFramework\Http\DataDownloadResponse Object (
- 'data' => '#body-user #header,#body-settings #header,#body-public #header {background-color: #000}#header .logo {
+ 'data' => '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}#header .logo {
background-image: url('./logo?v=0');
}
#header .logo-icon {
background-image: url('./logo?v=0');
background-size: 62px 34px;
}#body-login {
background-image: url('./loginbackground?v=0');
}'
'filename' => 'style'
'contentType' => 'text/css'
'headers' => Array (...)
'cookies' => Array ()
'status' => 200
'lastModified' => null
'ETag' => null
'contentSecurityPolicy' => null
)
/drone/src/github.com/nextcloud/server/apps/theming/tests/lib/controller/ThemingControllerTest.php:452
4) OCA\Theming\Tests\Controller\ThemingControllerTest::testGetStylesheetWithAllCombinedInverted
Failed asserting that two objects are equal.
--- Expected
+++ Actual
@@ @@
OCP\AppFramework\Http\DataDownloadResponse Object (
- 'data' => '#body-user #header,#body-settings #header,#body-public #header {background-color: #fff}#header .logo {
+ 'data' => '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .logo {
background-image: url('./logo?v=0');
}
#header .logo-icon {
background-image: url('./logo?v=0');
background-size: 62px 34px;
}#body-login {
background-image: url('./loginbackground?v=0');
}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url('/owncloud/core/img/actions/caret-dark.svg'); } .searchbox input[type="search"] { background: transparent url('/owncloud/core/img/actions/search.svg') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }'
'filename' => 'style'
'contentType' => 'text/css'
'headers' => Array (...)
'cookies' => Array ()
'status' => 200
'lastModified' => null
'ETag' => null
'contentSecurityPolicy' => null
)
/drone/src/github.com/nextcloud/server/apps/theming/tests/lib/controller/ThemingControllerTest.php:486

[jancborchardt]

@MorrisJobke sorry, on vacation now – could do it on Friday only (or if I am down to work the next two days ;)

[MorrisJobke]

@MorrisJobke sorry, on vacation now – could do it on Friday only (or if I am down to work the next two days ;)

I fixed the unit tests. :)

[jancborchardt]

Ok, so can we have reviews here ;) We should get this fix in soon and need to backport to 9 as well.

Please review @nextcloud/designers @Mar1u5@Bugsbane @williambargent @juliushaertl

[LukasReschke]

👍

[MariusBluem]

👍

[MariusBluem]

Backport to stable9 and stable10 was requested and makes sense. @karlitschek

[karlitschek]

cool! 👍 please backport

[Bugsbane]

👍

[jancborchardt]

@Mar1u5 has this been backported? I can’t see any referenced pull requests.

[MorrisJobke]

@jancborchardt No. Could you create the backport PRs?

[MorrisJobke]

stable10: #622
stable9: #623