2/20/2023 0 Comments Semantic ui responsive layout![]() It took some digging to find the best solutions to make my application responsive, but the approaches I took ended up being much more straightforward than expected. So now the Navbar is responsive with the items that correspond to the correct routes for mobile / desktop! You can check out the two screenshots of the website above to see the different Navbars that render on different screen sizes. Here's a preview of what this separate row looks like: So now I could write a separate Grid Row that would only be visible for mobile screens, and would redirect to the new mobile landing page instead of the map. Semantic UI makes this super easy by just passing a vertical prop to the Menu component. I also wanted to make my mobile Navbar vertical. I found out that the Grid Component includes an only prop that makes a Grid Row visible by adding breakpoints for certain screen sizes. Plus, my Navbar included a "Map" item, which I needed to change to "Select" on mobile, so I knew I had to find a way to customize the component and make it responsive. I had attempted to use the Collapsable Menu React component with Semantic UI, since it is supposed to dynamically collapse on mobile screens, but I wasn't able to get it to look exactly like I wanted it to. ![]() Now that the redirect from login was directed to the correct route on mobile, I had to make some changes to my Navbar component. So the user will be redirected to the new mobile_landing route if they are on a mobile screen at login. I created a new state in my LoginForm component called "mobile", and wrote a function that would set the state to true if the screen width is less than 760px: I found a helpful stackoverflow post that explained how to detect if the screen has changed to mobile in React. ![]() Previously, the user would be redirected to the MapBrowser page if they were successfully granted a jwt token upon login: ("/map") This is where I needed to build in some logic to redirect to the mobile landing page on small screens. It turns out that my LoginForm component is where the user gets redirected to the MapBrowser landing page, so that's where I zoomed in and made some changes. This made me think deeply about which React component I really needed to change to have my desired result on mobile. The training gave some sound advice: "Think about how to solve the problem with React’s declarative composability because nearly every 'React Router question' is probably a 'React question'". This React Training gives an excellent example of how to dynamically redirect a user to a different component based on a responsive media query.Īlthough the Responsive Routing I described above is a clean way to compose routes given different screen sizes, I realized the problem I needed to solve was a bit simpler. Similar to CSS media queries, React has a Media Component that listens for CSS media query responses and renders components if the query matches. React also has a way to make routes responsive to different screen sizes. ![]() React wanted to change this style, so since v4 routing takes place dynamically as the app is rendering. The philosophy is that frameworks like Rails use static routing, where routes are declared before any rendering takes place. I initially came across a feature in React called Dynamic Routing. ![]() The question then was - how do I do that? So I decided I would create a new simple landing page for mobile that would replace the map, which would just appear on desktop and tablet screens. It would either be so zoomed in that the user could only see a few countries at a time, or way too zoomed out and small to click on a particular country.Īlthough I liked visually presenting project data through the world map component, I realized that I needed to explore new options to make my website user friendly on mobile. While I was able to make the world map responsive on larger screen sizes using some D3 methods and an event listener for window resize, the map just would not look good on mobile screens. The main page of my nonprofit donation website, EffectiveDonate, is a world map that uses data visualization with the React D3 Library. Also, my Navbar component (referred to as "Menu" in Semantic UI) needed some work to look good on mobile, so I'll cover the changes I made to that component as well! I had a specific component in one of my projects that needed to be bypassed in order for my website to be optimal on mobile, and I will go through the steps I took to tackle that issue. In this post I'll cover some strategies to make your React application more responsive. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |