Remove inner box padding and border-radius on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-16 09:22:00 +02:00
parent c7f2c70d23
commit 0033896340
4 changed files with 12 additions and 16 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
MQTT_BROKER=nuccy
MQTT_PORT=1882
MQTT_PORT=1883
MQTT_USER=rxf
MQTT_PASSWORD=your_password_here
+1 -4
View File
@@ -4,7 +4,7 @@ services:
expose:
- "3000"
volumes:
- bodenfeuchte-data:/app/data
- ./data:/app/data
env_file:
- .env
extra_hosts:
@@ -20,6 +20,3 @@ services:
depends_on:
- bodenfeuchte
restart: unless-stopped
volumes:
bodenfeuchte-data:
+5 -4
View File
@@ -1,14 +1,15 @@
import mqtt from 'mqtt';
import { insertMeasurement } from './db';
import { env } from '$env/dynamic/private';
const TOPIC = 'zigbee2mqtt/Bodenfeuchte_1';
export function startMqttListener(): void {
const client = mqtt.connect({
host: process.env.MQTT_BROKER ?? 'nuccy',
port: Number(process.env.MQTT_PORT ?? 1882),
username: process.env.MQTT_USER ?? 'rxf',
password: process.env.MQTT_PASSWORD ?? '',
host: env.MQTT_BROKER ?? 'nuccy',
port: Number(env.MQTT_PORT ?? 1883),
username: env.MQTT_USER ?? 'rxf',
password: env.MQTT_PASSWORD ?? '',
});
client.on('connect', () => {
+5 -7
View File
@@ -54,8 +54,6 @@
grid: { color: '#e5e7eb' },
},
y: {
min: 0,
max: 100,
ticks: { color: '#555', callback: v => `${v} %` },
grid: { color: '#e5e7eb' },
}
@@ -88,7 +86,7 @@
</svelte:head>
<div class="min-h-screen py-8 px-4" style="background:#f4f4f5; font-family: Arial, Helvetica, sans-serif;">
<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; min-height:calc(100vh - 4rem);">
<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; ">
<!-- Header -->
<div class="px-8 pt-6 pb-4 border-b-2 border-black">
@@ -96,11 +94,11 @@
</div>
<!-- Content -->
<div class="flex-1 px-8 py-6 flex flex-col gap-6">
<div class="flex-1 sm:px-8 py-6 flex flex-col gap-6">
<!-- Aktueller Wert -->
<div style="background:#CCCCFF; border:2px solid black; border-radius:0.5rem;" class="px-6 py-4 flex items-center justify-between">
<span class="text-gray-600 text-sm">Aktueller Wert</span>
<div style="background:#CCCCFF; border:2px solid black;" class="sm:rounded-lg px-6 py-4 flex items-center justify-between">
<span class="text-gray-600 font-bold text-2xl">Aktueller Wert</span>
{#if latest}
<div class="text-right">
<span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
@@ -115,7 +113,7 @@
</div>
<!-- Diagramm -->
<div style="border:2px solid black; border-radius:0.5rem; background:white; height:340px;" class="p-4">
<div style="border:2px solid black; background:white; height:340px;" class="sm:rounded-lg p-4 pb-8">
<p class="text-xs text-gray-400 mb-2">Letzte 6 Stunden · Stand: {lastUpdate || '…'}</p>
{#if data.length === 0}
<div class="flex items-center justify-center h-full text-gray-400 text-sm">