Making RB look and work better on a small-screen device.

 






 

 


  Review Request #5620
  —
  Created March 14, 2014 and discarded  — Latest diff uploaded 

 


















 

  

   Information

  





 
 

  Joonas
 









 
 

  Review Board
 









 
 

  master
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard, students
 









 
 

  mirai
 






 








 





  


 
 

  
I'm making RB responsive by using CSS media queries. I have worked on:


    

  • Making the login and registration pages look better on a small-screen device. The code related to this is in common.less under the Login/Register pages section.
    • 

  • Making the top menu bar ("Support", "Login", Searchbar etc.) and the navigation bar ("My Dashboard", "New Review Request" etc.) to be hidden by default on a small-screen device. When a Menu-button is pressed, they are brought visible in the form of a mobile-friendly menu (see the newest screenshots). I'm using the CSS3 transform property to have the menu come on top of the page content without affecting it.
    • 





Possible things todo:


    

  • Implement the Menu icon with SVG. It is now done purely in CSS. We might want to use SVG because other icons in RB are also SVG.
    • 

  • Further testing.
    • 

  • Organize and improve the code.
    • 

  • See how https://reviews.reviewboard.org/r/5655/ affects this. Remove duplicate things. Use same variable for the viewport size etc.
    • 


 








  


 
 

  
Tested on desktop with Firefox and Chrome (but not IE) by resizing the browser window and using the menu on different parts (though not all) of RB. Tested with HTC One Mini and Google Nexus 7 2013 by using the menu on different parts (though not all) of RB. Switching between portrait and landscape mode.