B2B UI Ideas

Mockups of some UI ideas for the new B2B.

by emgee

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <div class="page">
    <div id="ww-package-container">
      <div class="ui-bar ui-bar-b" id="ww-package-header">
          <h1 id="ww-package-header">Your Package</h1>
      </div>     
      <div id="ww-package-section-title" class="ui-bar ui-bar-e">
        DEVICE
      </div>
      <div id="ww-package-entry" class="ui-bar ui-bar-c">
        Apple iPhone 4S 16GB - Black<div id="ww-package-entry-price">QTY: 1 Price: $149.99 ea</div>
      </div>
      <div id="ww-package-section-title" class="ui-bar ui-bar-e">
        WARRANTY
      </div>
      <div id="ww-package-entry" class="ui-bar ui-bar-c">
        AppleCare+ for iPhone<div id="ww-package-entry-price">QTY: 1 Price: $99.99 ea</div>
      </div>  
      <div id="ww-package-section-title" class="ui-bar ui-bar-e">
        ACCESSORIES
      </div>
      <div id="ww-package-entry" class="ui-bar ui-bar-c">
        Griffin USB to Dock Connector Coiled Cable<div id="ww-package-entry-price">QTY: 1 Price: $21.24 ea</div>
      </div>    
      <div id="ww-package-entry" class="ui-bar ui-bar-c">
        Qmadix iPhone Car Charger<div id="ww-package-entry-price">QTY: 1 Price: $25.49 ea</div>
      </div>      
    </div>
  
  
  <div id="ww-plans-container">   
    <div class="ww-plans-group">
      <div class="ui-bar ui-bar-a" id="ww-plans-header">
          <h1>VOICE &amp; DATA BUNDLE PLANS</h1>
      </div>     
      
      <!-- PLAN ENTRY 1 -->
      <div data-role="collapsible" data-theme="b" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-content-theme="e" data-collapsed="true" data-mini="true" class="ww-plan-entry">
        <h3>
          Unlimited Plan for Smartphone 55
          <span class="ww-price-bubble">$55.00/month</span>                    
        </h3> 
        <div class="ww-plan-desc">This rate plan...

CSS

/* margin: top right bottom left; */
body
{
  padding:0px;
  margin:0px;
  color:#ffffff;
  background-color:#ffffff;
}

/* define the body to be 60X the default font-size (default, unless overridden, is 16px) */
.page
{
  width:60em;
  max-width:100%;
  min-width:450px;
  margin:0 auto;
  background: #ddd;
}

#ww-plans-container{float:left; width:80%;}
.ww-plans-group{margin-left:1.5em;}

#ww-package-container{float:left; width:20%;}
#ww-package-header{font-weight:bold; font-size:0.9em; text-align:center;}
#ww-package-section-title{font-size:0.7em; text-align:center;}
#ww-package-entry{ font-size:0.7em; clear:both;}
#ww-package-entry-price{ font-size:0.8em; float:right;}

#ww-plans-header{font-weight:bold; font-size:0.9em; text-align:left; margin-bottom:0.8em; margin-top:0.8em;}
.ww-plan-entry{padding:0px 0px 5px 0px; margin:0px; clear:both;}
.ww-price-bubble {float:right; color::#ffffff; padding:0px; font-size:0.9em;}
.ww-plan-desc {font-size:0.8em;}
.ww-plan-select-btn {float:right;}
.ww-plan-view-btn {}
.ww-plan-entry-button-bar {margin:5px 0px 0px 0px; padding:0px;}

/* add margin:0 auto; to center the popup properly, jQuery mobile doesn't seem to do it properly when a width is set on the pop-up container */
#plan-details-popup{ margin:0 auto; width:60%; min-width:}

JavaScript

$(".ww-plan-view-btn").attr("data-position-to", "window").attr("data-transition", "pop");

$('.ww-plan-view-btn').click(function() {
  $( "#plan-details-popup" ).popup( "open" );
  return false;
});