Responsive member directory layouts

[sooskriszta]

Would be a good first step towards responsiveness if instead of specifying a 2-column layout for member directories, we do "fixed width" profile "snippets" (wrapped in left-floated divs)so that based on the screen width, the number of columns changes automatically, e.g. ​http://www.gmat-zone.com/gmat-tutors

[boonebgorges]

I believe this idea is already what's in place in the in-progress buddypress-templates project (​https://github.com/karmatosed/buddypress-templates/), though I'll let hnla and/or karmatosed speak more to it. If so, let's consider closing this ticket in favor of the master ticket #4952.

[hnla]

@sooskriszta Yes as Boone says, responsiveness is a factor we try and consider with all templates moving forward although this aspect is largely dictated by any given theme but our templates ought to be able to work to a fluid or elastic paradigm even if they do find themselves in a less than responsive theme - in reality simply floating or inline-block would work albeit to an unspecified row number in a fluid layout..

The notion of wrapping blocks in a floated parent isn't a bad one, it's similar to a section of a layout I did recently for an em based set of breakpoints.

[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 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>

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.