diff --git a/src/public/favicon.ico b/src/public/favicon.ico deleted file mode 100644 diff --git a/src/public/images/favicon.ico b/src/public/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ { @@ -71,8 +75,10 @@ }) router.afterEach((to, from) => { - // Remove the (old) error page when changing a page - $('#error-page').remove() + // When changing a page remove old: + // - error page + // - modal backdrop + $('#error-page,.modal-backdrop.show').remove() }) /** diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss --- a/src/resources/sass/app.scss +++ b/src/resources/sass/app.scss @@ -1,11 +1,5 @@ -// Fonts - -// Variables @import 'variables'; - -// Bootstrap -@import '~bootstrap/scss/bootstrap'; - +@import 'bootstrap'; @import 'menu'; @import 'toast'; @import 'forms'; @@ -149,6 +143,10 @@ padding-right: 0; } } + + button { + line-height: 1; + } } .btn-action { @@ -266,15 +264,66 @@ } } -// Bootstrap style fix -.btn-link { - border: 0; -} +// Various improvements for mobile +@include media-breakpoint-down(sm) { + .card { + border: 0; + } -.table thead th { - border: 0; -} + .card-body { + padding: 0.5rem 0; + } + + .form-group { + margin-bottom: 0.5rem; + } + + .tab-content { + margin-top: 0.5rem; + } + + .col-form-label { + color: #666; + font-size: 95%; + } + + .form-group.plaintext .col-form-label { + padding-bottom: 0; + } + + form.read-only.short label { + width: 35%; -small { - font-size: 0.875em; + & + * { + width: 65%; + } + } + + #app > div.container { + margin-bottom: 1rem; + margin-top: 1rem; + } + + #header-menu-navbar { + padding: 0; + } + + #dashboard-nav > a { + width: 135px; + } + + .table-sm:not(.form-list) { + tbody td { + padding: 0.75rem 0.5rem; + + svg { + vertical-align: -0.175em; + } + + & > svg { + font-size: 125%; + margin-right: 0.25rem; + } + } + } } diff --git a/src/resources/sass/bootstrap.scss b/src/resources/sass/bootstrap.scss new file mode 100644 --- /dev/null +++ b/src/resources/sass/bootstrap.scss @@ -0,0 +1,15 @@ +// Bootstrap +@import '~bootstrap/scss/bootstrap'; + +// Bootstrap style fixes +.btn-link { + border: 0; +} + +.table thead th { + border: 0; +} + +small { + font-size: 0.875em; +} diff --git a/src/resources/sass/forms.scss b/src/resources/sass/forms.scss --- a/src/resources/sass/forms.scss +++ b/src/resources/sass/forms.scss @@ -1,4 +1,3 @@ - .list-input { & > div { &:not(:last-child) { @@ -23,6 +22,10 @@ input.is-invalid { z-index: 2; } + + .btn svg { + vertical-align: middle; + } } .range-input { diff --git a/src/resources/sass/menu.scss b/src/resources/sass/menu.scss --- a/src/resources/sass/menu.scss +++ b/src/resources/sass/menu.scss @@ -116,6 +116,16 @@ @include media-breakpoint-down(sm) { #header-menu { padding: 0 1em; + + .navbar-nav { + display: block; + width: 100%; + padding: 0; + + li { + border-top: 1px solid #eee; + } + } } #footer-menu { diff --git a/src/resources/sass/toast.scss b/src/resources/sass/toast.scss --- a/src/resources/sass/toast.scss +++ b/src/resources/sass/toast.scss @@ -5,6 +5,11 @@ margin: 0.5rem; width: 320px; z-index: 1055; // above Bootstrap's modal backdrop and dialogs + + @media (max-width: 375px) { + left: 0; + width: auto; + } } .toast { @@ -13,6 +18,10 @@ &:not(:last-child) { margin-bottom: 0.3rem; } + + @media (max-width: 375px) { + max-width: 100%; + } } .toast-header { diff --git a/src/resources/views/layouts/app.blade.php b/src/resources/views/layouts/app.blade.php --- a/src/resources/views/layouts/app.blade.php +++ b/src/resources/views/layouts/app.blade.php @@ -9,6 +9,7 @@ {{ config('app.name') }} -- @yield('title') {{-- TODO: PWA disabled for now: @laravelPWA --}} + diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue --- a/src/resources/vue/Admin/User.vue +++ b/src/resources/vue/Admin/User.vue @@ -4,8 +4,8 @@

{{ user.email }}

-
-
+ +
@@ -13,7 +13,7 @@
-
+
@@ -21,7 +21,7 @@
-
+
@@ -29,31 +29,31 @@
-
+
{{ user.first_name }}
-
+
{{ user.last_name }}
-
+
{{ user.organization }}
-
+
{{ user.phone }}
-
+
@@ -62,13 +62,13 @@
-
+
{{ user.billing_address }}
-
+
{{ user.country }} @@ -114,7 +114,7 @@

Account balance {{ $root.price(wallet.balance) }}

- +
@@ -212,7 +212,7 @@ - + {{ domain.namespace }} @@ -238,7 +238,7 @@ - + {{ item.email }} @@ -319,7 +319,7 @@
- +
@@ -328,7 +328,7 @@
- +
diff --git a/src/resources/vue/Domain/List.vue b/src/resources/vue/Domain/List.vue --- a/src/resources/vue/Domain/List.vue +++ b/src/resources/vue/Domain/List.vue @@ -12,7 +12,7 @@ - + {{ domain.namespace }} diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue --- a/src/resources/vue/User/Info.vue +++ b/src/resources/vue/User/Info.vue @@ -8,7 +8,7 @@
New user account
-
+
{{ $root.userStatusText(user) }} @@ -71,10 +71,14 @@ - + - {{ pkg.name }} + {{ $root.priceLabel(pkg.cost, 1, discount) }} @@ -113,11 +117,11 @@ :value="sku.id" :disabled="sku.readonly" :checked="sku.enabled" - :dusk="'sku-input-' + sku.title" + :id="'sku-input-' + sku.title" > - {{ sku.name }} +
- + {{ user.email }} diff --git a/src/resources/vue/Widgets/Status.vue b/src/resources/vue/Widgets/Status.vue --- a/src/resources/vue/Widgets/Status.vue +++ b/src/resources/vue/Widgets/Status.vue @@ -22,7 +22,7 @@ Verify your domain to finish the setup process.

-
diff --git a/src/tests/Browser/Admin/LogonTest.php b/src/tests/Browser/Admin/LogonTest.php --- a/src/tests/Browser/Admin/LogonTest.php +++ b/src/tests/Browser/Admin/LogonTest.php @@ -99,7 +99,7 @@ // Click the Logout button $browser->within(new Menu(), function ($browser) { - $browser->click('.link-logout'); + $browser->clickMenuItem('logout'); }); // We expect the logon page diff --git a/src/tests/Browser/Components/Menu.php b/src/tests/Browser/Components/Menu.php --- a/src/tests/Browser/Components/Menu.php +++ b/src/tests/Browser/Components/Menu.php @@ -46,12 +46,16 @@ * * @param \Laravel\Dusk\Browser $browser * @param array $items List of menu items + * @param string $active Expected active item * * @return void */ - public function assertMenuItems($browser, array $items) + public function assertMenuItems($browser, array $items, string $active = null) { - // TODO: On mobile the links will not be visible + // On mobile the links are not visible, show them first (wait for transition) + if ($browser->isPhone()) { + $browser->click('@toggler')->waitFor('.navbar-collapse.show'); + } foreach ($items as $item) { $browser->assertVisible('.link-' . $item); @@ -59,21 +63,36 @@ // Check number of items, to make sure there's no extra items PHPUnit::assertCount(count($items), $browser->elements('li')); + + if ($active) { + $browser->assertPresent(".link-{$active}.active"); + } + + if ($browser->isPhone()) { + $browser->click('@toggler')->waitUntilMissing('.navbar-collapse.show'); + } } /** - * Assert that specified menu item is active + * Click menu link. * - * @param \Laravel\Dusk\Browser $browser - * @param string $item Menu item name + * @param \Laravel\Dusk\Browser $browser The browser object + * @param string $name Menu item name * * @return void */ - public function assertActiveItem($browser, string $item) + public function clickMenuItem($browser, string $name) { - // TODO: On mobile the links will not be visible + // On mobile the links are not visible, show them first (wait for transition) + if ($browser->isPhone()) { + $browser->click('@toggler')->waitFor('.navbar-collapse.show'); + } - $browser->assertVisible(".link-{$item}.active"); + $browser->click('.link-' . $name); + + if ($browser->isPhone()) { + $browser->waitUntilMissing('.navbar-collapse.show'); + } } /** diff --git a/src/tests/Browser/LogonTest.php b/src/tests/Browser/LogonTest.php --- a/src/tests/Browser/LogonTest.php +++ b/src/tests/Browser/LogonTest.php @@ -22,10 +22,15 @@ $browser->visit(new Home()) ->within(new Menu(), function ($browser) { $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'webmail']); - }) - ->within(new Menu('footer'), function ($browser) { + }); + + if ($browser->isDesktop()) { + $browser->within(new Menu('footer'), function ($browser) { $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'tos', 'webmail']); }); + } else { + $browser->assertMissing('#footer-menu .navbar-nav'); + } }); } @@ -73,11 +78,17 @@ $browser->on(new Dashboard()) ->within(new Menu(), function ($browser) { $browser->assertMenuItems(['support', 'contact', 'webmail', 'logout']); - }) - ->within(new Menu('footer'), function ($browser) { + }); + + if ($browser->isDesktop()) { + $browser->within(new Menu('footer'), function ($browser) { $browser->assertMenuItems(['support', 'contact', 'webmail', 'logout']); - }) - ->assertUser('john@kolab.org'); + }); + } else { + $browser->assertMissing('#footer-menu .navbar-nav'); + } + + $browser->assertUser('john@kolab.org'); // Assert no "Account status" for this account $browser->assertMissing('@status'); @@ -107,7 +118,7 @@ // Click the Logout button $browser->within(new Menu(), function ($browser) { - $browser->click('.link-logout'); + $browser->clickMenuItem('logout'); }); // We expect the logon page diff --git a/src/tests/Browser/SignupTest.php b/src/tests/Browser/SignupTest.php --- a/src/tests/Browser/SignupTest.php +++ b/src/tests/Browser/SignupTest.php @@ -107,8 +107,7 @@ ->assertMissing('@step3'); $browser->within(new Menu(), function ($browser) { - $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']); - $browser->assertActiveItem('signup'); + $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login'], 'signup'); }); $browser->waitFor('@step0 .plan-selector > .plan-box'); @@ -155,14 +154,8 @@ public function testSignupStep1(): void { $this->browse(function (Browser $browser) { - $browser->visit('/signup/individual')->onWithoutAssert(new Signup()); - - $browser->assertVisible('@step1'); - - $browser->within(new Menu(), function ($browser) { - $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']); - $browser->assertActiveItem('signup'); - }); + $browser->visit('/signup/individual') + ->onWithoutAssert(new Signup()); // Here we expect two text inputs and Back and Continue buttons $browser->with('@step1', function ($step) { @@ -182,6 +175,10 @@ $step->assertFocused('#signup_email'); }); + $browser->within(new Menu(), function ($browser) { + $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login'], 'signup'); + }); + // Submit invalid email, and first_name // We expect both inputs to have is-invalid class added, with .invalid-feedback element $browser->with('@step1', function ($step) use ($browser) { @@ -375,7 +372,9 @@ ->assertUser('signuptestdusk@' . \config('app.domain')); // Logout the user - $browser->click('a.link-logout'); + $browser->within(new Menu(), function ($browser) { + $browser->clickMenuItem('logout'); + }); }); } @@ -469,7 +468,9 @@ ->on(new Dashboard()) ->assertUser('admin@user-domain-signup.com'); - $browser->click('a.link-logout'); + $browser->within(new Menu(), function ($browser) { + $browser->clickMenuItem('logout'); + }); }); } @@ -523,7 +524,9 @@ ->on(new Dashboard()) ->assertUser('signuptestdusk@' . \config('app.domain')) // Logout the user - ->click('a.link-logout'); + ->within(new Menu(), function ($browser) { + $browser->clickMenuItem('logout'); + }); }); $user = $this->getTestUser('signuptestdusk@' . \config('app.domain')); diff --git a/src/tests/Browser/UsersTest.php b/src/tests/Browser/UsersTest.php --- a/src/tests/Browser/UsersTest.php +++ b/src/tests/Browser/UsersTest.php @@ -280,25 +280,25 @@ $browser->with('@form', function (Browser $browser) { $browser->with('@skus', function ($browser) { // Uncheck 'groupware', expect activesync unchecked - $browser->click('@sku-input-groupware') - ->assertNotChecked('@sku-input-groupware') - ->assertNotChecked('@sku-input-activesync') - ->assertEnabled('@sku-input-activesync') - ->assertNotReadonly('@sku-input-activesync') + $browser->click('#sku-input-groupware') + ->assertNotChecked('#sku-input-groupware') + ->assertNotChecked('#sku-input-activesync') + ->assertEnabled('#sku-input-activesync') + ->assertNotReadonly('#sku-input-activesync') // Check 'activesync', expect an alert - ->click('@sku-input-activesync') + ->click('#sku-input-activesync') ->assertDialogOpened('Activesync requires Groupware Features.') ->acceptDialog() - ->assertNotChecked('@sku-input-activesync') + ->assertNotChecked('#sku-input-activesync') // Check '2FA', expect 'activesync' unchecked and readonly - ->click('@sku-input-2fa') - ->assertChecked('@sku-input-2fa') - ->assertNotChecked('@sku-input-activesync') - ->assertReadonly('@sku-input-activesync') + ->click('#sku-input-2fa') + ->assertChecked('#sku-input-2fa') + ->assertNotChecked('#sku-input-activesync') + ->assertReadonly('#sku-input-activesync') // Uncheck '2FA' - ->click('@sku-input-2fa') - ->assertNotChecked('@sku-input-2fa') - ->assertNotReadonly('@sku-input-activesync'); + ->click('#sku-input-2fa') + ->assertNotChecked('#sku-input-2fa') + ->assertNotReadonly('#sku-input-activesync'); }); }); });