Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhance ui style

Browse source 
* add custom classes for detail list in card (in order to use it on external plugins easily)
* update all pages with list details in card
* update core-card class : remove gap and change by margin in order to avoid too much space with separator
This commit is contained in:
Jordan Blasenhauer 2024-03-23 18:40:34 +01:00
parent c09a6d2738
commit fa20b35f6c
9 changed files with 96 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

38
src/ui/styles.css
View file

@ -230,16 +230,44 @@
/*--------------- END HOME PAGE ----------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/*--------------- CARD------------------------*/
/*---------------------------------------------*/
.card-detail-container {
@apply grid grid-cols-1 gap-2 mt-4 mb-6 ml-1;
}
.card-detail-item {
@apply flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0;
}
.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;
}
.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;
}
/*---------------------------------------------*/
/*--------------- END CARD --------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/*--------------- CORE PLUGINS ----------------*/
/*---------------------------------------------*/
.core-layout {
@apply col-span-12 grid grid-cols-12 gap-4;
@apply col-span-12 grid grid-cols-12;
}
.core-card {
@apply h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
@apply ml-2 mr-2 mb-2 mt-2 h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}
.core-card-lg {
@apply ml-2 mr-2 mb-2 mt-2 h-fit transition hover:scale-102 col-span-12 md:col-span-6 p-4 relative min-w-0 break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}
.core-card-wrap {
@ -279,7 +307,7 @@
}
.core-card-status {
@apply col-span-12 md:col-span-6 2xl:col-span-3 3xl:col-span-2 w-fit h-fit transition hover:scale-102 p-4 relative min-w-0 break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
@apply ml-2 mr-2 mb-2 mt-2 col-span-12 md:col-span-6 2xl:col-span-3 3xl:col-span-2 w-fit h-fit transition hover:scale-102 p-4 relative min-w-0 break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}
.core-card-status-container {
@ -311,7 +339,7 @@
}
.core-card-list {
@apply h-fit content-start col-span-12 md:col-span-6 w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
@apply ml-2 mr-2 mb-2 mt-2 h-fit content-start md:col-span-6 overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}
.w-small.core-card-list {
@ -367,7 +395,7 @@
}
.core-card-metrics {
@apply h-fit 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 dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
@apply ml-2 mr-2 mb-2 mt-2 h-fit sm:max-h-28 hover:scale-102 transition col-span-12 md:col-span-6 2xl:col-span-4 flex p-4 justify-between break-words dark:brightness-110 bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border;
}
.core-card-metrics-name {

11
src/ui/templates/bans.html vendored
View file

@ -47,16 +47,21 @@
] %}
<div class="{% if bans|length == 0 %}hidden{% endif %} h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative 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">INFO</h5>
<div role="grid" class="card-detail-container">
{% for info in bans_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p class="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-200">
<p role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- filter -->

21
src/ui/templates/configs.html vendored
View file

@ -14,17 +14,22 @@
] %}
<div class="h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative 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">INFO</h5>
<div role="grid" class="card-detail-container">
{% for info in configs_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
{{ info['name'] }}
</p>
<p data-info-{{ info['id'] }} class="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-200">
{{ info['data'] }}
</p>
</div>
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p data-info-{{ info['id'] }} role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- filter -->
{% set filters = [

8
src/ui/templates/instances.html vendored
View file

@ -23,18 +23,18 @@
</div>
<!-- end state and title-->
<!-- detail list -->
<div role="grid" class="grid grid-cols-1 gap-2 mt-4 mb-6 ml-1">
<div role="grid" class="card-detail-container">
{% set instance_details = [{"name" : "TYPE", "value" : instance['_type']},{"name" : "HOSTNAME", "value" : instance['hostname']}] %}
<!-- detail -->
{% for detail in instance_details %}
<div role="row"
class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0">
class="card-detail-item">
<p role="gridcell"
class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500">
class="card-detail-item-title">
{{ detail['name'] }}
</p>
<p role="gridcell"
class="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">
class="card-detail-item-subtitle">
{{ detail['value'] }}
</p>
</div>

11
src/ui/templates/jobs.html vendored
View file

@ -13,16 +13,21 @@
] %}
<div class="h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative 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">INFO</h5>
<div role="grid" class="card-detail-container">
{% for info in jobs_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p class="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-200">
<p role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- filter -->

14
src/ui/templates/plugins.html vendored
View file

@ -11,16 +11,22 @@
] %}
<div class="h-fit p-4 col-span-12 md:col-span-5 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<h5 class="col-span-12 mb-4 font-bold dark:text-white/90">INFO</h5>
<div role="grid" class="card-detail-container">
{% for info in plugins_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p class="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-200">
<p role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- upload layout -->

13
src/ui/templates/reports.html vendored
View file

@ -40,16 +40,21 @@
] %}
<div class=" h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative 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">INFO</h5>
<div role="grid" class="card-detail-container">
{% for info in reports_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p class="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-200">
<p role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- filter -->

15
src/ui/templates/services.html vendored
View file

@ -46,16 +46,21 @@
] %}
<div class="h-fit col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative 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">INFO</h5>
{% for info in services_info %}
<div class="mx-1 flex items-center my-4">
<p class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 ">
<div role="grid" class="card-detail-container">
{% for info in services_info %}
<div role="row"
class="card-detail-item">
<p role="gridcell"
class="card-detail-item-title">
{{ info['name'] }}
</p>
<p class="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-200">
<p role="gridcell"
class="card-detail-item-subtitle">
{{ info['data'] }}
</p>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
<!-- end info -->
<!-- filter -->