Skip to content

Commit 5fcd310

Browse files
RobiNN1RobiNN1
committed
CSS fixes
1 parent 71f33ac commit 5fcd310

File tree

5 files changed

+58
-42
lines changed

5 files changed

+58
-42
lines changed

‎assets/css/styles.css‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -192,11 +192,8 @@
192192
.col-span-2 {
193193
grid-column: span 2 / span 2;
194194
}
195-
.col-span-8 {
196-
grid-column: span 8 / span 8;
197-
}
198-
.col-span-10 {
199-
grid-column: span 10 / span 10;
195+
.col-span-4 {
196+
grid-column: span 4 / span 4;
200197
}
201198
.m-1 {
202199
margin: calc(0.25rem * 1);
@@ -845,9 +842,14 @@
845842
background-color: oklch(80.8% 0.114 19.571);
846843
}
847844
}
848-
.md\:col-span-5 {
849-
@media (width >= 48rem) {
850-
grid-column: span 5 / span 5;
845+
.sm\:col-span-3 {
846+
@media (width >= 40rem) {
847+
grid-column: span 3 / span 3;
848+
}
849+
}
850+
.sm\:col-span-7 {
851+
@media (width >= 40rem) {
852+
grid-column: span 7 / span 7;
851853
}
852854
}
853855
.md\:me-4 {
@@ -915,6 +917,16 @@
915917
gap: calc(0.25rem * 4);
916918
}
917919
}
920+
.lg\:col-span-2 {
921+
@media (width >= 64rem) {
922+
grid-column: span 2 / span 2;
923+
}
924+
}
925+
.lg\:col-span-8 {
926+
@media (width >= 64rem) {
927+
grid-column: span 8 / span 8;
928+
}
929+
}
918930
.lg\:flex {
919931
@media (width >= 64rem) {
920932
display: flex;

‎templates/components/button.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{% set btn_color = 'bg-primary-500 hover:bg-primary-600 focus:ring-primary-200 disabled:bg-primary-300 dark:bg-primary-700 dark:hover:bg-primary-800 dark:focus:ring-primary-400 dark:disabled:bg-primary-400' %}
77
{% endif %}
88

9-
{% set classes = 'text-sm inline-flex items-center gap-1 border border-transparent rounded-sm py-1.5 px-3 font-semibold text-white align-middle shadow-sm focus:ring-3 dark:text-white ' ~ btn_color %}
9+
{% set classes = 'text-sm inline-flex items-center gap-1 border border-transparent rounded-sm py-1.5 px-3 font-semibold text-white align-middle whitespace-nowrap shadow-sm focus:ring-3 dark:text-white ' ~ btn_color %}
1010

1111
{% if link %}
1212
<a href="{{ link }}" class="{{ classes ~ class|space }}">{{ icon ? svg(icon, 12) : '' }}{{ text }}</a>

‎templates/dashboards/memcached/metrics.twig‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,26 @@
99
},
1010
}) }}
1111

12-
<div class="md:grid md:grid-cols-10 gap-4">
13-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-10">
12+
<div class="md:grid md:grid-cols-4 gap-4">
13+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-4">
1414
<div id="hit_rate_chart" class="h-90"></div>
1515
</div>
16-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
16+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
1717
<div id="memory_chart" class="h-90"></div>
1818
</div>
19-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
19+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
2020
<div id="items_chart" class="h-90"></div>
2121
</div>
22-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
22+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
2323
<div id="request_rate_chart" class="h-90"></div>
2424
</div>
25-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
25+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
2626
<div id="request_dist_chart" class="h-90"></div>
2727
</div>
28-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
28+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
2929
<div id="connections_chart" class="h-90"></div>
3030
</div>
31-
<div class="p-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 md:col-span-5">
31+
<div class="p-4 mb-2 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 col-span-2">
3232
<div id="traffic_chart" class="h-90"></div>
3333
</div>
3434
</div>

‎templates/layout.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
</script>
3434
</head>
3535
<body class="bg-gray-100 text-gray-900 dark:text-gray-200 dark:bg-gray-900" data-dashboard="{{ current }}">
36-
<header class="grid md:grid-cols-3 p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
36+
<header class="md:grid md:grid-cols-3 p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
3737
<div class="flex">
3838
<a class="block w-72 md:me-4" href="/">{{ svg('logo', null) }}</a>
3939
<div class="w-72">{{ servers|raw }}</div>
@@ -74,9 +74,9 @@
7474

