From 5118640a9cdac4cd9da613df9fffb7610b384792 Mon Sep 17 00:00:00 2001 From: Paulo Castellano Date: Fri, 17 Jul 2026 18:38:20 -0300 Subject: [PATCH] feat(automations): mobile-safe builder with desktop notice The node builder is gated to lg+ (its fixed side panels no longer overflow a phone); below lg it shows a 'works best on a larger screen' notice. Automation tabs scroll instead of cutting off. --- lang/ar/automations.php | 1 + lang/de/automations.php | 1 + lang/el/automations.php | 1 + lang/en/automations.php | 1 + lang/es/automations.php | 1 + lang/fr/automations.php | 1 + lang/it/automations.php | 1 + lang/ja/automations.php | 1 + lang/ko/automations.php | 1 + lang/nl/automations.php | 1 + lang/pl/automations.php | 1 + lang/pt-BR/automations.php | 1 + lang/ru/automations.php | 1 + lang/tr/automations.php | 1 + lang/zh/automations.php | 1 + .../automations/AutomationTabsNav.vue | 4 +-- resources/js/pages/automations/Form.vue | 14 ++++++-- tests/Browser/MobileAutomationsTest.php | 34 +++++++++++++++++++ 18 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 tests/Browser/MobileAutomationsTest.php diff --git a/lang/ar/automations.php b/lang/ar/automations.php index 205938bb..229fedbc 100644 --- a/lang/ar/automations.php +++ b/lang/ar/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'يعمل محرر الأتمتة بشكل أفضل على شاشة أكبر. افتحه على جهاز كمبيوتر مكتبي لإنشاء سير عملك.', 'title' => 'الأتمتة', 'default_name' => 'أتمتة جديدة', diff --git a/lang/de/automations.php b/lang/de/automations.php index 221ee5e9..69c5ca54 100644 --- a/lang/de/automations.php +++ b/lang/de/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'Der Automatisierungs-Editor funktioniert am besten auf einem größeren Bildschirm. Öffne ihn auf einem Desktop, um deinen Workflow zu erstellen.', 'title' => 'Automatisierungen', 'default_name' => 'Neue Automatisierung', diff --git a/lang/el/automations.php b/lang/el/automations.php index 1fb558f1..d40fffbc 100644 --- a/lang/el/automations.php +++ b/lang/el/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'Ο επεξεργαστής αυτοματισμών λειτουργεί καλύτερα σε μεγαλύτερη οθόνη. Άνοιξέ τον σε υπολογιστή για να δημιουργήσεις τη ροή εργασίας σου.', 'title' => 'Αυτοματισμοί', 'default_name' => 'Νέος αυτοματισμός', diff --git a/lang/en/automations.php b/lang/en/automations.php index 195fabdc..ecc6b353 100644 --- a/lang/en/automations.php +++ b/lang/en/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'The automation editor works best on a larger screen. Open it on a desktop to build your workflow.', 'title' => 'Automations', 'default_name' => 'New automation', diff --git a/lang/es/automations.php b/lang/es/automations.php index 9313bf82..33df6255 100644 --- a/lang/es/automations.php +++ b/lang/es/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'El editor de automatizaciones funciona mejor en una pantalla más grande. Ábrelo en un ordenador para crear tu flujo de trabajo.', 'title' => 'Automatizaciones', 'default_name' => 'Nueva automatización', diff --git a/lang/fr/automations.php b/lang/fr/automations.php index a036d4af..835282c8 100644 --- a/lang/fr/automations.php +++ b/lang/fr/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'L\'éditeur d\'automatisation fonctionne mieux sur un grand écran. Ouvrez-le sur un ordinateur pour créer votre workflow.', 'title' => 'Automatisations', 'default_name' => 'Nouvelle automatisation', diff --git a/lang/it/automations.php b/lang/it/automations.php index 9ec57a28..37490287 100644 --- a/lang/it/automations.php +++ b/lang/it/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'L\'editor delle automazioni funziona meglio su uno schermo più grande. Aprilo su un desktop per creare il tuo flusso di lavoro.', 'title' => 'Automazioni', 'default_name' => 'Nuova automazione', diff --git a/lang/ja/automations.php b/lang/ja/automations.php index d356c2a3..96f67641 100644 --- a/lang/ja/automations.php +++ b/lang/ja/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'オートメーションエディタは大きな画面での利用に最適です。ワークフローを作成するにはデスクトップで開いてください。', 'title' => 'オートメーション', 'default_name' => '新しいオートメーション', diff --git a/lang/ko/automations.php b/lang/ko/automations.php index ba1e31fa..88af31f9 100644 --- a/lang/ko/automations.php +++ b/lang/ko/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => '자동화 편집기는 큰 화면에서 가장 잘 작동합니다. 워크플로를 만들려면 데스크톱에서 열어주세요.', 'title' => '자동화', 'default_name' => '새 자동화', diff --git a/lang/nl/automations.php b/lang/nl/automations.php index 91c42751..8a0c082a 100644 --- a/lang/nl/automations.php +++ b/lang/nl/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'De automatiserings-editor werkt het best op een groter scherm. Open het op een desktop om je workflow te bouwen.', 'title' => 'Automatiseringen', 'default_name' => 'Nieuwe automatisering', diff --git a/lang/pl/automations.php b/lang/pl/automations.php index dfb8e694..d40b87c8 100644 --- a/lang/pl/automations.php +++ b/lang/pl/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'Edytor automatyzacji działa najlepiej na większym ekranie. Otwórz go na komputerze, aby zbudować swój workflow.', 'title' => 'Automatyzacje', 'default_name' => 'Nowa automatyzacja', diff --git a/lang/pt-BR/automations.php b/lang/pt-BR/automations.php index 1b971194..7b4bdfcf 100644 --- a/lang/pt-BR/automations.php +++ b/lang/pt-BR/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'O editor de automações funciona melhor em uma tela maior. Abra no desktop para montar seu fluxo de trabalho.', 'title' => 'Automações', 'default_name' => 'Nova automação', diff --git a/lang/ru/automations.php b/lang/ru/automations.php index ab8a628b..2c059b83 100644 --- a/lang/ru/automations.php +++ b/lang/ru/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'Редактор автоматизаций лучше всего работает на большом экране. Откройте его на компьютере, чтобы создать рабочий процесс.', 'title' => 'Автоматизации', 'default_name' => 'Новая автоматизация', diff --git a/lang/tr/automations.php b/lang/tr/automations.php index c541572c..a033f4f9 100644 --- a/lang/tr/automations.php +++ b/lang/tr/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => 'Otomasyon düzenleyicisi daha büyük bir ekranda en iyi şekilde çalışır. İş akışınızı oluşturmak için masaüstünde açın.', 'title' => 'Otomasyonlar', 'default_name' => 'Yeni otomasyon', diff --git a/lang/zh/automations.php b/lang/zh/automations.php index f02d6d01..b1643e2d 100644 --- a/lang/zh/automations.php +++ b/lang/zh/automations.php @@ -3,6 +3,7 @@ declare(strict_types=1); return [ + 'mobile_notice' => '自动化编辑器在更大的屏幕上体验最佳。请在电脑上打开以搭建你的工作流。', 'title' => '自动化', 'default_name' => '新建自动化', diff --git a/resources/js/components/automations/AutomationTabsNav.vue b/resources/js/components/automations/AutomationTabsNav.vue index 095a0bde..85b5886f 100644 --- a/resources/js/components/automations/AutomationTabsNav.vue +++ b/resources/js/components/automations/AutomationTabsNav.vue @@ -18,13 +18,13 @@ const tabs = computed(() => [ -
+ + +
+
+ +
+

{{ $t('automations.mobile_notice') }}

+
diff --git a/tests/Browser/MobileAutomationsTest.php b/tests/Browser/MobileAutomationsTest.php new file mode 100644 index 00000000..b286be88 --- /dev/null +++ b/tests/Browser/MobileAutomationsTest.php @@ -0,0 +1,34 @@ +create(); + $workspace = Workspace::factory()->create(['user_id' => $user->id]); + $workspace->members()->attach($user->id, ['role' => Role::Member->value]); + $user->update(['current_workspace_id' => $workspace->id]); + + $automation = Automation::factory()->create(['workspace_id' => $workspace->id]); + + $this->actingAs($user); + + $page = visit(route('app.automations.workflow', $automation))->resize(375, 812); + + $page->script(<<<'JS' + (async () => { + const sel = '[data-testid="automation-mobile-notice"]'; + for (let i = 0; i < 100; i++) { + const el = document.querySelector(sel); + if (el && el.getBoundingClientRect().height > 0) return; + await new Promise((r) => setTimeout(r, 50)); + } + })(); + JS); + + $page->assertVisible('@automation-mobile-notice'); +});