Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-04-21 13:37:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: Enhance plugin settings UI for better readability and responsiveness

Browse source
This commit is contained in:
TheophileDiot 2026-02-26 15:20:00 +01:00
parent 2cc81dfe6d
commit c83db277bf
No known key found for this signature in database
GPG key ID: 7C44E4D7742628F8
2 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/ui/app/static/css/overrides.css
View file

@ -1954,6 +1954,24 @@ span.cursor-pointer ~ .reset-setting {
opacity: 1;
}
/* Keep plugin headers stable when descriptions are long */
.plugin-settings-header-content {
min-width: 0;
}
.plugin-settings-description {
max-width: 100%;
margin-bottom: 0;
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
.plugin-settings-actions {
width: 100%;
}
}
/* Fade effect for plugin tab panes */
.plugin-tab-pane {
opacity: 0;

12
src/ui/app/templates/models/plugins_settings.html
View file

@ -188,8 +188,8 @@
role="tabpanel"
aria-labelledby="plugin-nav-{{ plugin }}"
data-type="{{ plugin_data['type'] }}">
<div class="card-header d-flex justify-content-between align-items-center mw-100">
<div class="pt-1 flex-grow-1 me-2 min-w-0">
<div class="card-header d-flex justify-content-between align-items-start align-items-md-center mw-100 plugin-settings-header gap-2">
<div class="pt-1 flex-grow-1 me-md-2 plugin-settings-header-content">
<h5 class="card-title d-flex align-items-center don-jose{{ plugin_types[plugin_data['type']].get('text-class', '') }}{{ plugin_types[plugin_data['type']].get('title-class', '') }}">
{{ plugin_data["name"] }}&nbsp;－&nbsp;v{{ plugin_data["version"] }}&nbsp;－&nbsp;{{ plugin_types[plugin_data["type"]].get('icon', '<img src="' + pro_diamond_url + '"
alt="Pro plugin"
@ -197,9 +197,9 @@
height="15.5px"
loading="lazy">') |safe }}
</h5>
<p class="card-subtitle text-muted text-truncate mt-1 courier-prime">{{ plugin_data["description"] }}</p>
<p class="card-subtitle text-muted mt-1 courier-prime plugin-settings-description">{{ plugin_data["description"] }}</p>
</div>
<div class="d-flex flex-grow-0 flex-shrink-0 justify-content-end align-items-center">
<div class="d-flex flex-wrap flex-grow-0 flex-shrink-0 justify-content-start justify-content-md-end align-items-center gap-2 plugin-settings-actions">
<a href="{{ docs_url('/advanced', '#protect-udptcp-applications') }}"
class="btn btn-sm btn-outline-{% if plugin_data['stream'] == 'yes' %}bw-green{% elif plugin_data['stream'] == 'partial' %}warning{% else %}danger{% endif %} rounded-pill docs-link"
target="_blank"
@ -219,7 +219,7 @@
{% set plugin_fragment = "" %}
{% endif %}
<a href="{{ docs_url(plugin_endpoint, plugin_fragment) }}"
class="btn btn-sm btn-primary rounded-pill ms-2 docs-link"
class="btn btn-sm btn-primary rounded-pill docs-link"
data-endpoint="{{ plugin_endpoint }}"
data-fragment="{{ plugin_fragment }}"
target="_blank"
@ -229,7 +229,7 @@
{% if plugin_data["page"] %}
{% set plugin_blueprint = "#" if plugin_data["type"] == "core" else url_for(plugin) %}
<a href="{% if plugin_blueprint == '#' %}{{ url_for("plugins") }}/{{ plugin }}{% else %}{{ plugin_blueprint }}{% endif %}"
class="btn btn-sm btn-primary rounded-pill ms-2">
class="btn btn-sm btn-primary rounded-pill">
<i class="bx bxs-file-html"></i><span class="d-none d-md-inline">&nbsp;<span data-i18n="button.plugin_page">Plugin page</span></span>
</a>
{% endif %}