From 8e43ad0ff1a96f94ea90bafe57fbbd83d47620c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= Date: Wed, 10 Dec 2025 13:37:17 +0100 Subject: [PATCH] Improve layout --- Makefile | 2 +- README.md | 4 ++++ pom.xml | 5 +++++ src/main/resources/static/css/styles.css | 17 +++++++++-------- src/main/resources/templates/admin.html | 17 ++++++++++------- 5 files changed, 29 insertions(+), 16 deletions(-) diff --git a/Makefile b/Makefile index 0fb17d0..cf14a0f 100644 --- a/Makefile +++ b/Makefile @@ -3,7 +3,7 @@ APP_NAME=imgfloat .PHONY: run test package docker-build docker-run ssl run: - test -f .env && . ./.env; mvn spring-boot:run + test -f .env && . ./.env; mvn spring-boot:run -Dspring-boot.run.fork=true test: mvn test diff --git a/README.md b/README.md index 5368467..f427324 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,10 @@ TWITCH_REDIRECT_URI=http://localhost:8080/login/oauth2/code/twitch mvn spring-bo ``` The default server port is `8080`. Log in via `/oauth2/authorization/twitch`. The redirect URI above is what Twitch should be configured to call for local development. +### Hot reload during development +- The project includes Spring Boot DevTools so Java and Thymeleaf changes trigger a restart automatically when you run `make run` (which now forks the Spring Boot process so devtools can watch the classpath). +- Static assets under `src/main/resources/static` are refreshed through the built-in LiveReload server from DevTools; install a LiveReload browser extension to automatically reload the overlay or dashboard when CSS/JS files change. + ### Enable TLS locally ```bash make ssl diff --git a/pom.xml b/pom.xml index 8ca9efb..b8e9908 100644 --- a/pom.xml +++ b/pom.xml @@ -45,6 +45,11 @@ org.springframework.boot spring-boot-starter-websocket + + org.springframework.boot + spring-boot-devtools + true + org.springframework.boot spring-boot-starter-security diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css index ba53ed3..71c9091 100644 --- a/src/main/resources/static/css/styles.css +++ b/src/main/resources/static/css/styles.css @@ -604,7 +604,7 @@ body { gap: 12px; padding: 14px; border-radius: 12px; - background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(59, 130, 246, 0.05)); + background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(124, 58, 237, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } @@ -696,7 +696,7 @@ body { } .panel-section { - margin-top: 16px; + margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); @@ -948,8 +948,9 @@ body { .toggle-track { position: relative; + align-self: flex-start; width: 52px; - height: 30px; + height: 25px; display: inline-flex; align-items: center; padding: 4px; @@ -961,8 +962,8 @@ body { } .toggle-thumb { - width: 22px; - height: 22px; + width: 17px; + height: 17px; border-radius: 999px; background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset; @@ -971,13 +972,13 @@ body { } .checkbox-inline input[type="checkbox"]:checked + .toggle-track { - background: linear-gradient(180deg, #34c759, #28b74b); - border-color: #28b74b; + background: linear-gradient(180deg, #7c3aed, #342366); + border-color: #7c3aed; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35); } .checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb { - transform: translateX(22px); + transform: translateX(25px); box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html index 6f156fb..56e0d65 100644 --- a/src/main/resources/templates/admin.html +++ b/src/main/resources/templates/admin.html @@ -59,6 +59,7 @@

Pick an asset in the list to adjust its placement and playback.

+