hotstovejer/openclassify
0
0
Fork 0
mirror of https://github.com/openclassify/openclassify.git synced 2026-01-11 18:01:10 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

#4145 offline design when you have no connection

Browse Source
This commit is contained in:
Diatrex 2021-06-22 10:44:19 +03:00
parent 7cd6f5523b
commit 7fe9bc41c8
11 changed files with 95 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
addons/default/visiosoft/base-theme/resources/css/offline.scss Normal file
View File

@ -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;
}
}
}
}

2
addons/default/visiosoft/base-theme/resources/images/unplugged.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 511.5 511.5" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g xmlns="http://www.w3.org/2000/svg"><path d="m319.25 208h-47v72h-33v-72h-47v72h-24v71.5c0 34.043 19.544 63.605 48 78.063v41.437h16v40.5h15v-40.5h17v40.5h15v-40.5h16v-41.437c28.456-14.457 48-44.019 48-78.063v-71.5h-24zm-32 15h17v57h-17zm-80 0h17v57h-17zm73 233h-49v-20.496c7.778 2.272 15.998 3.496 24.5 3.496s16.722-1.224 24.5-3.496zm-24.5-32c-39.977 0-72.5-32.523-72.5-72.5v-24.5h145v24.5c0 39.977-32.523 72.5-72.5 72.5zm72.5-112h-145v-17h145z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m339.983 0h-168.466l-2.188 3.625c-11.014 18.247-17.079 42.353-17.079 67.875s6.065 49.628 17.079 67.875l2.188 3.625h28.233v-15h-19.644c-17.258-32.117-17.258-80.883 0-113h151.287c17.258 32.117 17.258 80.883 0 113h-19.643v15h28.233l2.188-3.625c11.014-18.248 17.079-42.353 17.079-67.875s-6.065-49.628-17.079-67.875z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m236.75 202.106 19-19 19 19 28.606-28.606-19-19 19-19-24.5-24.5h40.394v-79h-47v77.394l-16.5 16.5-16.5-16.5v-77.394h-47v79h40.394l-24.5 24.5 19 19-19 19zm50.5-155.106h17v49h-17zm-63 49h-17v-49h17zm5.106 39.5 7.394-7.394 19 19 19-19 7.394 7.394-19 19 19 19-7.394 7.394-19-19-19 19-7.394-7.394 19-19z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m415.75 72c-12.958 0-23.5 10.542-23.5 23.5s10.542 23.5 23.5 23.5 23.5-10.542 23.5-23.5-10.542-23.5-23.5-23.5zm0 32c-4.687 0-8.5-3.813-8.5-8.5s3.813-8.5 8.5-8.5 8.5 3.813 8.5 8.5-3.813 8.5-8.5 8.5z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m95.75 184c-12.958 0-23.5 10.542-23.5 23.5s10.542 23.5 23.5 23.5 23.5-10.542 23.5-23.5-10.542-23.5-23.5-23.5zm0 32c-4.687 0-8.5-3.813-8.5-8.5s3.813-8.5 8.5-8.5 8.5 3.813 8.5 8.5-3.813 8.5-8.5 8.5z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m215.75 360h16v15h-16z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m247.75 360h16v15h-16z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m279.75 360h16v15h-16z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m391.25 231.5h-15v16.5h-16.5v15h16.5v16.5h15v-16.5h16.5v-15h-16.5z" fill="#dddddd" data-original="#000000" style="" class=""/><path d="m119.25 39.5h-15v16.5h-16.5v15h16.5v16.5h15v-16.5h16.5v-15h-16.5z" fill="#dddddd" data-original="#000000" style="" class=""/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

25
addons/default/visiosoft/base-theme/resources/js/theme/initialize.js
View File

@ -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);

6
addons/default/visiosoft/base-theme/resources/lang/en/field.php
View File

@ -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',
];

2
addons/default/visiosoft/base-theme/resources/views/layouts/booking.twig
View File

@ -14,5 +14,7 @@
{% endblock %}
</div>
{% include "visiosoft.theme.base::partials/offline" %}
</body>
</html>

2
addons/default/visiosoft/base-theme/resources/views/layouts/default.twig
View File

@ -35,6 +35,8 @@
</div>
</main>
{% include "visiosoft.theme.base::partials/offline" %}
{% include "visiosoft.theme.base::partials/footer" %}
{% include "visiosoft.theme.base::partials/assets" %}
{% include "visiosoft.theme.base::partials/settings" %}

3
addons/default/visiosoft/base-theme/resources/views/layouts/error.twig
View File

@ -18,6 +18,9 @@
<body>
{% block content %}{% endblock %}
{% include "visiosoft.theme.base::partials/offline" %}
</body>
</html>

2
addons/default/visiosoft/base-theme/resources/views/layouts/no-container.twig
View File

@ -34,6 +34,8 @@
</div>
{% include "visiosoft.theme.base::partials/offline" %}
{% include "visiosoft.theme.base::partials/footer" %}
{% include "visiosoft.theme.base::partials/assets" %}
{% include "visiosoft.theme.base::partials/settings" %}

2
addons/default/visiosoft/base-theme/resources/views/layouts/page.twig
View File

@ -30,6 +30,8 @@
</div>
</main>
{% include "visiosoft.theme.base::partials/offline" %}
{% include "visiosoft.theme.base::partials/footer" %}
{% include "visiosoft.theme.base::partials/settings" %}

1
addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig
View File

@ -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") }}
<script src="{{ asset_path('visiosoft.theme.base::js/vendor/jquery.min.js') }}"></script>
{{ asset_script('visiosoft.theme.base::js/visiosoft.js') }}

18
addons/default/visiosoft/base-theme/resources/views/partials/offline.twig Normal file
View File

@ -0,0 +1,18 @@
<section id="offline">
<div class="d-flex align-items-center justify-content-center flex-column text-center">
{{ img('visiosoft.theme.base::images/unplugged.svg').data|raw }}
<h1 class="my-4">{{ trans('visiosoft.theme.base::field.connection_problem') }}</h1>
<p class="mb-5">
{{ trans('visiosoft.theme.base::field.your_internet_connection_is_broken') }}
<br>
{{ trans('visiosoft.theme.base::field.we_miss_you_so_much_already') }}
</p>
<button class="border-0">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
{{ trans('visiosoft.theme.base::field.try_again') }}
</button>
</div>
</section>