From 7fe9bc41c8aca89997cf5a89196d69a9d31ac837 Mon Sep 17 00:00:00 2001 From: Diatrex Date: Tue, 22 Jun 2021 10:44:19 +0300 Subject: [PATCH] #4145 offline design when you have no connection --- .../base-theme/resources/css/offline.scss | 37 +++++++++++++++++++ .../base-theme/resources/images/unplugged.svg | 2 + .../resources/js/theme/initialize.js | 25 ++++++++++--- .../base-theme/resources/lang/en/field.php | 6 +++ .../resources/views/layouts/booking.twig | 2 + .../resources/views/layouts/default.twig | 2 + .../resources/views/layouts/error.twig | 3 ++ .../resources/views/layouts/no-container.twig | 2 + .../resources/views/layouts/page.twig | 2 + .../resources/views/partials/metadata.twig | 1 + .../resources/views/partials/offline.twig | 18 +++++++++ 11 files changed, 95 insertions(+), 5 deletions(-) create mode 100644 addons/default/visiosoft/base-theme/resources/css/offline.scss create mode 100644 addons/default/visiosoft/base-theme/resources/images/unplugged.svg create mode 100644 addons/default/visiosoft/base-theme/resources/views/partials/offline.twig diff --git a/addons/default/visiosoft/base-theme/resources/css/offline.scss b/addons/default/visiosoft/base-theme/resources/css/offline.scss new file mode 100644 index 000000000..03b25a263 --- /dev/null +++ b/addons/default/visiosoft/base-theme/resources/css/offline.scss @@ -0,0 +1,37 @@ +#offline { + display: none; + + & > div { + min-height: 100vh; + + svg { + height: 12rem; + width: auto; + } + + h1 { + font-weight: 400; + font-size: 1.5rem; + } + + p { + color: #7B7B90; + } + + button { + background-color: #ebeeff; + color: #007eff; + padding: .75rem 1.75rem; + font-weight: 700; + border-radius: 7px; + + &:focus { + outline: 5px auto #007eff; + } + + .spinner-border { + display: none; + } + } + } +} \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/images/unplugged.svg b/addons/default/visiosoft/base-theme/resources/images/unplugged.svg new file mode 100644 index 000000000..4152a2b22 --- /dev/null +++ b/addons/default/visiosoft/base-theme/resources/images/unplugged.svg @@ -0,0 +1,2 @@ + + diff --git a/addons/default/visiosoft/base-theme/resources/js/theme/initialize.js b/addons/default/visiosoft/base-theme/resources/js/theme/initialize.js index a52c5dc3e..89c727b4d 100644 --- a/addons/default/visiosoft/base-theme/resources/js/theme/initialize.js +++ b/addons/default/visiosoft/base-theme/resources/js/theme/initialize.js @@ -1,5 +1,20 @@ -// (function (window, document) { -// -// // Go! -// -// })(window, document); +(function (window, document) { + /* Offline */ + window.addEventListener('offline', () => { + $('body > *').hide(); + $('#offline').show(); + }); + + $('#offline button').click(function () { + $('.spinner-border', this).css('display', 'inline-block') + + setTimeout(() => { + if (window.navigator.onLine) { + window.location.reload(); + } else { + $('.spinner-border', this).hide() + } + }, 250) + }) + /* End Offline */ +})(window, document); diff --git a/addons/default/visiosoft/base-theme/resources/lang/en/field.php b/addons/default/visiosoft/base-theme/resources/lang/en/field.php index 4c0d09949..1dbcef01d 100644 --- a/addons/default/visiosoft/base-theme/resources/lang/en/field.php +++ b/addons/default/visiosoft/base-theme/resources/lang/en/field.php @@ -56,4 +56,10 @@ return [ 'list' => 'List', 'instruction_description' => 'Instruction Description', 'instruction_list' => 'Instruction List', + + // Offline + 'connection_problem' => 'Connection problem', + 'your_internet_connection_is_broken' => 'Your internet connection is broken,', + 'we_miss_you_so_much_already' => 'we miss you so much already!', + 'try_again' => 'Try again', ]; \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/views/layouts/booking.twig b/addons/default/visiosoft/base-theme/resources/views/layouts/booking.twig index 04b3fefe9..e7973bae5 100644 --- a/addons/default/visiosoft/base-theme/resources/views/layouts/booking.twig +++ b/addons/default/visiosoft/base-theme/resources/views/layouts/booking.twig @@ -14,5 +14,7 @@ {% endblock %} +{% include "visiosoft.theme.base::partials/offline" %} + diff --git a/addons/default/visiosoft/base-theme/resources/views/layouts/default.twig b/addons/default/visiosoft/base-theme/resources/views/layouts/default.twig index 76d07b450..a06220c3a 100644 --- a/addons/default/visiosoft/base-theme/resources/views/layouts/default.twig +++ b/addons/default/visiosoft/base-theme/resources/views/layouts/default.twig @@ -35,6 +35,8 @@ +{% include "visiosoft.theme.base::partials/offline" %} + {% include "visiosoft.theme.base::partials/footer" %} {% include "visiosoft.theme.base::partials/assets" %} {% include "visiosoft.theme.base::partials/settings" %} diff --git a/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig b/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig index 4a34650d5..9f42adf74 100644 --- a/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig +++ b/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig @@ -18,6 +18,9 @@ {% block content %}{% endblock %} + +{% include "visiosoft.theme.base::partials/offline" %} + \ No newline at end of file diff --git a/addons/default/visiosoft/base-theme/resources/views/layouts/no-container.twig b/addons/default/visiosoft/base-theme/resources/views/layouts/no-container.twig index 20fe9b629..d3b9896bd 100644 --- a/addons/default/visiosoft/base-theme/resources/views/layouts/no-container.twig +++ b/addons/default/visiosoft/base-theme/resources/views/layouts/no-container.twig @@ -34,6 +34,8 @@ +{% include "visiosoft.theme.base::partials/offline" %} + {% include "visiosoft.theme.base::partials/footer" %} {% include "visiosoft.theme.base::partials/assets" %} {% include "visiosoft.theme.base::partials/settings" %} diff --git a/addons/default/visiosoft/base-theme/resources/views/layouts/page.twig b/addons/default/visiosoft/base-theme/resources/views/layouts/page.twig index e4cb45c72..5bfeaa861 100644 --- a/addons/default/visiosoft/base-theme/resources/views/layouts/page.twig +++ b/addons/default/visiosoft/base-theme/resources/views/layouts/page.twig @@ -30,6 +30,8 @@ +{% include "visiosoft.theme.base::partials/offline" %} + {% include "visiosoft.theme.base::partials/footer" %} {% include "visiosoft.theme.base::partials/settings" %} diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig b/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig index 3bc627f64..2ad8eb479 100644 --- a/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig +++ b/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig @@ -19,6 +19,7 @@ {{ asset_add("theme.css", "visiosoft.theme.base::css/select2.css") }} {{ asset_add("theme.css", "visiosoft.theme.base::css/font-awesome.min.css") }} {{ asset_add("theme.css", "visiosoft.theme.base::css/intlTelInput.css") }} +{{ asset_style("visiosoft.theme.base::css/offline.scss") }} {{ asset_script('visiosoft.theme.base::js/visiosoft.js') }} diff --git a/addons/default/visiosoft/base-theme/resources/views/partials/offline.twig b/addons/default/visiosoft/base-theme/resources/views/partials/offline.twig new file mode 100644 index 000000000..e770a409e --- /dev/null +++ b/addons/default/visiosoft/base-theme/resources/views/partials/offline.twig @@ -0,0 +1,18 @@ +
+
+ {{ img('visiosoft.theme.base::images/unplugged.svg').data|raw }} + +

{{ trans('visiosoft.theme.base::field.connection_problem') }}

+ +

+ {{ trans('visiosoft.theme.base::field.your_internet_connection_is_broken') }} +
+ {{ trans('visiosoft.theme.base::field.we_miss_you_so_much_already') }} +

+ + +
+