Open aetasoul opened 9 months ago
I'd like to use the bottom navbar on the mobile devices and Navbar on desktop devices, like this
With a simple copy-pase I create a Vaadin 14 project to test this on my mobile (Google Pixel 7 Pro and on Iphone 12 Pro).
On the iphone all is working but on the pixel the app-layout always show on top like the desktop device.
Checking the vaadin-app-layout.js file I found the media query:
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) { :host { --vaadin-app-layout-touch-optimized: true; } }
updating this fixed the problem, to:
@media (pointer: fine),(pointer: coarse) and (max-width: 800px) and (min-height: 500px) { :host { --vaadin-app-layout-touch-optimized: true; } }
seems that the pixel is recognized as desktop device?
I expect the navbar to correctly move to the bottom also on the pixel 7 pro.
Example:
package com.vaadin.demo.component.applayout; import com.vaadin.flow.component.applayout.AppLayout; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.H1; import com.vaadin.flow.component.html.H2; import com.vaadin.flow.component.html.Paragraph; import com.vaadin.flow.component.icon.Icon; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.tabs.Tab; import com.vaadin.flow.component.tabs.Tabs; import com.vaadin.flow.component.tabs.TabsVariant; import com.vaadin.flow.router.Route; import com.vaadin.flow.router.RouterLink; @Route("app-layout-bottom-navbar") public class AppLayoutBottomNavbar extends AppLayout { public AppLayoutBottomNavbar() { H1 title = new H1("MyApp"); title.getStyle() .set("font-size", "var(--lumo-font-size-l)") .set("margin", "var(--lumo-space-m) var(--lumo-space-l)"); Tabs tabs = getTabs(); H2 viewTitle = new H2("View title"); Paragraph viewContent = new Paragraph("View content"); Div content = new Div(); content.add(viewTitle, viewContent); addToNavbar(title); addToNavbar(true, tabs); setContent(content); } private Tabs getTabs() { Tabs tabs = new Tabs(); tabs.add( createTab(VaadinIcon.DASHBOARD, "Dashboard"), createTab(VaadinIcon.CART, "Orders"), createTab(VaadinIcon.USER_HEART, "Customers"), createTab(VaadinIcon.PACKAGE, "Products") ); tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL, TabsVariant.LUMO_EQUAL_WIDTH_TABS); return tabs; } private Tab createTab(VaadinIcon viewIcon, String viewName) { Icon icon = viewIcon.create(); icon.setSize("var(--lumo-icon-size-s)"); icon.getStyle().set("margin", "auto"); RouterLink link = new RouterLink(); link.add(icon); // Demo has no routes // link.setRoute(viewClass.java); link.setTabIndex(-1); return new Tab(link); } }
Open the website on the phone. Change the media query as explained above. Open the website on the phone.
Vaadin version(s): 14.10.7 OS: Android 13
Chrome
I don't know but maybe update the media query as:
@media (max-width: 800px), (max-height: 600px)
will fix the problem on most devices?
This is the one used for the drawer
Description
I'd like to use the bottom navbar on the mobile devices and Navbar on desktop devices, like this
With a simple copy-pase I create a Vaadin 14 project to test this on my mobile (Google Pixel 7 Pro and on Iphone 12 Pro).
On the iphone all is working but on the pixel the app-layout always show on top like the desktop device.
Checking the vaadin-app-layout.js file I found the media query:
updating this fixed the problem, to:
seems that the pixel is recognized as desktop device?
Expected outcome
I expect the navbar to correctly move to the bottom also on the pixel 7 pro.
Minimal reproducible example
Example:
Steps to reproduce
Open the website on the phone. Change the media query as explained above. Open the website on the phone.
Environment
Vaadin version(s): 14.10.7 OS: Android 13
Browsers
Chrome