Admin UI Shell Redesign




 


  Review Request #10332
  —
  Created Nov. 23, 2018 and updated 

 















 
  
  
 




 
  

   Information

  

 
 

  

   
   
gojeffcho


  


  

   
   
Review Board


  


  

   
   
master


  


  

   
   



  


  

   
   



  


  

   
   
81a83f6...


  


 



 
  

   Reviewers

  

 
 

  

   
   
reviewboard, students


  


  

   
   



  


 











 

  
  


Update the Admin Shell UI to a more modern look in accordance with 

the provided mockup. This redesign updates the color schemes and 

makes UI elements more flat and readable. No major functionality

is impacted and changes are visual in nature.




 




 

  
  


Manual testing of updated pages and tabbed navbar.




 














 

 

  
  


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

  

 







 
 
 

  

   

    
   

   
    
    
  • 
     
    
    • 
    
  • 
     
    
    • 
    
  • 
     
    
    • 
    
  • 
     
    
    • 
    
  • 
     
    
    • 
   

  

  

   
    

     Description
     From
     Last Updated
    

   
   



    

     
      
      
We don't use named HTML colours; instead, we use hex values.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
Hey Jeff! I'm liking the progress your making on this, I just have a tiny nitpick. Shouldn't this stick to …

     		
     
      SudoliciousSudolicious
     
     
      
     
    




    

     
      
      
Is this the yellow at the top of the admin page? This should probably be a constant in defs.less.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
You probably already realize this but we will want some way of making the other tabs .active.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
I don't know how old this code is, but we should probably update from using view import paths to view …

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
This property is out of alphabetical order. I know you didn't add it, but could you fix that?

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
calc(@admin-sidebar-width - 1.5em) Fun fact: LESS will evaluate calc() statements so they are constants in the resulting CSS file.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
This is a repeated rule (.module has it already).

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
.module.recent-actions should be specific enough to override .module without !important, unless something else is overriding it?

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
This should be either border-top: none or border-top-width: 0px.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
Can you format as &:first-of-type > h2 ? It makes it more readable.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
While you're here, can you format this asfieldset > h2? Much more readable.

     		
     
      brenniebrennie
     
     
      
     
    




    

     
      
      
calc(@admin-sidebar-width - 0.1em

     		
     
      brenniebrennie
     
     
      
     
    


   
  

 












  

 



















 




 




 














 



 

  

   




gojeffcho




   

   

  

 



 















 





 

  

   




Sudolicious




   

   







  

 



 

  


   

   

    
 
Sudolicious


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Hey Jeff! I'm liking the progress your making on this, I just have a tiny nitpick.
    

    Shouldn't this stick to the length units you were using everywhere else?
    

    In this case:
    
font-size: 120%; --> font-size: 1.2em;
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      You're absolutely right that I should be!  In my exploratory stage, I'm making haphazard and hardcoded changes in order to confirm that I can get things looking the way I want them to - then I'll be going back through and cleaning up for consistency, correctness, modularity, and so on.
      
 
      

      2. 


 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 





 

  

   




brennie




   

   







  

 



 

  


   

   

    
 
brennie


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Redesign is coming along nicely!
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    We don't use named HTML colours; instead, we use hex values.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 






  3. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Is this the yellow at the top of the admin page? This should probably be a constant in defs.less.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 






  4. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    You probably already realize this but we will want some way of making the other tabs .active.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    5. 






  5. 
 
    
  
  
    
  
 
    
  
    
   
    
    
     
      reviewboard/templates/admin/base_site.html
      


       (Diff revision 1)


      
     
    
    
       
   
    
     
    

    
     
    

    
     
    

    
     
    

    
     
    

    
     
    

    
     
    

       
  
    
 
    

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    I don't know how old this code is, but we should probably update from using view import paths to view names in the {% url %} tags here.
    

    If that isn't a thing we can do easily, don't worry about it.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    6. 




  6. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    7. 




  

 
















 



 

  

   




gojeffcho




   

   

  

 



 















 



 

  

   




gojeffcho




   

   

  

 



 















 



 

  

   




gojeffcho




   

   

  

 



 















 



 

  

   




gojeffcho




   

   

  

 



 















 



 

  

   




gojeffcho




   

   

  

 



 















 





 

  

   




brennie




   

   







  

 



 

  


   

   

    
 
brennie


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    This property is out of alphabetical order. I know you didn't add it, but could you fix that?
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 






  3. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    calc(@admin-sidebar-width - 1.5em)
    

    Fun fact: LESS will evaluate calc() statements so they are constants in the resulting CSS file.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 






  4. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    This is a repeated rule (.module has it already).
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      In .module I set border: 1px solid @box-border-color followed by border-top: none (no border on top in the general case) whereas in .recent actions I want to bring back the top border.  Please let me know if there is a better way to do this.
      
 
      

      2. 


 
    


    

 
    

    5. 






  5. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    .module.recent-actions should be specific enough to override .module without !important, unless something else is overriding it?
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      It gets overridden by #content-related .module which is why I put in the !important.
      
 
      

      2. 


 
    


    

 
    

    6. 






  6. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    This should be either border-top: none or border-top-width: 0px.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    7. 






  7. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Can you format as &:first-of-type > h2 ? It makes it more readable.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    8. 






  8. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    While you're here, can you format this asfieldset > h2? Much more readable.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    9. 






  9. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    calc(@admin-sidebar-width - 0.1em
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    10. 




  10. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    11. 




  

 
















 



 

  

   




gojeffcho




   

   

  

 



 















 



 

  

   




gojeffcho




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  








 
Change Summary:

 
Update summary





 



  

   
Summary:

   
    
-Admin Shell UI Redesign
+Admin UI Shell Redesign

   		
  



 










  

 









     

    

   

  

  

   
   Loading...