Merge branch 'dev' into bugfix/backups

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 ## --- [4.2.0] - 2023/TBD
 ### New features
-- Finish and Activate Arcadia notification backend ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/621) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/626))
+- Finish and Activate Arcadia notification backend ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/621) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/626) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/632))
 ### Bug fixes
 - PWA: Removed the custom offline page in favour of browser default ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/607))
 - Fix hidden servers appearing visible on public mobile status page ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/612))
@@ -21,6 +21,7 @@
 - Add get_users command to Crafty's console ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/620))
 - Make files hover cursor pointer ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/627))
 - Use `Jar` class naming for jar refresh to make room for steamCMD naming in the future ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/630))
+- Improve ui visibility of Build Wizard selection tabs ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/633))
 ### Lang
 TBD
 <br><br>

app/frontend/static/assets/css/dark/style.css

@@ -22979,27 +22979,42 @@ ul li {
   padding-left: 0;
 }
 
-.tab-simple-styled {
+.nav-tabs.tab-simple-styled {
   border-bottom: none;
   margin-top: 30px;
   margin-bottom: 30px;
 }
 
-.tab-simple-styled .nav-item {
+.nav-tabs.tab-simple-styled .nav-item {
   margin-right: 30px;
 }
 
-.tab-simple-styled .nav-item .nav-link {
+.nav-tabs.tab-simple-styled .nav-item .nav-link {
   border: none;
   padding: 0;
   color: var(--base-text);
 }
 
-.tab-simple-styled .nav-item .nav-link.active {
+.nav-tabs.tab-simple-styled .nav-item .nav-link.active {
   background: var(--dropdown-bg);
   color: var(--info);
 }
 
+.nav-pills.tab-simple-styled {
+  border-bottom: none;
+  /*margin-top: 1.5rem;*/
+  margin-bottom: 1.5rem;
+}
+
+/*.nav-pills.tab-simple-styled .nav-item {
+  margin-right: 1.5rem;
+}*/
+
+.nav-pills.tab-simple-styled .nav-item .nav-link.active {
+  background: var(--info);
+  color: #ffffff;
+}
+
 .tab-tile-style {
   display: -webkit-box;
   display: -ms-flexbox;

app/frontend/static/assets/css/shared/style.css

@@ -21494,27 +21494,42 @@ ul li {
   padding-left: 0;
 }
 
-.tab-simple-styled {
+.nav-tabs.tab-simple-styled {
   border-bottom: none;
   margin-top: 30px;
   margin-bottom: 30px;
 }
 
-.tab-simple-styled .nav-item {
+.nav-tabs.tab-simple-styled .nav-item {
   margin-right: 30px;
 }
 
-.tab-simple-styled .nav-item .nav-link {
+.nav-tabs.tab-simple-styled .nav-item .nav-link {
   border: none;
   padding: 0;
   color: var(--gray);
 }
 
-.tab-simple-styled .nav-item .nav-link.active {
+.nav-tabs.tab-simple-styled .nav-item .nav-link.active {
   background: #fff;
   color: var(--info);
 }
 
+.nav-pills.tab-simple-styled {
+  border-bottom: none;
+  /*margin-top: 1.5rem;*/
+  margin-bottom: 1.5rem;
+}
+
+/*.nav-pills.tab-simple-styled .nav-item {
+  margin-right: 1.5rem;
+}*/
+
+.nav-pills.tab-simple-styled .nav-item .nav-link.active {
+  background: var(--info);
+  color: #ffffff;
+}
+
 .tab-tile-style {
   display: -webkit-box;
   display: -ms-flexbox;

app/frontend/templates/notify.html

@@ -1,7 +1,6 @@
 <ul class="navbar-nav ml-auto">
-  <li class="nav-item dropdown">
+  <li class="nav-item dropdown notif-li">
-    <a class="nav-link count-indicator dropdown-toggle" id="notifDropdown" href="#" data-toggle="dropdown"
+    <a class="nav-link count-indicator dropdown-toggle" id="notifDropdown" href="#" aria-expanded="false">
-      aria-expanded="false">
       <i class="fas fa-broadcast-tower
         {% if data.get('update_available') %}
             text-danger
@@ -21,12 +20,10 @@
 
   <li class="nav-item dropdown user-dropdown">
     <a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
-      <img class="img-xs rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}"
+      <img class="img-xs rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image"> </a>
-        alt="Profile image"> </a>
     <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
       <div class="dropdown-header text-center">
-        <img class="img-md rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}"
+        <img class="img-md rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image">
-          alt="Profile image">
         <p class="mb-1 mt-3 font-weight-semibold">{{ data['user_data']['username'] }}</p>
         <p class="font-weight-light text-muted mb-0">Roles: </p>
         {% for r in data['user_role'] %}
@@ -38,23 +35,19 @@
         <p class="font-weight-light text-muted mb-0">Email: {{ data['user_data']['email'] }}</p>
       </div>
       {% if data['user_data']['preparing'] %}
-      <span class="dropdown-item" id="support_progress"><i
+      <span class="dropdown-item" id="support_progress"><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
-          class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
         data['lang']) }}<br><br></span>
       <span class="dropdown-item" id="support_progress">
         <div class="support_progress" style="height: 15px; width: 100%;">
-          <div class="progress-bar progress-bar-striped progress-bar-animated" id="logs_progress_bar" role="progressbar"
+          <div class="progress-bar progress-bar-striped progress-bar-animated" id="logs_progress_bar" role="progressbar" style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
-            style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
         </div>
       </span>
       {% else %}
-      <a class="dropdown-item" id="support_logs"><i
+      <a class="dropdown-item" id="support_logs"><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
-          class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
         data['lang']) }}</i></a>
       {% end %}
       {% if data['superuser'] %}
-      <a class="dropdown-item" href="/panel/activity_logs"><i
+      <a class="dropdown-item" href="/panel/activity_logs"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary"></i>{{ translate('notify',
-          class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary"></i>{{ translate('notify',
         'activityLog', data['lang']) }}</a>
       {% end %}
       <a class="dropdown-item" href="/logout"><i class="dropdown-item-icon mdi mdi-power text-primary"></i>{{
@@ -79,16 +72,19 @@
   .clear-button:hover {
     cursor: pointer;
   }
-/* Hide scrollbar for Chrome, Safari and Opera */
-.notif-div::-webkit-scrollbar {
-  display: none;
-}
 
-/* Hide scrollbar for IE, Edge and Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
-.notif-div {
+  .notif-div::-webkit-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
+    display: none;
-  scrollbar-width: none;  /* Firefox */
+  }
-}
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .notif-div {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
 </style>
 <script>
   function pfpError(image) {
@@ -104,14 +100,17 @@
     }
     if (data.length > 0) {
       localStorage.setItem("notif-count", data.length);
+      $("#notif-count").show()
       $("#notif-count").html(data.length);
       $("#announcements").html(text);
     } else {
       $("#announcements").html(`<p style='margin-top: 15px;' class='text-center'><i class="fa fa-bell-slash" aria-hidden="true"></i>
 </p>`);
+      $("#notif-count").hide()
     }
     $(".clear-button").on("click", function (event) {
       console.log("CLEAR BUTTON")
+      event.stopPropagation();
       let uuid = event.target.getAttribute("data-id");
       $(`#${uuid}`).remove();
       send_clear(uuid);
@@ -162,6 +161,28 @@
       bootbox.alert(responseData.error)
     }
   }
+
+  /* Open / Close with Button */
+  $('li.dropdown.notif-li a').on('click', function (event) {
+    $(this).parent().toggleClass("show");
+    $('div.notif-div').toggleClass("show");
+    if ($('li.dropdown.notif-li a').attr('aria-expanded') === 'false') {
+      $('li.dropdown.notif-li a').attr('aria-expanded', "true");
+    }
+    else {
+      $('li.dropdown.notif-li a').attr('aria-expanded', "false");
+    }
+  });
+
+  /* Close when clicking ouside */
+  $('body').on('click', function (e) {
+    if (!$('li.dropdown.notif-li').is(e.target) && $('li.dropdown.notif-li').has(e.target).length === 0 && $('show').has(e.target).length === 0) {
+      $('li.notif-li').removeClass("show");
+      $('li.dropdown.notif-li a').attr('aria-expanded', "false");
+      $('div.notif-div').removeClass("show");
+    }
+  });
+
   $(document).ready(function () {
     getAnnouncements();
   })

app/frontend/templates/server/bedrock_wizard.html

@@ -5,7 +5,7 @@
 {% block content %}
 
 <div class="content-wrapper">
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
+  <ul class="nav nav-pills tab-simple-styled " role="tablist">
     <li class="nav-item term-nav-item">
       <a class="nav-link" href="/server/step1" role="tab" aria-selected="false">
         <i class="fas fa-file-signature"></i>Minecraft-Java</a>

app/frontend/templates/server/wizard.html

@@ -5,7 +5,7 @@
 {% block content %}
 
 <div class="content-wrapper">
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
+  <ul class="nav nav-pills tab-simple-styled">
     <li class="nav-item term-nav-item">
       <a class="nav-link active" href="/server/step1" role="tab" aria-selected="false">
         <i class="fas fa-file-signature"></i>Minecraft-Java</a>