redesign: Login-Seite überarbeitet

- Kacheln untereinander statt nebeneinander angeordnet
- Obere blaue Info-Kachel entfernt
- Hintergrund auf weiß gesetzt
- Login-Formular-Kachel mit weißem Hintergrund
- VotianLT-Titel und Anmelden-Chip entfernt
- Icon und Titel nebeneinander angeordnet
- Größe und Höhe der Kacheln angepasst
This commit is contained in:
2026-03-19 17:12:27 +01:00
parent 4657c712fc
commit 44c53bcd6c
4 changed files with 17 additions and 34 deletions

View File

@@ -6,7 +6,7 @@
<groupId>de.assecutor.votianlt</groupId> <groupId>de.assecutor.votianlt</groupId>
<artifactId>votianlt</artifactId> <artifactId>votianlt</artifactId>
<version>0.9.11</version> <version>0.9.12</version>
<packaging>jar</packaging> <packaging>jar</packaging>

View File

@@ -158,7 +158,9 @@ vaadin-app-layout::part(content) {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
gap: 1rem; gap: 1rem;
background: transparent; background: #ffffff !important;
min-height: 100vh;
min-height: 100dvh;
} }
.data-view, .data-view,
@@ -467,12 +469,13 @@ vaadin-vertical-layout.admin-form-view {
.login-view { .login-view {
padding-inline: 0; padding-inline: 0;
background: var(--app-shell-background) !important;
} }
.login-shell { .login-shell {
width: min(1120px, 100%); width: min(750px, 100%);
display: grid; display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 440px); grid-template-columns: 1fr;
gap: 1.5rem; gap: 1.5rem;
} }
@@ -488,7 +491,7 @@ vaadin-vertical-layout.admin-form-view {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
min-height: 560px; min-height: 280px;
padding: clamp(1.8rem, 4vw, 3rem); padding: clamp(1.8rem, 4vw, 3rem);
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(140deg, #081224 0%, #173d8d 52%, #0f766e 100%); background: linear-gradient(140deg, #081224 0%, #173d8d 52%, #0f766e 100%);
@@ -523,11 +526,14 @@ vaadin-vertical-layout.admin-form-view {
width: 100%; width: 100%;
padding: clamp(1.35rem, 3vw, 2rem); padding: clamp(1.35rem, 3vw, 2rem);
border: 1px solid var(--app-border-strong); border: 1px solid var(--app-border-strong);
background: rgba(255, 255, 255, 0.88); background: #ffffff;
backdrop-filter: blur(20px);
box-shadow: var(--app-shadow-lg); box-shadow: var(--app-shadow-lg);
} }
.login-card vaadin-login-form-wrapper {
background: #ffffff !important;
}
.login-card-title { .login-card-title {
margin: 0; margin: 0;
color: var(--app-text-strong); color: var(--app-text-strong);

View File

@@ -14,6 +14,7 @@ import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent; 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.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent; import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver; import com.vaadin.flow.router.AfterNavigationObserver;
@@ -98,9 +99,6 @@ public class LoginView extends VerticalLayout implements BeforeEnterObserver, Af
loginForm.setForgotPasswordButtonVisible(true); loginForm.setForgotPasswordButtonVisible(true);
loginForm.addForgotPasswordListener(e -> UI.getCurrent().navigate(ForgotPasswordRequestView.class)); loginForm.addForgotPasswordListener(e -> UI.getCurrent().navigate(ForgotPasswordRequestView.class));
H1 title = new H1(getTranslation("login.votianlt"));
title.addClassName("login-card-title");
Button registerButton = new Button(getTranslation("login.register"), e -> UI.getCurrent().navigate("register")); Button registerButton = new Button(getTranslation("login.register"), e -> UI.getCurrent().navigate("register"));
registerButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); registerButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
registerButton.addClassName("login-register-button"); registerButton.addClassName("login-register-button");
@@ -117,27 +115,10 @@ public class LoginView extends VerticalLayout implements BeforeEnterObserver, Af
loginLayout.setAlignItems(FlexComponent.Alignment.CENTER); loginLayout.setAlignItems(FlexComponent.Alignment.CENTER);
loginLayout.addClassName("login-card"); loginLayout.addClassName("login-card");
loginLayout.add(flashBox, title, loginForm, twoFaField, verify2faButton, registerButton, versionSpan); loginLayout.add(flashBox, loginForm, twoFaField, verify2faButton, registerButton, versionSpan);
loginLayout.setPadding(true); loginLayout.setPadding(true);
Div loginHighlight = new Div(); Div loginShell = new Div(loginLayout);
loginHighlight.addClassName("login-highlight");
Span loginEyebrow = new Span(getTranslation("login.title"));
loginEyebrow.addClassName("eyebrow-chip");
Icon introIcon = VaadinIcon.CUBES.create();
introIcon.addClassName("login-highlight-icon");
H1 introTitle = new H1(getTranslation("login.votianlt"));
introTitle.addClassName("login-highlight-title");
Paragraph introText = new Paragraph(getTranslation("start.hero.description"));
introText.addClassName("login-highlight-text");
loginHighlight.add(loginEyebrow, introIcon, introTitle, introText);
Div loginShell = new Div(loginHighlight, loginLayout);
loginShell.addClassName("login-shell"); loginShell.addClassName("login-shell");
add(loginShell); add(loginShell);

View File

@@ -3,7 +3,6 @@ package de.assecutor.votianlt.pages.view;
import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.H1; import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -81,9 +80,6 @@ public class RegisterView extends VerticalLayout implements HasDynamicTitle {
H1 title = new H1(getTranslation("register.title")); H1 title = new H1(getTranslation("register.title"));
title.addClassName("form-title"); title.addClassName("form-title");
H2 subtitle = new H2(getTranslation("register.subtitle"));
subtitle.addClassName("form-subtitle");
// Formularfelder // Formularfelder
emailField = new TextField(getTranslation("register.email")); emailField = new TextField(getTranslation("register.email"));
emailField.setWidthFull(); emailField.setWidthFull();
@@ -204,7 +200,7 @@ public class RegisterView extends VerticalLayout implements HasDynamicTitle {
form.add(backButton); form.add(backButton);
form.setColspan(backButton, 2); form.setColspan(backButton, 2);
container.add(title, subtitle, form); container.add(title, form);
return container; return container;
} }