fix(dashboard): adjust layout and improve responsiveness in Nginx dashboard

This commit is contained in:
Akino 2025-04-11 13:29:09 +00:00
parent 9d4070a211
commit a71de3eede
No known key found for this signature in database
GPG key ID: FB2F74D193A40907

View file

@ -104,9 +104,9 @@ onMounted(() => {
</script> </script>
<template> <template>
<div> <div class="max-w-full of-x-hidden">
<!-- Top operation bar --> <!-- Top operation bar -->
<div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center"> <div class="mb-4 mx-6 md:mx-0 flex flex-wrap gap-4 justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" /> <ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" />
<span class="font-medium">{{ status === NginxStatus.Running ? $gettext('Nginx is running') : $gettext('Nginx is not running') }}</span> <span class="font-medium">{{ status === NginxStatus.Running ? $gettext('Nginx is running') : $gettext('Nginx is not running') }}</span>
@ -191,12 +191,12 @@ onMounted(() => {
<ARow :gutter="[16, 16]" class="mb-4"> <ARow :gutter="[16, 16]" class="mb-4">
<!-- Metrics card --> <!-- Metrics card -->
<ACol :sm="24" :lg="12"> <ACol :xs="24" :sm="24" :lg="12">
<ConnectionMetricsCard :nginx-info="nginxInfo" /> <ConnectionMetricsCard :nginx-info="nginxInfo" />
</ACol> </ACol>
<!-- CPU and memory usage --> <!-- CPU and memory usage -->
<ACol :sm="24" :lg="12"> <ACol :xs="24" :sm="24" :lg="12">
<ResourceUsageCard :nginx-info="nginxInfo" /> <ResourceUsageCard :nginx-info="nginxInfo" />
</ACol> </ACol>
</ARow> </ARow>