Skip to:
Content

BuddyPress.org

Opened 10 years ago

Closed 7 years ago

Last modified 7 years ago

#5566 closed enhancement (wontfix)

Responsive member directory layouts

Reported by: sooskriszta's profile 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 10 years ago.
member-directory-mobile.png (27.1 KB) - added by sooskriszta 10 years ago.

Download all attachments as: .zip

Change History (15)

#1 @sooskriszta
10 years ago

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

#2 @sooskriszta
10 years ago

  • Cc vivek@… added

#3 @sooskriszta
10 years ago

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

#4 @boonebgorges
10 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
10 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
10 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 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>
Version 0, edited 10 years ago by sooskriszta (next)

#7 @mercime
10 years ago

  • Cc mercijavier@… added

#8 @espellcaste
10 years ago

  • Cc espellcaste@… added

#9 @DJPaul
10 years ago

  • Milestone changed from Awaiting Review to Future Release

#10 @DJPaul
9 years ago

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

#11 @DJPaul
8 years ago

  • Component changed from Appearance - Template Parts to Templates

#12 @DJPaul
7 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
7 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.