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