From 64d02700f9fb7f2dffa306e8fc831dd1f9317bfa Mon Sep 17 00:00:00 2001 From: "Sebastian BURGIN-FIX (ext)" Date: Sat, 1 Aug 2026 14:32:37 +0200 Subject: [PATCH] Updated Mobile Experience --- .env.ci | 1 - lang/de_CH/components.php | 2 - lang/en_CH/components.php | 2 - resources/css/app.css | 43 ++++++---- resources/views/components/intro.blade.php | 94 +++++++++------------- tests/Feature/Components/IntroTabsTest.php | 78 +++++++++--------- tests/js/intro-tabs.test.js | 50 +++++------- 7 files changed, 120 insertions(+), 150 deletions(-) diff --git a/.env.ci b/.env.ci index 858375c..665468d 100644 --- a/.env.ci +++ b/.env.ci @@ -14,7 +14,6 @@ LOG_LEVEL=debug NIGHTWATCH_ENABLED=false - DB_CONNECTION=pgsql DB_HOST=127.0.0.1 DB_PORT=5432 diff --git a/lang/de_CH/components.php b/lang/de_CH/components.php index 75e1dd6..26e11a6 100644 --- a/lang/de_CH/components.php +++ b/lang/de_CH/components.php @@ -5,9 +5,7 @@ return [ 'intro' => [ 'title' => 'Schön, bist du da', - 'window' => 'Wir sind codebar', 'legend' => 'Was möchtest du über uns wissen?', - 'overview' => 'Übersicht', 'shortcuts' => 'Abschnitt wechseln: Zifferntasten 1 bis 3 oder die Pfeiltasten links und rechts.', 'prev_section' => 'Vorheriger Abschnitt', 'next_section' => 'Nächster Abschnitt', diff --git a/lang/en_CH/components.php b/lang/en_CH/components.php index 3fc3bfc..d4a82b0 100644 --- a/lang/en_CH/components.php +++ b/lang/en_CH/components.php @@ -5,9 +5,7 @@ return [ 'intro' => [ 'title' => 'Good to have you here', - 'window' => 'We are codebar', 'legend' => 'What would you like to know about us?', - 'overview' => 'Overview', 'shortcuts' => 'Switch section: number keys 1 to 3, or the left and right arrow keys.', 'prev_section' => 'Previous section', 'next_section' => 'Next section', diff --git a/resources/css/app.css b/resources/css/app.css index 0cc3a36..d263079 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -857,31 +857,44 @@ body { } .intro-tabs__panels { - display: grid; min-width: 0; } -.intro-tabs__panel { - grid-area: 1 / 1; -} - -.intro-tabs__panel:not(:first-child) { - visibility: hidden; - opacity: 0; +@supports not selector(:has(*)) { + .intro-tabs__panel:not(:first-child) { + display: none; + } } @supports selector(:has(*)) { .intro-tabs__panel { - visibility: hidden; - opacity: 0; - transition: opacity 200ms ease; + display: none; } .intro-tabs:has([data-tab='0']:checked) [data-panel='0'], .intro-tabs:has([data-tab='1']:checked) [data-panel='1'], - .intro-tabs:has([data-tab='2']:checked) [data-panel='2'], - .intro-tabs:has([data-tab='3']:checked) [data-panel='3'] { - visibility: visible; - opacity: 1; + .intro-tabs:has([data-tab='2']:checked) [data-panel='2'] { + display: block; + } + + @media (width >= 40rem) { + .intro-tabs__panels { + display: grid; + } + + .intro-tabs__panel { + display: block; + grid-area: 1 / 1; + visibility: hidden; + opacity: 0; + transition: opacity 200ms ease; + } + + .intro-tabs:has([data-tab='0']:checked) [data-panel='0'], + .intro-tabs:has([data-tab='1']:checked) [data-panel='1'], + .intro-tabs:has([data-tab='2']:checked) [data-panel='2'] { + visibility: visible; + opacity: 1; + } } } diff --git a/resources/views/components/intro.blade.php b/resources/views/components/intro.blade.php index 4c985ce..a014563 100644 --- a/resources/views/components/intro.blade.php +++ b/resources/views/components/intro.blade.php @@ -1,8 +1,7 @@ @php $sections = [ - ['key' => 'start', 'command' => null, 'next' => null], - ['key' => 'who_we_are', 'command' => __('components.intro.who_we_are.command'), 'next' => 2], - ['key' => 'what_we_do', 'command' => __('components.intro.what_we_do.command'), 'next' => 3], + ['key' => 'who_we_are', 'command' => __('components.intro.who_we_are.command'), 'next' => 1], + ['key' => 'what_we_do', 'command' => __('components.intro.what_we_do.command'), 'next' => 2], ['key' => 'how_we_work', 'command' => __('components.intro.how_we_work.command'), 'next' => null], ]; @@ -22,20 +21,17 @@ - {{ __('components.intro.window') }} – {{ config('company.legal_name') }} + {{ config('company.legal_name') }} - -
- @foreach(array_slice($sections, 1) as $section) - @@ -53,57 +49,39 @@ class="{{ $cap }} cursor-pointer transition hover:bg-white focus-ring">→
- @if($section['key'] === 'start') -
    - @foreach(array_slice($sections, 1) as $target) -
  • - +

    {{ __('components.intro.'.$section['key'].'.title') }}

    + + @foreach (\Illuminate\Support\Arr::wrap(__('components.intro.'.$section['key'].'.text')) as $paragraph) +

    ! $loop->first])>{!! $paragraph !!}

    + @endforeach + + @php($items = __('components.intro.'.$section['key'].'.items')) + @if (is_array($items)) +
      + @foreach ($items as $item) +
    • + + {!! $item !!}
      • @endforeach
    - @else -

    {{ __('components.intro.'.$section['key'].'.title') }}

    - - @foreach (\Illuminate\Support\Arr::wrap(__('components.intro.'.$section['key'].'.text')) as $paragraph) -

    ! $loop->first])>{!! $paragraph !!}

    - @endforeach - - @php($items = __('components.intro.'.$section['key'].'.items')) - @if (is_array($items)) -
      - @foreach ($items as $item) -
    • - - {!! $item !!} -
      • - @endforeach -
    - @endif @endif - @unless($section['key'] === 'start') -

    - @if($section['next'] !== null) - - @else - - - {{ __('components.intro.cta') }} - - @endif -

    - @endunless +

    + @if($section['next'] !== null) + + @else + + + {{ __('components.intro.cta') }} + + @endif +

@endforeach diff --git a/tests/Feature/Components/IntroTabsTest.php b/tests/Feature/Components/IntroTabsTest.php index 5fa7f56..60d1c5a 100644 --- a/tests/Feature/Components/IntroTabsTest.php +++ b/tests/Feature/Components/IntroTabsTest.php @@ -34,14 +34,14 @@ function introPanel(string $html, int $index): string : $panel->before('')->toString(); } -it('renders all four sections as panels at once', function () { +it('renders the three sections as panels at once', function () { $html = introMarkup(); - foreach (range(0, 3) as $index) { + foreach (range(0, 2) as $index) { expect($html)->toContain('data-panel="'.$index.'"'); } - expect($html)->not->toContain('data-panel="4"'); + expect($html)->not->toContain('data-panel="3"'); }); it('has a stylesheet rule for every tab it renders', function () { @@ -72,7 +72,7 @@ function introPanel(string $html, int $index): string }); it('keeps the four areas on one line each', function () { - $panel = introPanel(introMarkup(), 2); + $panel = introPanel(introMarkup(), 1); foreach (introItems() as $item) { expect($panel)->toContain(''.$item.''); @@ -82,34 +82,40 @@ function introPanel(string $html, int $index): string it('switches without javascript through radio inputs', function () { $html = introMarkup(); - foreach (range(0, 3) as $index) { + foreach (range(0, 2) as $index) { expect($html) ->toContain('id="intro-tab-'.$index.'"') - ->toContain('data-tab="'.$index.'"'); - } - - foreach (range(1, 3) as $index) { - expect($html)->toContain('for="intro-tab-'.$index.'"'); + ->toContain('data-tab="'.$index.'"') + ->toContain('for="intro-tab-'.$index.'"'); } expect($html)->toContain('name="intro-tab"'); }); -it('leaves the start panel out of the tab bar', function () { +it('puts every section into the tab bar, and nothing else', function () { $bar = Str::of(introMarkup())->after('')->before('intro-tabs__panels')->toString(); - expect($bar)->not->toContain('for="intro-tab-0"') - ->and(substr_count($bar, 'toBe(3); + expect(substr_count($bar, 'toBe(3) + ->and($bar)->toContain('for="intro-tab-0"'); }); -it('opens on the start tab', function () { +it('opens on the first section instead of an overview', function () { $html = introMarkup(); $first = Str::of($html)->after('id="intro-tab-0"')->before('/>')->toString(); $second = Str::of($html)->after('id="intro-tab-1"')->before('/>')->toString(); expect($first)->toContain('checked') - ->and($second)->not->toContain('checked'); + ->and($second)->not->toContain('checked') + ->and(introPanel($html, 0))->toContain(__('components.intro.who_we_are.text')); +}); + +it('no longer lists the sections as teasers anywhere', function () { + $window = Str::of(introMarkup())->after('before('')->toString(); + + foreach (['who_we_are', 'what_we_do', 'how_we_work'] as $key) { + expect($window)->not->toContain(__('components.intro.'.$key.'.teaser')); + } }); it('exposes one number key per tab', function () { @@ -135,32 +141,15 @@ function introPanel(string $html, int $index): string ->toContain('