search

cicscareers / 320-S20-Track1

Integration Track 1
BSD 3-Clause "New" or "Revised" License
11 stars 3 forks source link

Make important pages mobile responsive #380

Open powellsl99 opened 4 years ago

powellsl99 commented 4 years ago

This PR aims to make the most important pages for the site responsive on mobile. This includes the top navigation bar, matching page, and appointments page. The navbar is currently finished as is the matching page wrapper, and the supporter expansion panels and appointments page are still left. The PR heavily relies on the react-device-detect library which allows the variable isMobile to be used to check if the device is mobile. Screen Shot 2020-06-22 at 10 17 44 PM

Screen Shot 2020-06-22 at 10 18 02 PM
powellsl99 commented 4 years ago

Just going to merge this now. Not sure when ill have time next to work on making the actual cards mobile responsive

ishchhabra commented 4 years ago

When I expand a supporter, the supporter image overflows horizontally, not only making it look weird but doing so, it also shifts the profile pic thumbnail on the top right to the right. This reverts back when I shift back to my collapse the supporter. However, is it possible to show the image in the center followed by other details in the next line in mobile devices? Also, could you reduce the size of the date picker (along with the arrows) at the center to less width and avoid overflowing to the next line on mobile devices? pr review

powellsl99 commented 4 years ago

When I expand a supporter, the supporter image overflows horizontally, not only making it look weird but doing so, it also shifts the profile pic thumbnail on the top right to the right. This reverts back when I shift back to my collapse the supporter. However, is it possible to show the image in the center followed by other details in the next line in mobile devices? Also, could you reduce the size of the date picker (along with the arrows) at the center to less width and avoid overflowing to the next line on mobile devices? pr review

@ishchhabra yeah, that was what I mentioned in my comment before I switched from draft. The cards will need an overhaul on both mobile and desktop, but im not sure when I will have time to do a ton of coding. Im just going to merge this in now to prevent further merge issues coming up, and making the cards responsive can be another PR. As for the datepicker it seems fine on all except the gfold which is a pretty narrow corner case, but I agree it should be slightly smaller, so ill update that when I get a chance