-
Notifications
You must be signed in to change notification settings - Fork 1
Web App Development Tips and Tricks
from discussion with Scott Davis
Window: innerWidth Property
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
window.innerWidth returns number in pixels of how wide the window is. When application loads, you can set an if statement to collapse the expand widgets:
if (window.innerWidth < 500) {
expand.close = true;
}
As for thresholds, tailwindcss has recommended break points.
| Screen Size | Threshold | @media |
|---|---|---|
| sm | 640px | @media (min-width: 640px) |
| md | 768px | @media (min-width: 768px) |
| lg | 1024px | @media (min-width: 1024px) |
| xl | 1280px | @media (min-width: 1280px) |
| 2xl | 1536px | @media (min-width: 1536px) |
https://blog.logrocket.com/tailwind-css-dynamic-breakpoints-container-queries/
Grid and Flex... Grid is more like table for more complex layouts that support the idea of rows and columns at the same time. Flex is just a single axis as a type, but can be nested. Usually default to flex.
#Content in header...#
How do we fit everything in header for smaller screen? For smaller screen, you have to choose what you want to show or stack. You can switch to flex-direction:column. So instead of flowing left to right and goes top to bottom.
You may switch out logo when smaller screens.
Use a media query to apply new styling of header. Image would have to be done differently, using javascript.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
When designing for Media query might be more appropriate technology to use. You can do media queries on all sorts. One use most is width:
Apply this style if width is at least 35rem:
/* Minimum width */
@media (min-width: 35rem) {
div {
background: yellow;
}
}
Tailwind is defacto standard for css formating. ESRI's Calcite is starting to integrate tailwind. New bike map will use tailwind and calcite.
Size of panels should be static or at least have a min-width.
On mobile, go full screen. ESRI expand widget goes full screen by default. On small screens, use width: 100%;
Start with full width width:100%; on html body, since not scrollable.
Header height and viewDiv height...
Height of header is 45px; viewDiv could be
position: absolute;
top 45px;
left: 0;
right: 0;
bottom: 0;
Other way to do that is use flex
body:
display: flex;
flex-direction: column;
margin: 0;
viewDiv:
flex: 1;
flex 1; takes up all remaining space in the parent