Skip to content

Commit

Permalink
handle word-breaks and overflow on misc elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@syrk4web
syrk4web committed May 6, 2024
1 parent 206107f commit af69201
Show file tree
Hide file tree
Showing 15 changed files with 138 additions and 43 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
- [UI] Global config : fix script error while fragment relate to a missing plugin
- [UI] Global config / services page : filtering settings now open plugin select to highlight remaining plugin
- [UI] Global config / services page : add combobox on plugin select open to search a plugin quick
- [UI] Global config / services page : add combobox on plugin select open to search a plugin quick
- [UI] Global config / services page : add order for settings to always respect the order defined in the plugin
- [UI] Services page : show any invalid setting value on setting modal and disabled save if case
- [UI] Reporting page : fix missing data and add new ones
- [UI] Account page : keep license key form even if pro register to easy update
- [UI] Wizard : Add the possibility to still configure reverse proxy even if an admin user already exists
Expand Down
1 change: 0 additions & 1 deletion docs/settings.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -685,4 +685,3 @@ Allow access based on internal and external IP/network/rDNS/ASN whitelists.
|`WHITELIST_ASN_URLS` | |global |no |List of URLs, separated with spaces, containing ASN to whitelist. |
|`WHITELIST_USER_AGENT_URLS`| |global |no |List of URLs, separated with spaces, containing good User-Agent to whitelist. |
|`WHITELIST_URI_URLS` | |global |no |List of URLs, separated with spaces, containing bad URI to whitelist. |

2 changes: 1 addition & 1 deletion src/ui/static/css/dashboard.css
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion src/ui/static/js/services.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,10 @@ class ServiceModal {
const [action, serviceName, oldServName, isDraft, method] =
this.getActionData(target);
this.currAction = action;
this.modalTitle.textContent = `${action} ${serviceName}`;
// truncate serviceName if more than 15 characters
const servName =
serviceName.length > 15 ? `${serviceName.slice(0, 15)}...` : serviceName;
this.modalTitle.textContent = `${action} ${servName}`;

// show / hide components
this.hideForms();
Expand Down
102 changes: 95 additions & 7 deletions src/ui/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,11 @@
}

.settings-tabs-select-btn-text {
@apply transition duration-300 ease-in-out dark:text-gray-400 text-primary;
@apply transition break-all duration-300 ease-in-out dark:text-gray-400 text-primary;
}

.settings-tabs-select-btn-svg {
@apply ml-4 min-w-fit transition-transform h-4 w-4 fill-primary dark:fill-gray-300;
}

.active.settings-tabs-select-dropdown-btn {
Expand All @@ -171,7 +175,7 @@
}

.settings-tabs-select-dropdown-btn {
@apply flex justify-between border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200;
@apply break-all flex justify-between border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200;
}

/*---------------------------------------------*/
Expand All @@ -183,7 +187,7 @@
/*---------------------------------------------*/

.home-card {
@apply dark:brightness-110 sm:max-h-28 hover:scale-102 transition col-span-12 md:col-span-6 2xl:col-span-4 flex p-4 justify-between w-full shadow-md break-words bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
@apply break-all break-words dark:brightness-110 sm:max-h-28 hover:scale-102 transition col-span-12 md:col-span-6 2xl:col-span-4 flex p-4 justify-between w-full shadow-md break-words bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}

.home-card-name {
Expand Down Expand Up @@ -215,7 +219,7 @@
}

.home-card-svg-container {
@apply dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle;
@apply min-w-12 dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle;
}

.version.home-card-svg-container {
Expand Down Expand Up @@ -255,11 +259,11 @@
}

.card-detail-item-title {
@apply transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500;
@apply min-w-fit transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500;
}

.card-detail-item-subtitle {
@apply break-all transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-100;
@apply min-w-[2rem] break-all transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-100;
}

/*---------------------------------------------*/
Expand Down Expand Up @@ -387,7 +391,7 @@
}

.core-card-list-title {
@apply mb-4 mt-2 font-bold dark:text-white/90 mx-2;
@apply mb-4 font-bold dark:text-white/90;
}

.core-card-list-container {
Expand Down Expand Up @@ -585,3 +589,87 @@
.file-manager-actions-item-btn {
@apply rounded dark:text-gray-200 text-primary whitespace-nowrap md:block border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border m-1 relative pl-4 pr-5 pb-2.5 pt-3 font-bold text-center uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
}

/*----------------------------------------------*/
/*---------------PLUGINS PAGE-------------------*/
/*----------------------------------------------*/

.plugins-list-container {
@apply overflow-auto w-full col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}

.plugins-list-container-title-container {
@apply col-span-12;
}

.plugins-list-container-title {
@apply mx-2 font-bold dark:text-white/90 mx-2;
}

.plugins-list-items-container {
@apply min-h-[55vh] max-h-80 overflow-auto p-2 col-span-12 relative;
}

.plugins-list-items-wrap {
@apply grid grid-cols-12 gap-3;
}

.plugins-list-items {
@apply py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded;
}

.enabled.plugins-list-items {
@apply bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800;
}

.disabled.plugins-list-items {
@apply cursor-not-allowed bg-gray-300 dark:bg-gray-800;
}

.plugins-list-items-name {
@apply ml-3 mr-2 break-all break-words mb-0 transition duration-300 ease-in-out text-left text-sm md:text-base text-slate-700 dark:text-gray-200;
}

.disabled.plugins-list-items-name {
@apply opacity-80 dark:opacity-60;
}

.plugins-list-items-actions {
@apply flex items-center;
}

.plugins-list-items-delete {
@apply z-20 mx-2 inline-block font-bold text-left text-white uppercase align-middle transition-all cursor-pointer text-xs ease-in tracking-tight-rem hover:-translate-y-px;
}

.plugins-list-items-delete-svg {
@apply h-5 w-5 fill-red-500 dark:brightness-90;
}

.plugins-list-items-link {
@apply hover:-translate-y-px mx-1;
}

.plugins-list-items-link-svg {
@apply h-6 w-6 fill-sky-500 dark dark:brightness-90;
}

.plugins-list-items-pro {
@apply hover:-translate-y-px mx-1 -translate-y-0.5;
}

.plugins-list-items-pro-svg {
@apply h-6 w-6 dark:brightness-90;
}

/*----------------------------------------------*/
/*---------------END PLUGINS PAGE---------------*/
/*----------------------------------------------*/

/*----------------------------------------------*/
/*---------------SERVICES PAGE------------------*/
/*----------------------------------------------*/

/*----------------------------------------------*/
/*---------------END SERVICES PAGE--------------*/
/*----------------------------------------------*/
1 change: 1 addition & 0 deletions src/ui/templates/bans.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ <h5 class="font-bold dark:text-white/90 mx-2 text-white">No bans found</h5>
"values": terms
}
] %}
{% set is_filter_hidden = True if bans|length == 0 else False %}
{% include "card_filter.html" %}
{% include "filter_nomatch.html" %}

