Bug 563897 - Redesign the Explore our Members page

Change-Id: I1f71aabca01befa29924f8aa80e3389787cdb5ff
Signed-off-by: Martin Lowe <martin.lowe@eclipse-foundation.org>

2 files changed, 125 insertions, 41 deletions

diff --git a/content/en_exploreMembership.php b/content/en_exploreMembership.php
index 6e64ea5..fa0904f 100644
--- a/content/en_exploreMembership.php
+++ b/content/en_exploreMembership.php
@@ -10,57 +10,113 @@
  *    Christopher Guindon (Eclipse Foundation) - initial API and implementation
  *******************************************************************************/
  ?>
+ <style>
+@media (min-width: 767px)  {
+  .content-nav-tab-heading {
+    display: none;
+  }
+}
+</style>
 <div class="row">
-  <div class="col-xs-24">
-    <h1><?php print $pageTitle; ?></h1>
-  </div>
-</div>
-<div class="row">
-<div class="col-md-14 col-lg-16">
-  <div class="row tabs-sidebar">
-    <div class="col-sm-6">
-      <nav class="nav-sidebar">
-        <ul class="nav tabs">
-          <?php foreach($members as $key => $value):?>
-            <?php if (!empty($value['members'])):?>
-              <li class="<?php print $value['list_class'];?>">
-                <a class="text-uppercase text-center" style="<?php print ($value['level'] === 'strategic' ? 'color:#f7941e;' : ''); ?>" href="#tab-<?php print $key;?>" data-toggle="tab">
-                  <strong><?php print $value['level']?> Members</strong>
+  <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 endif; ?>
-          <?php endforeach;?>
-        </ul>
-      </nav>
-      <p class="text-center"><a id="showalltabs" href="#allmembers" class="btn btn-warning">All members</a></p>
-    </div>
-    <div class="col-sm-18">
-      <!-- tab content -->
-      <div class="tab-content background-white no-border">
+            <?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'])):?>
-            <div class="<?php print $value['content_class'];?>" id="tab-<?php print $key;?>">
-              <h3 class="block-heading"><?php print $value['title'];?></h3>
+          <?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="row clearfix">
-                  <div class="col-md-6">
-                  <?php print $mvalue['small_logo_link']?>
+              <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="col-md-18">
-                    <h4 class="h5 margin-top-0 fw-600">
-                      <?php print $mvalue['title_link']?>
-                    </h4>
-                    <p><?php print $mvalue['body']?></p>
+                  <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>
-              <?php endforeach;?>
+              </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; ?>
-        <?php endforeach;?>
-      </div>
-      <h2 class="h4 text-center">Learn about our many <a href="/corporate_sponsors/">corporate sponsors.</a></h2>
+          </div>
+        </div>
+      <?php endforeach;?> <!-- End of tabpanel -->
     </div>
   </div>
-</div>
-<?php include_once 'en_sidebar.php';?>
 </div>
\ No newline at end of file
diff --git a/exploreMembership.php b/exploreMembership.php
index 6a12bd0..b4fb9fa 100644
--- a/exploreMembership.php
+++ b/exploreMembership.php
@@ -32,11 +32,39 @@ $hide_tips = TRUE;
 $show_corporate_sponsors_block = TRUE;

 $members = $Membership->fetchProfile();

 

+ob_start();

+?>

+<div class="jumbotron featured-jumbotron margin-bottom-0">

+  <div class="container">

+    <div class="row">

+      <div class="col-md-22 col-md-offset-1 col-sm-20 col-sm-offset-2">

+        <h1><?php print $pageTitle; ?></h1>

+        <p>Meet the Eclipse Foundation members and learn more about the products and services they provide.</p>

+        <ul class="hidden-xs list-inline margin-top-30">

+          <li><a class="btn btn-primary" href="#">Become a Member</a></li>

+          <li><a class="btn btn-primary" href="/org/workinggroups/explore.php">Explore Working Groups</a></li>

+        </ul>

+        <ul class="visible-xs list-inline margin-top-30">

+          <li class="col-xs-20 col-xs-offset-2"><a class="btn btn-primary btn-wide" href="#">Become a Member</a></li>

+          <li class="col-xs-20 col-xs-offset-2"><a class="btn btn-primary btn-wide" href="/org/workinggroups/explore.php">Explore Working groups</a></li>

+        </ul>

+      </div>

+    </div>

+  </div>

+</div>

+<?php

+$extra_header_html = ob_get_clean();

+$Theme->setExtraHeaderHtml($extra_header_html);

+

 // Place your html content in a file called content/en_pagename.php

 ob_start();

 include("content/en_" . $App->getScriptName());

 $html = ob_get_clean();

 $Theme->setHtml($html);

 

+// remove breadcrumb margin bottom

+$Theme->removeAttributes('breadcrumbs', 'breadcrumbs-default-margin');

+$Theme->setAttributes('header-wrapper', 'header-default-bg-img');

+$Theme->setAttributes('main', 'background-white');

 // Generate the web page

 $Theme->generatePage();
\ No newline at end of file