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.
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. 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.
  3. 
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 





 

  

   




mike_conley




   

   







  

 



 

  


   

   

    
 
mike_conley


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Yaz:

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

-Mike
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    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:
  

  Closed (submitted)

  
 




 
Change Summary:

 
Committed as 3a7431bd1b





 


 










  

 









     

    

   

  

  

   
   Loading...