Expand Down
5 changes: 3 additions & 2 deletions src/ui/templates/card_filter.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% set grid_cols = 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5' if attribute_name == 'bans'
else 'md:col-span-8 lg:col-span-5 2xl:col-span-4 3xl:col-span-3' if attribute_name == 'configs'
else 'md:col-span-8 lg:col-span-6 3xl:col-span-4' if attribute_name == 'configs'
else 'col-span-12 md:col-span-6 3xl:col-span-4' if attribute_name == 'global-config'
else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-5' if attribute_name == 'jobs'
else 'col-span-12 md:col-span-6 2xl:col-span-4' if attribute_name == 'plugins'
Expand All @@ -8,8 +8,9 @@
else 'col-span-12 md:col-span-8 2xl:col-span-6 3xl:col-span-4'
%}


<div data-{{attribute_name}}-filter
class="h-fit {{grid_cols}} p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
class="{% if is_filter_hidden %} hidden {%endif%} h-fit {{grid_cols}} p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
<div class="mx-2 grid grid-cols-12 gap-4">
{% for filter in filters %}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
{% if card['link'].startswith('http') %}target="_blank"{% endif %}
rel="noopener">
<!-- text -->
<div>
<div class="mr-1">
<p class="home-card-name">{{ card['name'] }}</p>
<!-- version of user -->
<h5 class="home-card-title">{{ card['title'] }}</h5>
Expand Down
6 changes: 3 additions & 3 deletions src/ui/templates/jobs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">JOBS LIST</h5>
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5">
{% for data in jobs_data %}
{% if data['type'] == "text" %}
<p class="{{ data['custom_class'] }} dark:text-gray-400 text-sm m-0 my-1" data-{{attribute_name}}-{{ data['filter_name'] }}="{{ data['value'] }}">
<p class="{{ data['custom_class'] }} dark:text-gray-400 text-sm m-0 my-1 mr-2" data-{{attribute_name}}-{{ data['filter_name'] }}="{{ data['value'] }}">
{{ data['value'] }}
</p>
{% endif %}
Expand Down Expand Up @@ -168,15 +168,15 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">JOBS LIST</h5>
value="files"
class="{% if loop.index == loop.length %}rounded-b-lg {% endif %}{% if loop.first %}rounded-t-lg{% 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 bg-white dark:bg-slate-700 text-gray-700">
<span class="flex justify-start items-center">
<svg class="h-5.5 w-5.5 stroke-sky-500"
<svg class="min-w-fit h-5.5 w-5.5 stroke-sky-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="transition duration-300 ease-in-out text-gray-700 dark:text-gray-300 ml-2">{{ file['file_name'] }}</span>
<span class="overflow-hidden break-word transition duration-300 ease-in-out text-gray-700 dark:text-gray-300 ml-2">{{ file['file_name'] }}</span>
</span>
</button>
{% endfor %}
Expand Down
5 changes: 3 additions & 2 deletions src/ui/templates/logs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold
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"
class="overflow-hidden break-all"
data-{{attribute_name}}-setting-select-text="instances">
{% for instance in instances %}
{% if loop.first %}
Expand All @@ -30,7 +31,7 @@ <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold
</span>
<!-- chevron -->
<svg data-{{attribute_name}}-setting-select="instances"
class="transition-transform h-4 w-4 fill-gray-500"
class="min-w-fit ml-2 transition-transform h-4 w-4 fill-gray-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
Expand Down Expand Up @@ -179,7 +180,7 @@ <h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold
}
] %}
<div data-{{attribute_name}}-filter
class="h-fit col-span-12 md:col-span-6 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
class="h-fit col-span-12 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<h5 class="mb-2 font-bold dark:text-white/90">FILTERS</h5>
<div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
{% for filter in filters %}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/templates/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
</div>
<div class="mt-2 w-full px-1">
<h1 class="mb-0.5 tracking-normal text-primary text-center text-lg break-words whitespace-normal dark:text-gray-300">
{{ username }}
{{ username|truncate(10, True, '...')}}
</h1>
<a class="block underline mb-2 text-gray-600 dark:text-gray-400 text-sm text-center hover:brightness-90"
href="{% if current_endpoint == 'account' %}#{% else %}{{ url_for("account") }}{% endif %}">manage account
Expand Down
Loading

0 comments on commit af69201

Please sign in to comment.