style: Layout und Styling-Anpassungen

- Styles für LoginView und Landing-View angepasst
- AdminLayout und MainLayout erweitert
- LoginView bereinigt
- ShowCustomersView optimiert
This commit is contained in:
2026-03-19 19:47:32 +01:00
parent 5ccfac4cf2
commit 1bb5026b85
5 changed files with 49 additions and 18 deletions

View File

@@ -22,10 +22,10 @@ html {
radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 32%),
radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.16), transparent 28%),
linear-gradient(180deg, #eef4ff 0%, #f7f9fc 45%, #eef2f7 100%);
--app-shadow-sm: 0 12px 28px rgba(15, 23, 42, 0.08);
--app-shadow-md: 0 20px 44px rgba(15, 23, 42, 0.1);
--app-shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.12);
--app-shadow-xl: 0 36px 88px rgba(8, 18, 36, 0.24);
--app-shadow-sm: none;
--app-shadow-md: none;
--app-shadow-lg: none;
--app-shadow-xl: none;
--lumo-font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
--lumo-base-color: #f5f7fb;
--lumo-body-text-color: var(--app-text);
@@ -46,7 +46,7 @@ html {
--lumo-border-radius-m: 18px;
--lumo-border-radius-l: 24px;
--lumo-border-radius-xl: 32px;
--lumo-box-shadow-xs: 0 8px 18px rgba(15, 23, 42, 0.06);
--lumo-box-shadow-xs: none;
--lumo-box-shadow-s: var(--app-shadow-sm);
--lumo-box-shadow-m: var(--app-shadow-md);
--lumo-box-shadow-l: var(--app-shadow-lg);
@@ -153,7 +153,6 @@ vaadin-app-layout::part(content) {
}
.landing-view,
.dashboard-home-view,
.login-view {
box-sizing: border-box;
padding: 0;
@@ -163,6 +162,40 @@ vaadin-app-layout::part(content) {
min-height: 100dvh;
}
.dashboard-home-view {
box-sizing: border-box;
padding: 0;
gap: 1rem;
background: transparent !important;
}
.view-container:has(.dashboard-home-view) {
border-radius: 12px;
background: transparent;
overflow: auto;
}
body:has(.dashboard-home-view) {
background: var(--app-shell-background);
--lumo-base-color: #f5f7fb;
}
body:has(.dashboard-home-view) vaadin-app-layout,
body:has(.dashboard-home-view) vaadin-app-layout::part(content) {
background: transparent;
}
.dashboard-home-view .surface-panel {
border: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
}
.dashboard-home-view .hero-panel {
box-shadow: none;
}
.landing-view {
padding: 20px;
gap: 20px;

View File

@@ -75,6 +75,9 @@ public final class AdminLayout extends AppLayout {
var header = new Div(appLogo, appName);
header.addClassNames(Display.FLEX, Padding.MEDIUM, Gap.MEDIUM, AlignItems.CENTER);
header.addClassName("app-drawer-header");
header.getStyle().set("cursor", "pointer");
header.getElement().setProperty("title", "Zum Dashboard");
header.addClickListener(event -> UI.getCurrent().navigate("admin-dashboard"));
return header;
}

View File

@@ -113,9 +113,16 @@ public final class MainLayout extends AppLayout {
var header = new Div(appLogo, appName);
header.addClassNames(Display.FLEX, Padding.MEDIUM, Gap.MEDIUM, AlignItems.CENTER);
header.addClassName("app-drawer-header");
header.getStyle().set("cursor", "pointer");
header.getElement().setProperty("title", "Zum Dashboard");
header.addClickListener(event -> UI.getCurrent().navigate(resolveHomeRoute()));
return header;
}
private String resolveHomeRoute() {
return securityService.hasRole("ADMIN") ? "admin-dashboard" : "dashboard";
}
private Component createSideNav() {
// Create tree data with hierarchical menu structure
TreeData<MenuTreeItem> treeData = new TreeData<>();

View File

@@ -4,17 +4,12 @@ import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver;

View File

@@ -53,13 +53,6 @@ public class ShowCustomersView extends VerticalLayout implements HasDynamicTitle
.setFlexGrow(1).setSortable(true);
grid.addColumn(Customer::getTelephone).setHeader(getTranslation("customers.column.phone")).setAutoWidth(true)
.setSortable(true);
grid.addColumn(customer -> (customer.getStreet() != null ? customer.getStreet() : "") + " "
+ (customer.getHouseNumber() != null ? customer.getHouseNumber() : ""))
.setHeader(getTranslation("customers.column.street")).setAutoWidth(true).setFlexGrow(1)
.setSortable(true);
grid.addColumn(customer -> (customer.getZip() != null ? customer.getZip() : "") + " "
+ (customer.getCity() != null ? customer.getCity() : ""))
.setHeader(getTranslation("customers.column.city")).setAutoWidth(true).setFlexGrow(1).setSortable(true);
grid.setMultiSort(true);
grid.setSizeFull();