Skip to:
Content

BuddyPress.org

Opened 6 years ago

Closed 2 years ago

Last modified 2 years ago

#5566 closed enhancement (wontfix)

Responsive member directory layouts

Reported by: sooskriszta Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Templates Keywords:
Cc: vivek@…, hnla, karmatosed, mercijavier@…, espellcaste@…

Description

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

Attachments (2)

member-directory.png (53.6 KB) - added by sooskriszta 6 years ago.
member-directory-mobile.png (27.1 KB) - added by sooskriszta 6 years ago.

Download all attachments as: .zip

Change History (15)

#1 @sooskriszta
6 years ago

  • Owner set to hnla
  • Status changed from new to assigned

#2 @sooskriszta
6 years ago

  • Cc vivek@… added

#3 @sooskriszta
6 years ago

  • Summary changed from Responsive member directories to Responsive member directory layouts

#4 @boonebgorges
6 years ago

  • Cc hnla karmatosed added
  • Owner hnla deleted

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.

#5 @hnla
6 years ago

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

#6 @sooskriszta
6 years ago

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>
Last edited 6 years ago by sooskriszta (previous) (diff)

#7 @mercime
6 years ago

  • Cc mercijavier@… added

#8 @espellcaste
6 years ago

  • Cc espellcaste@… added

#9 @DJPaul
5 years ago

  • Milestone changed from Awaiting Review to Future Release

#10 @DJPaul
4 years ago

  • Component changed from Appearance - Template Pack to Appearance - Template Parts

#11 @DJPaul
3 years ago

  • Component changed from Appearance - Template Parts to Templates

#12 @DJPaul
2 years ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from assigned to closed

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.

#13 @DJPaul
2 years ago

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.

Note: See TracTickets for help on using tickets.