From f7eb1b790ce8f3be309333500bd08bc182e2aace Mon Sep 17 00:00:00 2001
From: diashalabi <diahshalabi@hotmail.com>
Date: Tue, 19 Oct 2021 14:22:59 +0300
Subject: [PATCH] #4710 404 page design is broken

---
 .../base-theme/resources/css/offline.scss     | 12 ++++++++--
 .../base-theme/resources/js/offline.js        |  4 ++--
 .../resources/views/errors/403.twig           | 23 ++++++++++---------
 .../resources/views/errors/404.twig           | 23 ++++++++++---------
 .../resources/views/layouts/error.twig        |  3 ++-
 .../resources/views/partials/metadata.twig    |  4 ++--
 6 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/addons/default/visiosoft/base-theme/resources/css/offline.scss b/addons/default/visiosoft/base-theme/resources/css/offline.scss
index 03b25a263..25c5691c5 100644
--- a/addons/default/visiosoft/base-theme/resources/css/offline.scss
+++ b/addons/default/visiosoft/base-theme/resources/css/offline.scss
@@ -1,3 +1,11 @@
+.offline-hide {
+  display: none !important;
+}
+
+.offline-show {
+  display: block !important;
+}
+
 #offline {
   display: none;
 
@@ -17,7 +25,7 @@
     p {
       color: #7B7B90;
     }
-    
+
     button {
       background-color: #ebeeff;
       color: #007eff;
@@ -34,4 +42,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/addons/default/visiosoft/base-theme/resources/js/offline.js b/addons/default/visiosoft/base-theme/resources/js/offline.js
index 753736a8d..572ed9d68 100644
--- a/addons/default/visiosoft/base-theme/resources/js/offline.js
+++ b/addons/default/visiosoft/base-theme/resources/js/offline.js
@@ -1,7 +1,7 @@
 /* Offline */
 window.addEventListener('offline', () => {
-    $('body > *').hide();
-    $('#offline').show();
+    $('body > *').addClass('offline-hide');
+    $('#offline').addClass('offline-show');
 });
 
 $('#offline button').click(function () {
diff --git a/addons/default/visiosoft/base-theme/resources/views/errors/403.twig b/addons/default/visiosoft/base-theme/resources/views/errors/403.twig
index dd2f4283e..805e573a1 100644
--- a/addons/default/visiosoft/base-theme/resources/views/errors/403.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/errors/403.twig
@@ -6,17 +6,18 @@
 
 {% block content %}
     <div class="container h-100 align-items-center d-flex">
-    <div class="col-12 bg-white shadow p-5 rounded text-center">
-        <img src="{{ img('visiosoft.theme.base::images/errors/403.png').url }}" class="w-100 error-image" alt="403">
+        <div class="col-12 bg-white shadow p-5 rounded text-center">
+            <img src="{{ img('visiosoft.theme.base::images/errors/403.png').url }}" class="w-100 error-image" alt="403">
 
-        <h3 class="h3 mb-3 font-weight-bold">{{ trans('visiosoft.theme.base::errors.403_title') }}</h3>
-        <h5 class="h5 mb-3 font-weight-bold color-error-message">{{ trans('visiosoft.theme.base::errors.403_message') }}</h5>
-        <div class="py-4">
-            <a class="error-btn-home rounded px-3 py-2" href="{{ url('/') }}"> {{ trans('visiosoft.theme.base::errors.home_page') }}</a>
+            <h3 class="h3 mb-3 font-weight-bold">{{ trans('visiosoft.theme.base::errors.403_title') }}</h3>
+            <h5 class="h5 mb-3 font-weight-bold color-error-message">{{ trans('visiosoft.theme.base::errors.403_message') }}</h5>
+            <div class="py-4">
+                <a class="error-btn-home rounded px-3 py-2" href="{{ url('/') }}"> {{ trans('visiosoft.theme.base::errors.home_page') }}</a>
+            </div>
+            {% if auth_check() %}
+                <a class="text-white bg-dark border rounded px-3 py-2" href="{{ url('/') }}">{{ trans('visiosoft.theme.base::field.logout.name') }}</a>
+            {% endif %}
+            <span class="small font-weight-bold mt-3 d-block text-muted">{{ setting_value('streams::domain', 'openclassify.com') }}</span>
         </div>
-        {% if auth_check() %}
-            <a class="text-white bg-dark border rounded px-3 py-2" href="{{ url('/') }}">{{ trans('visiosoft.theme.base::field.logout.name') }}</a>
-        {% endif %}
-        <span class="small font-weight-bold mt-3 d-block text-muted">{{ setting_value('streams::domain', 'openclassify.com') }}</span>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/addons/default/visiosoft/base-theme/resources/views/errors/404.twig b/addons/default/visiosoft/base-theme/resources/views/errors/404.twig
index 6cd5a85d2..05fed2727 100644
--- a/addons/default/visiosoft/base-theme/resources/views/errors/404.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/errors/404.twig
@@ -6,17 +6,18 @@
 
 {% block content %}
     <div class="container h-100 align-items-center d-flex">
-    <div class="col-12 bg-white shadow p-5 rounded text-center">
-        <img src="{{ img('visiosoft.theme.base::images/errors/404.png').url }}" class="w-100 error-image" alt="404">
+        <div class="col-12 bg-white shadow p-5 rounded text-center">
+            <img src="{{ img('visiosoft.theme.base::images/errors/404.png').url }}" class="w-100 error-image" alt="404">
 
-        <h3 class="h3 mb-3 font-weight-bold">{{ trans('visiosoft.theme.base::errors.404_title') }}</h3>
-        <h5 class="h5 mb-3 font-weight-bold color-error-message">{{ trans('visiosoft.theme.base::errors.404_message') }}</h5>
-        <div class="py-4">
-            <a class="error-btn-home rounded px-3 py-2" href="{{ url('/') }}"> {{ trans('visiosoft.theme.base::errors.home_page') }}</a>
+            <h3 class="h3 mb-3 font-weight-bold">{{ trans('visiosoft.theme.base::errors.404_title') }}</h3>
+            <h5 class="h5 mb-3 font-weight-bold color-error-message">{{ trans('visiosoft.theme.base::errors.404_message') }}</h5>
+            <div class="py-4">
+                <a class="error-btn-home rounded px-3 py-2" href="{{ url('/') }}"> {{ trans('visiosoft.theme.base::errors.home_page') }}</a>
+            </div>
+            {% if auth_check() %}
+                <a class="text-white bg-dark border rounded px-3 py-2" href="{{ url('/') }}">{{ trans('visiosoft.theme.base::field.logout.name') }}</a>
+            {% endif %}
+            <span class="small font-weight-bold mt-3 d-block text-muted">{{ setting_value('streams::domain', 'openclassify.com') }}</span>
         </div>
-        {% if auth_check() %}
-            <a class="text-white bg-dark border rounded px-3 py-2" href="{{ url('/') }}">{{ trans('visiosoft.theme.base::field.logout.name') }}</a>
-        {% endif %}
-        <span class="small font-weight-bold mt-3 d-block text-muted">{{ setting_value('streams::domain', 'openclassify.com') }}</span>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
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 9f42adf74..cb4ea1cb8 100644
--- a/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/layouts/error.twig
@@ -20,7 +20,8 @@
 {% block content %}{% endblock %}
 
 {% include "visiosoft.theme.base::partials/offline" %}
+{% include "visiosoft.theme.base::partials/assets" %}
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
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 9be755125..9ecd18bae 100644
--- a/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
+++ b/addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
@@ -19,8 +19,6 @@
 {{ 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_add("theme.css", "visiosoft.theme.base::css/offline.scss") }}
-
 <script src="{{ asset_path('visiosoft.theme.base::js/vendor/jquery.min.js') }}"></script>
 {{ asset_script('visiosoft.theme.base::js/visiosoft.js') }}
 
@@ -33,6 +31,8 @@
     {% for style in asset_inlines("custom-theme.css", ["min"]) %}
     {{ style|raw }}
     {% endfor %}
+
+    {{ asset_inline("visiosoft.theme.base::css/offline.scss") }}
 </style>
 
 {# Important!! #}