enhance UI and fix /services

* delete custom variables to avoid error on POST /services
* hide draft mode on delete form
* higher delay to show popover to avoid update pos clip
* close modal on simple mode working
* update simple mode step elements grid

src/ui/main.py

@@ -901,6 +901,11 @@ def services():
         # Check variables
         variables = deepcopy(request.form.to_dict())
         del variables["csrf_token"]
+
+        # Delete custom client variables
+        del variables["SECURITY_LEVEL"]
+        del variables["mode"]
+
         is_draft = variables.pop("is_draft", "no") == "yes"
 
         if "OLD_SERVER_NAME" not in request.form and request.form["operation"] == "edit":

src/ui/static/js/services.js

@@ -524,7 +524,10 @@ class ServiceModal {
     //Update draft button
     const btn = this.modal.querySelector("button[data-toggle-draft-btn]");
 
-    if (!["ui", "default"].includes(method) && this.currAction !== "clone") {
+    if (
+      (!["ui", "default"].includes(method) && this.currAction !== "clone") ||
+      this.currAction === "delete"
+    ) {
       return btn.classList.add("hidden");
     }
 

src/ui/static/js/utils/settings.js

@@ -60,7 +60,7 @@ class Popover {
 
     setTimeout(() => {
       popover.classList.remove("opacity-0");
-    }, 100);
+    }, 150);
   }
 
   hidePopover(el) {

src/ui/templates/services_modal.html

@@ -4,7 +4,7 @@
      class="dark:brightness-110 hidden w-screen h-screen fixed bg-gray-600/50 z-[1001] top-0 left-0 justify-center items-center">
     <div data-services-modal-card
          class="overflow-y-auto mx-0 sm:mx-6 lg:mx-8 my-3 px-3 sm:px-4 pt-4 pb-8 w-full sm:min-w-[500px] max-w-[1000px] max-h-[95vh] md:max-h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
-        <div class="w-full flex justify-between items-start mb-2">
+        <div class="w-full flex justify-between items-start mb-1 sm:mb-2">
             <div class="flex flex-col sm:flex-row justify-start items-start sm:items-center">
                 <p data-services-modal-title
                    class="transition duration-300 ease-in-out dark:text-gray-100 mb-1 font-sans font-semibold leading-normal uppercase text-md">
@@ -32,7 +32,7 @@
                     </svg>
                 </button>
                 <button data-toggle-settings-mode-btn="advanced"
-                        class="transition hover:brightness-75 dark:hover:brightness-110 sm:ml-4 flex items-center border border-gray-700 dark:border-gray-300 rounded py-1 px-2">
+                        class="transition hover:brightness-75 dark:hover:brightness-110 sm:ml-4 flex items-center border border-gray-700 dark:border-gray-300 rounded py-1 px-2 mt-1.5 sm:mt-0">
                     <p data-toggle-settings-mode="simple"
                        class="hidden dark:text-gray-100 mb-0 mr-2  pointer-events-none">Simple</p>
                     <p data-toggle-settings-mode="advanced"

src/ui/templates/services_modal_settings_simple.html

@@ -66,7 +66,7 @@
     <!-- action button -->
     <div class="w-full flex-col items-center justify-center flex mt-10">
         <div class="flex justify-center">
-            <button data-services-simple-modal-close
+            <button data-services-modal-close
                     type="button"
                     class="dark:bg-slate-800 close-btn mb-4 mr-3 text-base">Close</button>
             <button data-simple-back

src/ui/templates/settings_simple.html

@@ -1,23 +1,22 @@
 {% set current_endpoint = current_endpoint or url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
 <!-- plugin item -->
-
+<div class="w-full grid grid-cols-12">
 {% for setting_simple in plugin_simple %}
     {% set setting_input = { "name" : setting_simple.get('setting_id'), "method" : setting_simple.get('setting').get("method", "default"), "help" : setting_simple.get('setting').get("help"), "label" : setting_simple.get('setting').get("label"), "id" : setting_simple.get('setting').get("id"), "type" : setting_simple.get('setting').get("type"), "default" : setting_simple.get('setting').get("default", "default"), "select" : setting_simple.get('setting').get("select"), "regex" : setting_simple.get('setting').get("regex"), "value" : setting_simple.get('setting').get("value"), "is_multiple" : True if setting_simple.get('setting').get("type") == "multiple" else False, "levels" : setting_simple.get('levels', {})  } %}
     <div data-simple id="{{ setting_simple['plugin_id'] }}-simple"
-         class="w-full px-1 mb-2">
+         class="w-full h-full px-1 mb-2 col-span-12 md:col-span-6 grid grid-cols-12 h-full items-end">
         <!-- title and desc -->
         <div class="col-span-12" data-setting-header>
             <div class="flex flex-col justify-start items-start">
-                <h5 class="ml-2 mr-1 mt-2 transition duration-300 ease-in-out font-bold text-base uppercase dark:text-white/90 mb-0">
+                <h5 class="sm:pl-3 sm:pr-2 mt-2 transition duration-300 ease-in-out font-bold text-base uppercase dark:text-white/90 mb-0">
                     {{ setting_simple['title'] }}
                 </h5>
-                <p class="ml-2 mr-1 text-sm dark:text-gray-300 mb-0">{{ setting_simple['subtitle'] }}</p>
+                <p class="max-w-[550px] sm:pl-3 sm:pr-2 text-sm dark:text-gray-300 mb-0">{{ setting_simple['subtitle'] }}</p>
             </div>
         </div>
         {% if not setting_input.get('is_multiple') %}
         <!-- end title and desc -->
-        <div class="w-full grid grid-cols-12">
-
+        <div class="w-full col-span-12">
             <div data-setting-container data--simple-{{ current_endpoint }}-type="{{ setting_input['type'] }}" data--simple-{{ current_endpoint }}-context="{{ setting_input['context'] }}" class="relative mx-0 sm:mx-2 md:mx-3 lg:mx-4 my-2 col-span-12 md:my-3 md:col-span-6  2xl:my-3 2xl:col-span-4" id="form-edit--simple-{{ current_endpoint }}-{{ setting_input["id"] }}">
                 {% include "setting_header.html" %}
                 {% include "setting_input.html" %}
@@ -75,3 +74,4 @@
         </div>
 {% endfor %}
 <!-- end plugin item -->
+</div>