Merge pull request #11 from penguineer/standing-header

Change the header to be fixed on top of the screen
penguineer · Jul 19, 2024 · 497bb0b · 497bb0b
2 parents 715f1df + b3634e9
commit 497bb0b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 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
@@ -23,6 +23,9 @@ public AppFrameLayout(@Qualifier("user") Supplier<UserDTO> 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
@@ -24,7 +24,10 @@ public GartenplusHeader(Supplier<UserDTO> 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<UserDTO> 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() {

diff --git 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);
     }
 }