Clean up classes and styles for the admin sidebar.

 






 

 


  Review Request #10407
  —
  Created Feb. 15, 2019 and submitted 

 




















 

  

   Information

  





 
 

  david
 









 
 

  Review Board
 









 
 

  release-4.0.x
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
The admin sidebar was kind of a mess. It used the class names and styles

from the admin widgets, but then did a bunch of overrides and other

element-specific styles. This change breaks it apart and makes it so that

future redesign work will be much easier.


This involves several pieces:


    

  • Renaming the template so it doesn't claim to be a widget.
    • 

  • Switching away from the .admin-widget class and associated
    
  sub-element classes, and moving towards our new CSS naming standards.
    • 

  • Defining new rules for the new classes, bringing across only those
    
  things which are necessary for the look of the sidebar.
    • 

  • Eliminating style rules specific to each section of the sidebar and
    
  making those general.
    • 



There is one visual change in here, removing the text from the "Add"

links within the "Manage" section. This text really doesn't add anything

to the user experience, and it cluttered up both the visual appearance

and the style rules. I've moved this into a tooltip instead (and changed

it to say "Add new").

 








  


 
 

  
Verified the visual appearance and behavior of the admin sidebar.

 







 









 





  

 


 
 

  



 

  
   


    Summary
    ID

   

  
  

   


    

     

      Rename the admin sidebar template.
      
The admin sidebar template name was kind of confusing, making it appear
like it was a widget (when it's really not). This change renames the
template and updates the relevant templatetag to point to the new
location. While there I also renamed the templatetag to be more
explanatory.

Testing Done:
Verified that the admin sidebar still appeared correctly.

     


    		
    43801e5be7ee01b245710be9e0279d9039f169ac

   


   


    

     

      Stop using admin-widget styles for the admin sidebar.
      
This change switches the admin sidebar away from using the
`.admin-widget` class and associated styles. For now, the relevant
styles are copied into a new set of rules. As we redesign the admin UI,
this will allow us to modify the sidebar independently without affecting
the widgets.

Testing Done:
Verified the appearance of the sidebar in the admin UI.

     


    		
    9020b5c7c5cdd3c8e67646590f58b1ba9e8c8346

   


   


    

     

      Remove section-specific styles for admin sidebar.
      
The three sections in the admin sidebar had some style rules specific to
each one. These weren't really necessary, and in most cases were there
to override things inherited from the `.admin-widget` styles.

The one visual change this makes is to remove the text from the "Add"
links within the "Manage" section. This text really doesn't add anything
to the user experience, and it cluttered up both the visual appearance
and the style rules. I've moved this into a tooltip instead (and changed
it to say "Add new").

Testing Done:
Verified the visual appearance and behavior of the admin sidebar.

     


    		
    23468f53374d0071cfa5add360aaebb7ca6e580f

   



  
 




 













 






 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
BEM-related style guidelines say that each selector should be on its own line, so it's easier to make incremental changes …

      		
      
       chipx86chipx86
      
      
       
      
     


    
   

  

 







 






  

 



















 




 




 














 





 

  

   




chipx86




   

   









  

 



 

  


   

   

    
 
chipx86


    
   


  

  

  



    




  1. 
 
    
  
    
   
    This has been a pet peeve of mine for a while. Glad to see this cleaned up, and using the new CSS conventions :)
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 
    
  
    
   
    
    
     
    
      
       reviewboard/static/rb/css/pages/admin-dashboard.less
       


        (Diff revision 1)


       
      
     
    
        
    
     
     
    

     
     
    

        
   
    
  
    
 
    

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    BEM-related style guidelines say that each selector should be on its own line, so it's easier to make incremental changes and see them in a diff.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 



 

  

   




david




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  







  

   

    Status:
   

   


    Completed

   

  




  

   

    Change Summary:
   

   

    
Pushed to release-4.0.x (74b43b6)