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:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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<>();
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user