7575
{% if side %}
7676
<div class="md:grid md:grid-cols-10 gap-4">
77-
<div class="col-span-2">{{ side|raw }}</div>
77+
<div class="sm:col-span-3 lg:col-span-2">{{ side|raw }}</div>
7878

79-
<div class="col-span-8">{{ dashboard|raw }}</div>
79+
<div class="sm:col-span-7 lg:col-span-8">{{ dashboard|raw }}</div>
8080
</div>
8181
{% else %}
8282
{{ dashboard|raw }}

‎templates/partials/keys_list.twig‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
<div class="mb-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
2-
<div class="px-6 py-4 md:flex justify-between">
3-
<div class="flex gap-3">
2+
<div class="px-6 py-4 md:flex flex-wrap gap-3 justify-between">
3+
<div class="flex gap-3 flex-wrap">
44
{% if treeview %}
5-
<div class="flex border rounded-sm overflow-hidden border-gray-300 dark:border-gray-600 [&>.active]:text-gray-600 dark:[&>.active]:text-gray-300 [&>.active]:bg-gray-200 dark:[&>.active]:bg-gray-950">
6-
<a href="{{ link([], {'view': 'table'}) }}" title="Table view" class="{{ get('view', config('list-view', 'table')) == 'table' ? 'active ' : '' }}flex items-center justify-center px-3 py-2 text-gray-400 dark:text-gray-500">
7-
{{ svg('tableview', 18) }}
8-
</a>
9-
<a href="{{ link([], {'view': 'tree'}) }}" title="Tree view" class="{{ get('view', config('list-view', 'table')) == 'tree' ? 'active ' : '' }}flex items-center justify-center px-3 py-2 text-gray-400 dark:text-gray-500 border-l border-gray-300 dark:border-gray-600">
10-
{{ svg('treeview', 18) }}
11-
</a>
5+
<div>
6+
<div class="flex border rounded-sm overflow-hidden border-gray-300 dark:border-gray-600 [&>.active]:text-gray-600 dark:[&>.active]:text-gray-300 [&>.active]:bg-gray-200 dark:[&>.active]:bg-gray-950">
7+
<a href="{{ link([], {'view': 'table'}) }}" title="Table view" class="{{ get('view', config('list-view', 'table')) == 'table' ? 'active ' : '' }}flex items-center justify-center px-3 py-2 text-gray-400 dark:text-gray-500">
8+
{{ svg('tableview', 18) }}
9+
</a>
10+
<a href="{{ link([], {'view': 'tree'}) }}" title="Tree view" class="{{ get('view', config('list-view', 'table')) == 'tree' ? 'active ' : '' }}flex items-center justify-center px-3 py-2 text-gray-400 dark:text-gray-500 border-l border-gray-300 dark:border-gray-600">
11+
{{ svg('treeview', 18) }}
12+
</a>
13+
</div>
1214
</div>
1315
{% endif %}
1416

1517
{% if all_keys != 0 %}
16-
<div class="flex" id="search_form">
17-
<input type="text" id="search_key" value="{{ search_value }}" placeholder="( / ) Search..." aria-label="( / ) Search..."
18-
class="w-full md:w-72 rounded-l border border-gray-300 bg-white py-1.5 px-3 text-sm
19-
focus:outline-hidden focus:ring-3 focus:ring-primary-200 focus:border-primary-300
20-
dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400
21-
dark:focus:ring-primary-500 dark:focus:border-primary-400">
22-
{{ include('components/button.twig', {
23-
text: '',
24-
icon: 'search',
25-
id: 'submit_search',
26-
class: 'rounded-l-none',
27-
}) }}
18+
<div>
19+
<div class="flex" id="search_form">
20+
<input type="text" id="search_key" value="{{ search_value }}" placeholder="( / ) Search..." aria-label="( / ) Search..."
21+
class="w-full md:w-72 rounded-l border border-gray-300 bg-white py-1.5 px-3 text-sm
22+
focus:outline-hidden focus:ring-3 focus:ring-primary-200 focus:border-primary-300
23+
dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400
24+
dark:focus:ring-primary-500 dark:focus:border-primary-400">
25+
{{ include('components/button.twig', {
26+
text: '',
27+
icon: 'search',
28+
id: 'submit_search',
29+
class: 'rounded-l-none',
30+
}) }}
31+
</div>
2832
</div>
2933
{% endif %}
3034
</div>
3135

32-
<div class="md:flex gap-2">
36+
<div class="md:flex gap-2 flex-wrap">
3337
{% for button in custom_buttons %}
3438
{{ button|raw }}
3539
{% endfor %}

0 commit comments

Comments
 (0)