peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dashboard responsiveness and layout spacing

Browse Source 
- Adjust grid layouts and spacing for better mobile and small screen support
- Reduce padding and margin sizes for compact displays
- Update text sizes and alignment for improved readability across devices
- Maintain existing dashboard structure and content
This commit is contained in:
Peter Stockings
2025-02-23 16:47:31 +11:00
parent ad84f39113
commit 556a4430ad
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/dashboard/home.html
View File

@@ -7,9 +7,9 @@
</div> </div>
<!-- Timer Functions Stats --> <!-- Timer Functions Stats -->
<div class="mb-8"> <div class="mb-4 sm:mb-8">
<h2 class="text-lg font-semibold text-gray-700 mb-4">Timer Functions</h2> <h2 class="text-lg font-semibold text-gray-700 mb-2 sm:mb-4">Timer Functions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
<!-- Total Timer Functions Card --> <!-- Total Timer Functions Card -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"> <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<div class="flex items-center"> <div class="flex items-center">
@@ -85,9 +85,9 @@
</div> </div>
<!-- HTTP Functions Stats --> <!-- HTTP Functions Stats -->
<div class="mb-8"> <div class="mb-4 sm:mb-8">
<h2 class="text-lg font-semibold text-gray-700 mb-4">HTTP Functions</h2> <h2 class="text-lg font-semibold text-gray-700 mb-2 sm:mb-4">HTTP Functions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
<!-- Total HTTP Functions Card --> <!-- Total HTTP Functions Card -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"> <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<div class="flex items-center"> <div class="flex items-center">
@@ -162,13 +162,12 @@
</div> </div>
</div> </div>
<!-- Add this after the stats cards and before the Last Activity section --> <!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-6 mb-4 sm:mb-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- 24-Hour Distribution --> <!-- 24-Hour Distribution -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"> <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">24-Hour Invocation Distribution</h3> <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-4">24-Hour Invocation Distribution</h3>
<div class="relative h-64"> <div class="relative h-48 sm:h-64">
<svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none"> <svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none">
<!-- Y-axis --> <!-- Y-axis -->
<line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" /> <line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" />
@@ -202,9 +201,9 @@
</div> </div>
<!-- 7-Day Success Rate Trend --> <!-- 7-Day Success Rate Trend -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"> <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">7-Day Success Rate Trend</h3> <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-4">7-Day Success Rate Trend</h3>
<div class="relative h-64"> <div class="relative h-48 sm:h-64">
<svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none"> <svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none">
<!-- Y-axis --> <!-- Y-axis -->
<line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" /> <line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" />
@@ -249,10 +248,10 @@
</div> </div>
<!-- Last Activity --> <!-- Last Activity -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"> <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
<div> <div>
<h2 class="text-lg font-medium text-gray-900">Last Activity</h2> <h2 class="text-base sm:text-lg font-medium text-gray-900">Last Activity</h2>
<div class="mt-1 space-y-1"> <div class="mt-1 space-y-1">
{% if stats.last_timer_invocation %} {% if stats.last_timer_invocation %}
<p class="text-sm text-gray-500"> <p class="text-sm text-gray-500">
@@ -266,13 +265,13 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="space-x-4"> <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
<a href="{{ url_for('timer.overview') }}" <a href="{{ url_for('timer.overview') }}"
class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200"> class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200">
View Timer Functions View Timer Functions
</a> </a>
<a href="{{ url_for('dashboard_http_functions') }}" <a href="{{ url_for('dashboard_http_functions') }}"
class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200"> class="inline-flex items-center justify-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200">
View HTTP Functions View HTTP Functions
</a> </a>
</div> </div>