fix filter select and update logs page

*add missing darkmode on page load
*add overflow-y and max-w
*enhance margin
*enhance logs card

CHANGELOG.md

@@ -11,18 +11,20 @@
 - [BUGFIX] Database update with external plugins reupload
 - [LINUX] Add logrotate support for the logs
 - [UI] New : add bans management page in the web UI
+- [UI] New : add blocked requests page in the web UI
 - [UI] New : some core plugins pages in the web UI
 - [UI] General : enhance the Content-Security-Policy header in the web UI
 - [UI] General : dark mode enhancement
 - [UI] General : add visual feedback when filtering is matching nothing
-- [UI] Add blocked requests page in the web UI
-- [UI] Global config / service page : remove tabs for select and enhance filtering (plugin name includes)
+- [UI] General : blog news working and add dynamic banner news
+- [UI] Global config page : Add the possibility to edit multisite settings as well
+- [UI] Global config / Service page : remove tabs for select and enhance filtering (plugin name includes)
 - [UI] Service page : add the possibility to clone a service in the web UI
 - [UI] Service page : add the possibility to set a service as draft in the web UI
 - [UI] Service page : add services filter when at least 4 services
 - [UI] Configs page : add path filtering related to config presence
-- [UI] Pro license : add home card, show pro plugis on menu and plugins page, resume in account page, alert in case issue with license usage
-- [UI] Global config page : Add the possibility to edit multisite settings as well
+- [UI] Pro license : add home card, show pro plugins on menu and plugins page, resume in account page, alert in case issue with license usage
+- [UI] Log page : enhance UX
 - [FEATURE] Add setting REDIS_SSL_VERIFY to activate/disable the SSL certificate verification when using Redis
 - [FEATURE] Add Redis Sentinel fallback to master automatically if no slaves are available
 - [FEATURE] Add Redis Sentinel support for bwcli

src/ui/templates/bans.html

@@ -132,12 +132,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-bans-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-bans-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/configs.html

@@ -97,12 +97,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-configs-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-configs-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/global_config.html

@@ -18,7 +18,7 @@
             "id": "keyword",
             "placeholder": "keyword",
             "pattern": "(.*?)"
-        },
+        }
     ] %}
     <div data-global-config-filter
          class="h-fit p-4 col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4 2xl:col-span-3 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
@@ -68,12 +68,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-global-config-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-global-config-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/jobs.html

@@ -113,12 +113,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-jobs-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-jobs-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/logs.html

@@ -11,7 +11,7 @@
                     Select instance
                 </h5>
                 <button data-logs-setting-select="instances"
-                        class="max-w-[300px] disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
+                        class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
                     <span id="logs-instance"
                           data-name="logs-instance"
                           data-logs-setting-select-text="instances">
@@ -37,12 +37,12 @@
                 <!-- end chevron -->
                 <!-- dropdown-->
                 <div data-logs-setting-select-dropdown="instances"
-                     class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                     class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                     {% for instance in instances %}
                         <button data-logs-setting-select-dropdown-btn="instances"
                                 value="{{ instance.name }}"
                                 data-_type="{{ instance._type }}"
-                                class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                             {{ instance.name }}
                         </button>
                     {% endfor %}
@@ -99,7 +99,7 @@
             <!-- end to date input -->
             <h5 class="col-span-12 mb-1 mt-2 text-[1.1rem] font-bold dark:text-white/90">Live options</h5>
             <!-- refresh inp -->
-            <div class="flex flex-col relative col-span-12 sm:col-span-6 3xl:col-span-3">
+            <div class="flex flex-col relative col-span-12 sm:col-span-6">
                 <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
                     Listen live
                 </h5>
@@ -136,7 +136,7 @@
                        required />
             </div>
             <!-- end refresh delay input -->
-            <div class="col-span-12 w-full justify-center flex mt-2">
+            <div class="col-span-12 w-full justify-center flex mt-4">
                 <button data-submit-date
                         id="submit-data"
                         class="tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
@@ -224,12 +224,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-logs-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-logs-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/plugins.html

@@ -130,12 +130,12 @@
                         <div id="filter-{{ filter['id'] }}"
                              role="listbox"
                              data-plugins-setting-select-dropdown="{{ filter['id'] }}"
-                             class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                             class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                             {% for value in filter['values'] %}
                                 <button role="option"
                                         data-plugins-setting-select-dropdown-btn="{{ filter['id'] }}"
                                         value="{{ value }}"
-                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                        class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                     {{ value }}
                                 </button>
                             {% endfor %}

src/ui/templates/reports.html

@@ -139,12 +139,12 @@
                             <div id="filter-{{ filter['id'] }}"
                                  role="listbox"
                                  data-reports-setting-select-dropdown="{{ filter['id'] }}"
-                                 class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                                 class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                                 {% for value in filter['values'] %}
                                     <button role="option"
                                             data-reports-setting-select-dropdown-btn="{{ filter['id'] }}"
                                             value="{{ value }}"
-                                            class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                            class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                         {{ value }}
                                     </button>
                                 {% endfor %}

src/ui/templates/services.html

@@ -131,12 +131,12 @@
                                 <div id="filter-{{ filter['id'] }}"
                                      role="listbox"
                                      data-services-setting-select-dropdown="{{ filter['id'] }}"
-                                     class="hidden z-100 absolute h-full flex-col w-full translate-y-16">
+                                     class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
                                     {% for value in filter['values'] %}
                                         <button role="option"
                                                 data-services-setting-select-dropdown-btn="{{ filter['id'] }}"
                                                 value="{{ value }}"
-                                                class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
+                                                class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white dark:bg-slate-700 {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
                                             {{ value }}
                                         </button>
                                     {% endfor %}

src/ui/templates/settings_tabs_select.html

@@ -21,7 +21,7 @@
         <div id="tab-dropdown"
              role="listbox"
              data-tab-select-dropdown
-             class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto h-90 max-h-[50vh]">
+             class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto max-h-[350px]">
             {% set first_el = "True" %}
             {% for plugin in plugins %}
                 {% if current_endpoint == "services" and plugin["settings"]