enhance ui

*fix height for safari
*add long label support for file manager folders, plugin list, instance title
*enhance service detail on safari
This commit is contained in:
Jordan Blasenhauer 2023-12-18 17:46:18 +01:00
parent b41bd619cc
commit 504aeb9d0e
6 changed files with 23 additions and 23 deletions

File diff suppressed because one or more lines are too long

View file

@ -31,7 +31,7 @@
<!-- info -->
<main
class="absolute xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-6 min-h-[80vh] flex flex-col justify-between"
class="absolute xl:pl-75 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-6 min-h-[80vh] h-full flex flex-col justify-between"
>
<div
class="max-w-[1920px] grid gap-y-4 gap-3 sm:gap-4 lg:gap-6 grid-cols-12 w-full"

View file

@ -141,11 +141,11 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
class="hidden"
></span>
{% endif %}
<div class="pointer-events-none">
<div class="w-full items-center grid grid-cols-12 pointer-events-none">
<!-- service root-->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth == 1 %}
<svg
class=" absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
class="col-span-2 h-[2.5rem] w-[2.5rem] fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -163,23 +163,23 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<!-- services folder -->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class=" absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg> {% endif %}
<svg class="col-span-2 h-[2.5rem] w-[2.5rem] fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg> {% endif %}
<!-- end services folder-->
<!-- services files -->
{% if child['type'] == "file" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class=" absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
<svg class="col-span-2 h-[2.5rem] w-[2.5rem] fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
{% endif %}
<!-- end services files-->
<!-- cache folder-->
{% if child['type'] == "folder" and current_endpoint == "cache" and loop.depth == 1 %}
<svg class=" absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<svg class="col-span-2 h-[2.5rem] w-[2.5rem] fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
{% endif %}
<!-- end cache folder -->
<!-- cache file -->
{% if child['type'] == "file" and current_endpoint == "cache" %}
<svg class=" absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
<svg class="col-span-2 h-[2.5rem] w-[2.5rem] fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 13.5H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
</svg>
@ -188,7 +188,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<span
data-{{current_endpoint}}-element-text
class="pointer-events-none transition duration-300 ease-in-out dark:opacity-90 text-center ml-12 mr-7 mb-0 text-sm md:text-base text-slate-700 dark:text-gray-300"
class="col-span-10 pointer-events-none transition duration-300 ease-in-out dark:opacity-90 text-center mr-12 mb-0 text-sm xl:text-base text-slate-700 dark:text-gray-300"
>
{{child['name']}}
</span>

View file

@ -16,14 +16,14 @@ instances_batched %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden" name="INSTANCE_ID" value="{{ instance._id }}" />
<!-- state and title-->
<div class="flex items-center">
<div class="grid grid-cols-12">
{% if instance.health %}
<div class="h-4 w-4 rounded-full bg-green-500"></div>
<div class="col-span-1 mt-2 h-4 w-4 rounded-full bg-green-500"></div>
{% endif %} {% if not instance.health %}
<div class="h-4 w-4 rounded-full bg-red-500"></div>
<div class="col-span-1 mt-2 h-4 w-4 rounded-full bg-red-500"></div>
{% endif %}
<h5
class="ml-3 mb-1 font-bold dark:text-white/90 transition duration-300 ease-in-out"
class="col-span-11 break-words font-bold dark:text-white/90 transition duration-300 ease-in-out"
>
{{ instance.name }}
</h5>

View file

@ -216,7 +216,7 @@ include "plugins_modal.html" %}
>
<p
data-{{current_endpoint}}-content
class="ml-3 mr-2 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
class="ml-3 mr-2 break-words mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
>
{{plugin['name']}}
</p>
@ -262,7 +262,7 @@ include "plugins_modal.html" %}
>
<p
data-{{current_endpoint}}-content
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
class="ml-3 mr-2 break-words mb-0 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
>
{{plugin['name']}}
</p>

View file

@ -45,7 +45,7 @@
class="w-full grid grid-cols-12 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
>
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -80,7 +80,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -114,7 +114,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -148,7 +148,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -182,7 +182,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -216,7 +216,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -250,7 +250,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
>
@ -284,7 +284,7 @@
</div>
<!-- end detail -->
<!-- detail -->
<div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
<div class="flex items-center col-span-12 sm:col-span-6">
<p
class="font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500"
>