Maximized issue summary table width to occupy entire block

 






 

 


  Review Request #2816
  —
  Created Jan. 22, 2012 and submitted 

 


















 

  

   Information

  





 
 

  medanat
 









 
 

  Review Board
 









 
 

  
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
Maximized issue summary table width to occupy entire block.
Removed unnecessary style rules.

 








  


 
 

  
Local machine: Ubuntu/Chromium.

 







 









 





  







 

  
Screenshots

  
 



 






 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
Why do we need the wrapper? Can we not just apply this margin to the table class itself?

      		
      
       mike_conleymike_conley
      
      
       
      
     




     

      
       
       
My CSS is a little rusty, and my LessCSS skills need some tuning, but why exactly do we need to …

      		
      
       mike_conleymike_conley
      
      
       
      
     


    
   

  

 







 






  

 








 














 





 

  

   




mike_conley




   

   







  

 



 

  


   

   

    
 
mike_conley


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Yazan:

This looks pretty good - just one question (see below).

Also, we talked today about possibly zebra-striping this table for easier readability, and to add a little stub to each row to indicate the state of each issue.  Did you want to take care of that in this review request?  Or are you going to open a new one for that?

-Mike
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      That would be in a different review request. Thanks Mike.
      
 
      

      2. 


 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 
    
  
    
   
    
    
     
    
      
       reviewboard/htdocs/media/rb/css/reviews.less
       


        (Diff revision 1)


       
      
     
    
        
    
     
     
    

     
     
    

     
     
    

     
     
    

        
   
    
  
    
 
    

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    Why do we need the wrapper?  Can we not just apply this margin to the table class itself?
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      Since the width of the table is 100%, adding a margin will cause the table to overflow out the right side of the parent box. So I had to add a wrapper div to contain the table.
      
 
      

      2. 


 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 





 

  

   




mike_conley




   

   







  

 



 

  


   

   

    
 
mike_conley


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Yaz:

Just one tiny question - modulo that, everything looks good!

-Mike
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 
    
  
    
   
    
    
     
    
      
       reviewboard/htdocs/media/rb/css/reviews.less
       


        (Diff revision 1)


       
      
     
    
        
    
     
     
    

     
     
    

        
   
    
  
    
 
    

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    My CSS is a little rusty, and my LessCSS skills need some tuning, but why exactly do we need to define the height of an anchor here?
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      We need to have a fixed height in order to force the text to "overflow", otherwise the description will occupy multiple lines.

text-overflow: hidden; and white-space: nowrap; will not work. Even though text will "visually" overflow horizontally, it will not "technically" overflow since there is no fixed width. This could work if we had a fixed width that'll change on resize. I tried that approach during the sprint and it was not very reliable.

Having a fixed height was the cleanest approach I could come up with.

There are some jquery plugins that handle ellipsis (http://pvdspek.github.com/jquery.autoellipsis/) but I feel that that would be overkill for this scenario.
      
 
      

      2. 



    2. 
 
 
      
 
      
  
 
      
 
      
  
      Is this issue settled?
      
 
      

      3. 


 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 





 

  

   




mike_conley




   

   







  

 



 

  


   

   

    
 
mike_conley


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Ship It!
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 















  2. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  

 
















 



 

  

   





 ME





   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  







  

   

    Status:
   

   


    Completed

   

  




  

   

    Change Summary:
   

   

    
Committed as 3a7431bd1b