diff --git a/src/dashboard.py b/src/dashboard.py index 0f6f6ac..55362a6 100644 --- a/src/dashboard.py +++ b/src/dashboard.py @@ -55,6 +55,7 @@ app.config['TEMPLATES_AUTO_RELOAD'] = True QRcode(app) # TODO: use class and object oriented programming +updateInfo = {} def connect_db(): @@ -693,6 +694,7 @@ def auth_req(): conf = get_dashboard_conf() req = conf.get("Server", "auth_req") session['update'] = UPDATE + session['updateInfo'] = updateInfo session['dashboard_version'] = DASHBOARD_VERSION if req == "true": if '/static/' not in request.path and \ @@ -1940,11 +1942,13 @@ def check_update(): for i in output: if not i["prerelease"]: release.append(i) + global updateInfo + updateInfo = i + break if config.get("Server", "version") == release[0]["tag_name"]: result = "false" else: result = "true" - return result except urllib.error.HTTPError: return "false" diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css index 7bb61b5..00a79b1 100644 --- a/src/static/css/dashboard.css +++ b/src/static/css/dashboard.css @@ -50,7 +50,7 @@ body { } } -.sidebar .nav-link { +.sidebar .nav-link, .bottomNavContainer .nav-link{ font-weight: 500; color: #333; transition: 0.2s cubic-bezier(0.82, -0.07, 0, 1.01); @@ -66,7 +66,7 @@ body { color: #999; } -.sidebar .nav-link.active { +.sidebar .nav-link.active, .bottomNavContainer .nav-link.active { color: #007bff; } @@ -632,6 +632,7 @@ pre.index-alert { transition: 0.3s ease-in-out; } + #config_body.firstLoading { opacity: 0.2; } @@ -829,3 +830,88 @@ pre.index-alert { max-width: 95vw; } } + +.bottom{ + display: none; +} + + +@media (max-width: 768px){ + .bottom{ + display: block; + } + + .btn-manage-group{ + bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px)); + } + + main{ + padding-bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px)); + } +} + + +.bottomNavContainer{ + display: flex; + color: #333; + padding-bottom: env(safe-area-inset-bottom, 5px); + box-shadow: inset 0 1px 0 rgb(0 0 0 / 10%); +} + +.bottomNavButton{ + width: 25vw; + display: flex; + flex-direction: column; + align-items: center; + margin: 0.7rem 0; + color: rgba(51, 51, 51, 0.5); + cursor: pointer; + transition: all ease-in 0.2s; +} + +.bottomNavButton.active{ + color: #333; +} + +.bottomNavButton i{ + font-size: 1.2rem; +} + +.bottomNavButton .subNav{ + width: 100vw; + position: absolute; + z-index: 10000; + bottom: 0; + left: 0; + background-color: #272b30; + display: none; + animation-duration: 400ms; + padding-bottom: env(safe-area-inset-bottom, 5px); +} + +.bottomNavButton .subNav.active{ + display: block; +} + + +.bottomNavButton .subNav .nav .nav-item .nav-link{ + padding: 0.7rem 1rem; +} + +.bottomNavWrapper{ + height: 100%; + width: 100%; + background-color: #000000a1; + position: fixed; + z-index: 1030; + display: none; + left: 0; +} + +.bottomNavWrapper.active{ + display: block; +} + +.sb-update-url .dot-running{ + transform: translateX(10px); +} \ No newline at end of file diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js index a377068..c10e04e 100644 --- a/src/static/js/configuration.js +++ b/src/static/js/configuration.js @@ -8,6 +8,7 @@ let peers = []; /** * Definitions */ + $(".bottomNavConfigs").addClass("active") let configuration_name; let configuration_interval; let configuration_timeout = window.localStorage.getItem("configurationTimeout"); diff --git a/src/static/js/index.js b/src/static/js/index.js index 72b690a..84ac7f1 100644 --- a/src/static/js/index.js +++ b/src/static/js/index.js @@ -4,6 +4,8 @@ $('[data-toggle="tooltip"]').tooltip() let $add_configuration = $("#add_configuration"); let addConfigurationModal = $("#addConfigurationModal"); +$(".bottomNavHome").addClass("active"); + addConfigurationModal.modal({ keyboard: false, diff --git a/src/static/js/pwa.js b/src/static/js/pwa.js new file mode 100644 index 0000000..d486de1 --- /dev/null +++ b/src/static/js/pwa.js @@ -0,0 +1,38 @@ +let wrapper = $(".bottomNavWrapper"); +$(".bottomNavConfigs").on("click", function(){ + let subNav = $(this).children(".subNav"); + subNav.removeClass("animate__fadeOutDown").addClass("active animate__fadeInUp"); + wrapper.fadeIn(); +}); + +$(".bottomNavHome").on("click", function(){ + window.location.replace('/') +}); + +$(".bottomNavSettings").on("click", function(){ + window.location.replace('/settings') +}) + + +function hideBottomSubNav(){ + $(".bottomNavButton .subNav").removeClass("animate__fadeInUp").addClass("animate__fadeOutDown"); + wrapper.fadeOut(); + setTimeout(function(){ + $(".bottomNavButton .subNav").removeClass("active"); + },350) +} + +wrapper.on("click", function(){ + hideBottomSubNav(); +}); + + +$(".bottomNavMore").on("click", function(){ + let subNav = $(this).children(".subNav"); + subNav.removeClass("animate__fadeOutDown").addClass("active animate__fadeInUp"); + wrapper.fadeIn(); +}); + +// $(".bottomNavButton .nav-conf-link").on("click", function(){ +// hideBottomSubNav(); +// }) \ No newline at end of file diff --git a/src/templates/configuration.html b/src/templates/configuration.html index 5015e8a..9def19a 100644 --- a/src/templates/configuration.html +++ b/src/templates/configuration.html @@ -185,374 +185,7 @@ - - - - - - - - + {% include "modal.html" %}
{% include "tools.html" %} diff --git a/src/templates/footer.html b/src/templates/footer.html index 9c4c4e6..f03d947 100644 --- a/src/templates/footer.html +++ b/src/templates/footer.html @@ -1,3 +1,4 @@ + \ No newline at end of file diff --git a/src/templates/header.html b/src/templates/header.html index 12fed9a..4dd70d1 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -16,4 +16,5 @@ + \ No newline at end of file diff --git a/src/templates/index.html b/src/templates/index.html index 783c996..95329a0 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -27,9 +27,7 @@ {% if conf == [] %}

You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".

{% endif %} - - - {% for i in conf%} + {% for i in conf %}
@@ -56,7 +54,6 @@
-
{%endfor%} diff --git a/src/templates/modal.html b/src/templates/modal.html new file mode 100644 index 0000000..0acbab0 --- /dev/null +++ b/src/templates/modal.html @@ -0,0 +1,357 @@ + + + + + + + + \ No newline at end of file diff --git a/src/templates/navbar.html b/src/templates/navbar.html index 1915ad6..261dd19 100644 --- a/src/templates/navbar.html +++ b/src/templates/navbar.html @@ -1,10 +1,11 @@
-
-
\ No newline at end of file +
+ + diff --git a/src/templates/settings.html b/src/templates/settings.html index 1f6c267..c7e2ebc 100644 --- a/src/templates/settings.html +++ b/src/templates/settings.html @@ -197,8 +197,9 @@ countdown--; }, 1000) $.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize()) - }); + $(".bottomNavSettings").addClass("active"); + \ No newline at end of file diff --git a/src/templates/sidebar.html b/src/templates/sidebar.html index 0967abb..bc4e632 100644 --- a/src/templates/sidebar.html +++ b/src/templates/sidebar.html @@ -1,3 +1,76 @@ +
+
+ +
+ + +