Fix Viewport for Desktop and Mobile

mithandir · Sep 10, 2023 · b6cbdf7 · b6cbdf7
1 parent 58265f7
commit b6cbdf7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/main/java/ch/climbd/newsfeed/views/LatestView.java b/src/main/java/ch/climbd/newsfeed/views/LatestView.java
@@ -48,9 +48,11 @@ public class LatestView extends VerticalLayout {
 
     @PostConstruct
     public void init() {
+        super.setWidth(commonComponents.isMobile() ? "100%" : "90%");
+
         var image = new Image(baseUrl + "/logo.svg", "Title");
         image.setWidth("8em");
-        image.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        image.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
         var heading = new H1("cycling news");
         var header = new HorizontalLayout(image, heading);
         header.setWidthFull();
@@ -62,10 +64,10 @@ public void init() {
         sourceData = new LinkedList<>(mongo.findAllOrderedByDate(commonSessionComponents.getSelectedLanguages()));
         newsItems = newsItemComponent.createNewsItem(sourceData);
         newsItems.setWidthFull();
-        newsItems.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        newsItems.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
 
         var searchBar = searchComponent.createSearchBar(newsItems);
-        searchBar.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        searchBar.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
         add(searchBar);
         add(newsItems);
 

diff --git a/src/main/java/ch/climbd/newsfeed/views/PopularView.java b/src/main/java/ch/climbd/newsfeed/views/PopularView.java
@@ -40,9 +40,11 @@ public class PopularView extends VerticalLayout {
 
     @PostConstruct
     public void init() {
+        super.setWidth(commonComponents.isMobile() ? "100%" : "90%");
+
         var image = new Image(baseUrl + "/logo.svg", "Title");
         image.setWidth("8em");
-        image.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        image.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
         var heading = new H1("cycling news");
         var header = new HorizontalLayout(image, heading);
         header.setWidthFull();
@@ -53,10 +55,10 @@ public void init() {
 
         VerticalLayout newsItems = newsItemComponent.createNewsItem(mongo.findAllOrderedByVotes(commonSessionComponents.getSelectedLanguages()));
         newsItems.setWidthFull();
-        newsItems.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        newsItems.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
 
         var searchBar = searchComponent.createSearchBar(newsItems);
-        searchBar.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        searchBar.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
         add(searchBar);
         add(newsItems);
     }

diff --git a/src/main/java/ch/climbd/newsfeed/views/components/CommonSessionComponents.java b/src/main/java/ch/climbd/newsfeed/views/components/CommonSessionComponents.java
@@ -51,6 +51,7 @@ public Set<String> getSelectedLanguages() {
 
     public MenuBar createMenu() {
         var menu = new MenuBar();
+        menu.setWidthFull();
         menu.setOpenOnHover(true);
 
         createIconItem(menu, VaadinIcon.NEWSPAPER, "Recent", null).addClickListener(listenerNewest);
@@ -68,7 +69,7 @@ public MenuBar createMenu() {
         german.setCheckable(true);
         german.setChecked(selectedLanguages.contains("de"));
 
-        menu.getStyle().set("margin-left", commonComponents.isMobile() ? "2%" : "10%");
+        menu.getStyle().set("margin-left", commonComponents.isMobile() ? "0" : "10%");
 
         return menu;
     }