content/en_exploreMembership.php

<?php
/*******************************************************************************
 * Copyright (c) 2015 Eclipse Foundation and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *    Christopher Guindon (Eclipse Foundation) - initial API and implementation
 *******************************************************************************/
 ?>
 <style>
@media (min-width: 767px)  {
  .content-nav-tab-heading {
    display: none;
  }
}
</style>
<div class="row">
  <div id="content" class="col-xs-24">
    <div class="margin-bottom-20">
      <!-- Nav tabs -->
      <div class="row content-nav-tab-toggle">
        <div class="visible-xs">
          <div class="vertical-align">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-member-levels">
              <p class="nav-label"><strong>Explore Members</strong></p>
              <div class="hamburger-wrapper">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="navbar-collapse collapse" id="navbar-member-levels">
          <ul class="nav nav-tabs solstice-tabs content-nav-tab" role="tablist">
            <?php foreach($members as $key => $value):?>
              <?php if (empty($value['members'])): ?>
                <?php continue; ?>
              <?php endif; ?>
              <li role="presentation" class="<?php print $value['list_class'];?>">
                <a class="background-grey" href="#tab-<?php print $key;?>" data-toggle="tab" aria-controls="tab-<?php print $key;?>" role="tab" data-content-target="#members-content">
                  <?php print ucfirst($value['level']); ?> Members
                </a>
              </li>
            <?php endforeach;?>
            <li role="presentation">
              <a class="background-grey" href="#tab-all-members" id="showalltabs" data-content-target="#members-content">
                All Members
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content content-nav-tab-body padding-40" id="members-content">
        <?php foreach($members as $key => $value):?>
          <?php if (empty($value['members'])): ?>
            <?php continue; ?>
          <?php endif; ?>
          <div role="tabpanel" class="tab-pane <?php print $value['content_class'];?>" id="tab-<?php print $key;?>">
            <h2 class="h3 margin-top-0 content-nav-tab-heading content-nav-tab-all-show"><?php print ucfirst($value['level']); ?> Members</h2>
            <div class="row">
              <?php foreach ($value['members'] as $mkey => $mvalue):?>
              <div class="col-xs-24 col-sm-12 col-md-8 margin-bottom-20">
                <div class="bordered-box text-center" >
                  <div class="box-header background-light-grey vertical-align" data-mh="m-header">
                    <h3 class="h4 margin-0"><?php print $mvalue['title_link']?></h3>
                  </div>
                  <div class="box-body vertical-align" style="height: 160px">
                    <div class="image-container">
                      <?php if(!empty($mvalue['id'])): ?>
                        <a href="/membership/showMember.php?member_id=<?php print $mvalue['id'] ?>" title="<?php print $mvalue['name'] ?>">
                      <?php endif; ?>
                      <img src="<?php print $mvalue['small_logo_src'] ?>" class="img-responsive margin-auto" alt="<?php print $mvalue['name'] ?> logo">
                      <?php if(!empty($mvalue['id'])): ?>
                        </a>
                      <?php endif; ?>
                    </div>
                  </div>
                </div>
              </div>
            <?php endforeach;?> <!-- End of member box -->
            </div>
          <div class="margin-top-40 vertical-align text-left content-nav-tab-all-hide">
          <?php 
          // check if has printed last tab nav (needed for spacing on last tab)
          $has_printed_last = FALSE;
          $has_printed_first = FALSE;
          foreach($members as $tab_key => $value): ?>
            <?php if (empty($value['members'])): ?>
              <?php continue; ?>
            <?php endif; ?>
            <?php if ($tab_key != $key && !$has_printed_first): ?>
              <?php $prev_key = $tab_key; ?>
            <?php elseif ($tab_key == $key): ?>
              <?php if (!empty($prev_key)): ?>
                <a class="hidden-xs col-sm-6 col-md-8 text-left alt-tab-toggle" href="#tab-<?php print $prev_key ?>" data-content-target="#members-content">&lt; <?php print ucfirst($prev_key); ?> Members</a>
                <a class="col-xs-18 col-sm-12 col-md-8 text-center btn btn-primary" href="#">Become a Member</a>
              <?php else: ?>
                <a class="col-xs-18 col-sm-12 col-sm-offset-6 col-md-offset-8 col-md-8 text-center btn btn-primary" href="#">Become a Member</a>
              <?php endif; ?>
              <?php $has_printed_first = TRUE; ?>
            <?php else: ?>
              <a class="hidden-xs col-sm-6 col-md-8 text-right alt-tab-toggle" href="#tab-<?php print $tab_key ?>" data-content-target="#members-content"><?php print ucfirst($value['level']); ?> Members &gt;</a>
              <?php $has_printed_last = TRUE; ?>
              <?php break; ?>
            <?php endif; ?>
          <?php endforeach;?>
          <?php if (!$has_printed_last): ?>
            <a class="hidden-xs col-sm-6 col-md-8 text-right alt-tab-toggle" id="showalltabs" data-content-target="#members-content" href="#tab-all-members">All Members &gt;</a>
          <?php endif; ?>
          </div>
        </div>
      <?php endforeach;?> <!-- End of tabpanel -->
    </div>
  </div>
</div>