From 6a58f5ed20f25083538b1efc932938184dbc03df Mon Sep 17 00:00:00 2001 From: Stefan Haun Date: Fri, 19 Jul 2024 14:01:11 +0200 Subject: [PATCH 1/2] Keep header at top position when scrolling --- .../ui/appframe/AppFrameLayout.java | 3 ++ .../ui/appframe/GartenplusHeader.java | 31 +++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/main/java/com/penguineering/gartenplus/ui/appframe/AppFrameLayout.java b/src/main/java/com/penguineering/gartenplus/ui/appframe/AppFrameLayout.java index e485fcb..1ab0665 100644 --- a/src/main/java/com/penguineering/gartenplus/ui/appframe/AppFrameLayout.java +++ b/src/main/java/com/penguineering/gartenplus/ui/appframe/AppFrameLayout.java @@ -23,6 +23,9 @@ public AppFrameLayout(@Qualifier("user") Supplier currentUser) { content = new Div(); content.setId("gartenplus-content"); content.setSizeFull(); + content.getStyle() + // Adjust the 50px if the header height changes + .set("margin-top", "calc(50px + 32px + 16px)"); add(content); } diff --git a/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java b/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java index 4c94876..89fbff2 100644 --- a/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java +++ b/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java @@ -24,7 +24,10 @@ public GartenplusHeader(Supplier currentUser) { headerLayout.setId("gartenplus-header"); headerLayout.setWidthFull(); headerLayout.getStyle() - .set("gap", "32px"); + .set("gap", "32px") + .set("padding", "16px 16px 8px 16px") + .set("background-color", "var(--lumo-base-color)") + .set("border-bottom", "1px solid var(--lumo-contrast-20pct)"); headerLayout.add(new GartenplusLogo()); @@ -68,7 +71,31 @@ public GartenplusHeader(Supplier currentUser) { headerLayout.add(new LoggedUserView(currentUser)); - this.add(headerLayout); + VerticalLayout fixedHeaderLayout = new VerticalLayout(); + fixedHeaderLayout.setWidthFull(); + fixedHeaderLayout.setPadding(false); + fixedHeaderLayout.setMargin(false); + fixedHeaderLayout.setSpacing(false); + + // fix to the top of the screen + fixedHeaderLayout.getStyle() + .set("position", "fixed") + .set("top", "0") + .set("left", "0") + .set("right", "0") + .set("z-index", "1000"); + + + fixedHeaderLayout.add(headerLayout); + + Div fader = new Div(); + fader.setWidthFull(); + fader.getStyle() + .set("background", "linear-gradient(180deg, var(--lumo-base-color) 0%, rgba(255, 255, 255, 0) 100%)") + .set("height", "32px"); + fixedHeaderLayout.add(fader); + + this.add(fixedHeaderLayout); } private static String findVersion() { From b3634e92f2e636cc9dc7f24610bdf8d24b0490bb Mon Sep 17 00:00:00 2001 From: Stefan Haun Date: Fri, 19 Jul 2024 14:59:10 +0200 Subject: [PATCH 2/2] Make a note on the Logo navigation issue See https://github.com/penguineer/GartenPlus/issues/10 --- .../penguineering/gartenplus/ui/appframe/GartenplusLogo.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusLogo.java b/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusLogo.java index 98dfc53..2a0210e 100644 --- a/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusLogo.java +++ b/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusLogo.java @@ -16,8 +16,8 @@ public GartenplusLogo() { Image logo = new Image(PATH, ALT); logo.setWidth(DIMENSIONS, Unit.PIXELS); logo.setHeight(DIMENSIONS, Unit.PIXELS); - Anchor link = new Anchor("", logo); - + // FIXME this link fails if the user is not logged in + Anchor link = new Anchor("/", logo); add(link); } }