[buddypress-trac] [BuddyPress Trac] #5566: Responsive member directory layouts

[buddypress-trac]

#5566: Responsive member directory layouts
---------------------------+------------------------------
 Reporter:  sooskriszta    |       Owner:
     Type:  enhancement    |      Status:  assigned
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Template Pack  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:                 |
---------------------------+------------------------------

Comment (by sooskriszta):

 Awesome!

 Floating divs should take care of layouts. (I've included below the sample
 CSS from the site included in OP.

 However, surely we should also take a look at pagination...while on a 21"
 wide-screen HD monitor may accommodate 30 profiles (say 6 columns x 5
 rows), there's no reason to download 30 profiles on a single-column layout
 mobile screen. We should take care of that while making the Ajax queries.

 Here's the CSS from http://www.gmat-zone.com/gmat-tutors

 {{{
 .profilecontainer {
   width: 100%;
 }

 .trainerprofile {
   width: 190px;
   float: left;
   box-shadow: 5px 5px 5px #888888;
   margin: 10px 10px 10px 5px;
 }

 .trainerphoto {
   padding: 5px 5px 5px 45px;
 }

 .trainername {
   text-align: center;
   font-weight: bold;
 }

 .trainergmat {
   text-align: center;
   font-weight: bold;
 }

 .trainerschool {
   text-align: center;
 }

 .emptydiv {
   clear: both;
 }
 }}}

 The HTML looks somewhat like this:
 {{{
 <div class="profilecontainer">
 <div class="trainerprofile">
 <div class="trainerphoto"><img src="images/trainer_vincent2.JPG"
 border="0" title="Vincent hails from Wheeling, West Virginia, USA, and
 studied Philosophy and Mathematics at Georgetown University. While a
 student at Georgetown, Vince was an SAT Trainer for three years with a
 leading test prep company in the Washington, D.C. area. He also worked as
 a researcher for the Congressional Research Service, providing reports at
 the direct request of United States Members of Congress. For the summers
 of 2010 and 2011, Vince travelled to rural Hungary and Mauritius
 respectively, teaching English as a volunteer with the NGO Learning
 Enterprises. He hopes to continue travelling and engaging in new cultures
 while living in Mumbai. Vincent enjoys travelling, reading, philosophical
 debates, and mathematical puzzles. He has written multiple academic papers
 and has also spent six months studying overseas at the University of
 Edinburgh, Scotland." /></div>
 <div class="trainername">Vince</div>
 <div class="trainergmat">GMAT: 710</div>
 <div class="trainerschool">Georgetown University</div>
 </div>
 <div class="emptydiv"> </div>
 </div>
 }}}

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/5566#comment:6>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac