mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Improve layout
This commit is contained in:
2
Makefile
2
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
|
||||
|
||||
@@ -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
|
||||
|
||||
5
pom.xml
5
pom.xml
@@ -45,6 +45,11 @@
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-devtools</artifactId>
|
||||
<optional>true</optional>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-security</artifactId>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
<p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
|
||||
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="selected-asset-actions">
|
||||
<button type="button" class="ghost icon-button" id="selected-asset-visibility" title="Toggle visibility">
|
||||
<i class="fa-solid fa-eye-slash"></i><span class="sr-only">Toggle visibility</span>
|
||||
@@ -66,7 +67,7 @@
|
||||
<button type="button" class="ghost danger icon-button" id="selected-asset-delete" title="Delete asset">
|
||||
<i class="fa-solid fa-trash"></i><span class="sr-only">Delete asset</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
@@ -83,12 +84,14 @@
|
||||
Height
|
||||
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label class="checkbox-inline toggle">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
<span class="toggle-label">Maintain aspect</span>
|
||||
<label>
|
||||
Maintain AR
|
||||
<label class="checkbox-inline toggle">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
|
||||
Reference in New Issue
Block a user