Fix. Settings. Mobile layout. Custom save button block refactored.

css/src/spbc-settings.css

@@ -1094,6 +1094,7 @@ button#spbc_setting_get_key_auto:disabled {
 	flex-direction: row;
 	align-items: baseline;
 	flex-wrap: nowrap;
+	padding: 15px 0;
 }
 
 html {

inc/spbc-settings.php

@@ -218,7 +218,7 @@ function spbc_settings__register()
                 'class_prefix' => 'spbc',
                 'ajax'         => true,
                 'js_after'     => 'settings_tab--settings_general.min.js',
-                'after'        => 'submit_button',
+                'after'        => 'spbc_settings_draw_save_button_bottom_block',
                 'sections'     => array(
                     'section_top_banner' => array(
                         'type'   => 'section_banner',
@@ -1382,10 +1382,7 @@ function spbc_settings__tab_content_draw($elem_name, $elem)
     // Custom elements on tab
     if (isset($elem['after'])) {
         if (function_exists($elem['after'])) {
-            $name = is_string($elem['after']) ? 'custom_element__after__' . $elem['after'] : 'name_unset';
-            echo '<div name="' . $name . '" style="margin-left: 10px;">';
             call_user_func($elem['after']);
-            echo '</div>';
         } else {
             echo $elem['after'];
         }
@@ -6154,3 +6151,21 @@ function spbc_drop_to_defaults_on_key_clearance(\CleantalkSP\SpbctWP\State $spbc
 
     return $spbc;
 }
+
+/**
+ * Draws custom save button block with navigator backlink button with echo.
+ * @return void *echo
+ */
+function spbc_settings_draw_save_button_bottom_block()
+{
+    $template = '
+        <div name="spbc_settings--save_button_custom" class="spbc_settings--save_button_custom" style="display: none">
+            <input type="submit" class="button button-primary" style="margin: 0 10px;" value="%s">
+            <a href="#spbc-quicknav--bar_wrapper" class="button button-primary" style="margin: 0 10px;">%s</a>
+        </div>';
+    printf(
+        $template,
+        __('Save Changes', 'security-malware-firewall'),
+        __('Back to navigation', 'security-malware-firewall')
+    );
+}

js/src/spbc-settings.js

@@ -128,27 +128,21 @@ function spbcDrawSettingsCallback(result, data, params, obj) {
     }
 
     spbcSaveSettingsButtonMobileLayout();
+    window.addEventListener('resize', (event) => {
+        spbcSaveSettingsButtonMobileLayout();
+    });
 }
 
 /**
  * A chunk to hide the custom element "submit button" on large screen or make sticky on mobile
  */
 function spbcSaveSettingsButtonMobileLayout() {
-    const selector = document.querySelector('div[name="custom_element__after__submit_button"]');
+    const selector = document.querySelector('div[name="spbc_settings--save_button_custom"]');
     if (selector) {
         if (window.innerWidth > 900) {
-            selector.setAttribute('style', 'display: none');
+            selector.style.display = 'none';
         } else {
-            selector.className += ' spbc_settings--save_button_custom';
-            const backToNav = document.createElement('a');
-            backToNav.href = '#spbc-quicknav--bar_wrapper';
-            backToNav.style.margin = '5px';
-            const backToNavButton = document.createElement('input');
-            backToNavButton.className = 'button button-primary';
-            backToNavButton.value = 'Back to navigation';
-            backToNavButton.style.width = '145px';
-            backToNav.append(backToNavButton);
-            selector.append(backToNav);
+            selector.style.display = 'flex';
         }
     }
 }