Customer Care Customer Dashboard
Showcase of responsive tab panel in the `c-content-meta` container
Do not use the markup below as copy-paste source for a standard dashboard. This example is meant to demonstrate responsive tab panels.
See the comments in the markup for contrast to the standard tab panel component.
Most notable inclusions:
- `c-content-main--responsiveMeta`
- `is-open` attribute specified on `inv-tab-panel`
- `c-tabContent` with `is-open` `ng-class`
- The parent controller's `on-tab-selected` function should expose and modify a new property for content openness. For Instance:
if (tab.id === selectedTab.id) { $scope.tabPanelShouldOpen = tab.active ? !$scope.tabPanelShouldOpen : true; } tab.active = tab.id === selectedTab.id;
Account Overview
:
ACC400020020
- HTML
<div class="u-pv+"> Do not use the markup below as copy-paste source for a standard dashboard. This example is meant to demonstrate responsive tab panels. See the comments in the markup for contrast to the standard tab panel component. Most notable inclusions: <ul> <li>`c-content-main--responsiveMeta`</li> <li>`is-open` attribute specified on `inv-tab-panel`</li> <li>`c-tabContent` with `is-open` `ng-class`</li> <li>The parent controller's `on-tab-selected` function should expose and modify a new property for content openness. For Instance:</li> </ul> <pre class="prettyprint"> if (tab.id === selectedTab.id) { $scope.tabPanelShouldOpen = tab.active ? !$scope.tabPanelShouldOpen : true; } tab.active = tab.id === selectedTab.id; </pre> </div> <div style="height: 600px;" ng-controller="dashboardExampleController"> <div class="t-content c-content"> <inv-app-theme app-id="appId"></inv-app-theme> <div class="c-content-container u-sizeFullHeight"> <div class="c-content-headingContainer"> <div class="c-heading"> <div class="c-heading-titleArea"> <div class="c-heading-label">Account Overview</div> <div class="c-heading-label u-flex u-flexBaseline"> <span>:</span> <div class="c-careAccountSwitcher"> <div class="c-careAccountSwitcher-label"> <span>ACC400020020</span> </div> </div> </div> </div> </div> </div> <div class="c-content-main c-content-main--responsiveMeta"> <div class="c-content-innerMain"> <div class="c-content-innerContainer c-content-innerContainer--flush"> <div class="u-p++"> <div class="c-customerDashboard-widgetRow"> <account-balance-widget class="c-customerDashboard-primaryWidget" most-recent-invoice="CustomerDashboard.state.mostRecentInvoice"> <div class="c-expandableSection c-dashboardWidget c-accountBalance l-vertical is-expanded"> <div class="c-expandableSection-header l-vertical-noShrink"> <inv-icon class="c-expandableSection-logo" glyph="'account-balance'"></inv-icon> <div class="c-expandableSection-heading">Account Balance</div> </div> <div class="c-expandableSection-content l-vertical-grow"> <div class="c-accountBalance-detailsContainer"> <div class="u-flex u-flexColumn u-flexSpaced"> <div class="c-labeledBalance"> <div class="c-labeledBalance-label">Total Balance</div> <div class="c-labeledBalance-balance">$0.00</div> </div> </div> </div> </div> </div> </account-balance-widget> </div> </div> <div class="u-p++"> <div class="c-expandableSection c-dashboardWidget c-loadingIndicator-containment l-vertical is-expanded"> <div class="c-expandableSection-header l-vertical-noShrink"> <div class="c-expandableSection-heading">Active Subscriptions</div> </div> <div class="c-expandableSection-content"> <div class="u-flex"> <div class="u-flexItemGrow u-pr"> <div> <div class="c-dashboardWidget-label">HBO Boost Subscription - HBO Boost - $15.00 Live Subscription</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="c-dashboardWidget-labelMeta">HBO Boost - $15.00 Live Subscription</span> </div> </div> <div class="u-mt++"> <div class="c-definitions u-sizeFullWidth"> <div class="c-definition"> <div class="c-definition-term" >Reminder Date</div> <div class="c-definition-value" >2/27/17 2:49 PM</div> </div> <div class="c-definition"> <div class="c-definition-term" >Fulfillment Date</div> <div class="c-definition-value" >2/28/17 2:49 PM</div> </div> <div class="c-definition"> <div class="c-definition-term" >Contract End Date</div> <div class="c-definition-value" >N/A</div> </div> </div> </div> <div class="u-mt++"> <div class="u-flex"> <div class="u-flex ng-scope" > <a class="c-link u-mr+" >Full Details</a> <div class="c-divider u-mr+ ng-scope" ng-if="!$last"></div> </div> <div class="u-flex ng-scope" > <a class="c-link u-mr+" >Payment History</a> </div> </div> </div> </div> <div class="c-renewalColumn u-flexItemNoShrink u-size3of12"> <div class="c-renewalColumn-label" >Renewal Amount</div> <div class="c-renewalColumn-amount" auto-fit-text="" style="font-size: 50px;">$15.00</div> <div> <span class="ng-binding">Renews</span> <span class="ng-binding">Live Linear Monthly Subscription Charge</span> </div> <div class="c-renewalColumn-date ng-scope" style=""> <span ng-bind="$ctrl.getSubscriptionRenewalText()" class="ng-binding">Automatically On</span> <span class="ng-binding">2/28/17</span> </div> </div> </div> <div> <div class="c-divider c-divider--horizontal u-mt++ u-mb+"></div> <div class="c-scrollableHorizontalList c-scrollableHorizontalList--interactive c-scrollableHorizontalList--text"> <div class="c-scrollableHorizontalList-track u-sizeFullHeight"> <div class="c-scrollableHorizontalList-list c-dashboardWidget-list u-sizeFullHeight"> <div class="c-scrollableHorizontalList-listItem u-sizeFullHeight u-size1of3 ng-scope is-active" ng-class="{'is-active': subscription.id === $ctrl.state.selectedSubscription.Id}" style=""> <div class="u-pv+"> <div class="c-dashboardWidget-label" >HBO Boost Subscription - HBO Boost - $15.00 Live Subscription</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt" >HBO Boost - $15.00 Live Subscription</div> </div> <div class="u-pv+"> <div class="c-dashboardWidget-label"> <span class="ng-binding">Renews</span> <span class="ng-binding">Live Linear Monthly Subscription Charge</span> </div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="ng-binding">Automatically On</span> <span class="ng-binding">2/28/17</span> </div> </div> </div><div class="c-scrollableHorizontalList-listItem u-sizeFullHeight u-size1of3 ng-scope" ng-class="{'is-active': subscription.id === $ctrl.state.selectedSubscription.Id}" > <div class="u-pv+"> <div class="c-dashboardWidget-label" >Subscription Bundle - Sub Plan A</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt" >Sub Plan A</div> </div> <div class="u-pv+"> <div class="c-dashboardWidget-label"> <span class="ng-binding">Renews</span> <span class="ng-binding">SubTestA</span> </div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="ng-binding">Automatically On</span> <span class="ng-binding">7/20/17</span> </div> </div> </div><div class="c-scrollableHorizontalList-listItem u-sizeFullHeight u-size1of3 ng-scope" ng-class="{'is-active': subscription.id === $ctrl.state.selectedSubscription.Id}" > <div class="u-pv+"> <div class="c-dashboardWidget-label" >Baseball QH Subscription Bundle - HD QH Subscription Bundle</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt" >HD QH Subscription Bundle</div> </div> <div class="u-pv+"> <div class="c-dashboardWidget-label"> <span class="ng-binding">Renews</span> <span class="ng-binding">Quarter Hourly</span> </div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="ng-binding">Automatically On</span> <span class="ng-binding">7/20/17</span> </div> </div> </div><div class="c-scrollableHorizontalList-listItem u-sizeFullHeight u-size1of3 ng-scope" ng-class="{'is-active': subscription.id === $ctrl.state.selectedSubscription.Id}" > <div class="u-pv+"> <div class="c-dashboardWidget-label" >Subscription 11 - 333053 Subscription</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt" >333053 Subscription</div> </div> <div class="u-pv+"> <div class="c-dashboardWidget-label"> <span class="ng-binding">Renews</span> <span class="ng-binding">Hourly</span> </div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="ng-binding">Automatically On</span> <span class="ng-binding">8/16/17</span> </div> </div> </div><div class="c-scrollableHorizontalList-listItem u-sizeFullHeight u-size1of3 ng-scope" ng-class="{'is-active': subscription.id === $ctrl.state.selectedSubscription.Id}" > <div class="u-pv+"> <div class="c-dashboardWidget-label" >Stacking coupon for 3+6 quarter hour - Disney redeems both coupon codes (3+6) Quarter hour</div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt" >Disney redeems both coupon codes (3+6) Quarter hour</div> </div> <div class="u-pv+"> <div class="c-dashboardWidget-label"> <span class="ng-binding">Renews</span> <span class="ng-binding">Quarter Hourly</span> </div> <div class="c-dashboardWidget-label c-dashboardWidget-label--meta u-mt"> <span class="ng-binding">Automatically On</span> <span class="ng-binding">8/15/17</span> </div> </div> </div> </div> </div> </div> <div class="u-mt++"> <a class="c-link">View All 6 Subscriptions</a> </div> </div> </div> </div> </div> </div> </div> <div class="c-content-meta c-content-meta--thin"> <div class="c-content-innerContainer c-content-innerContainer--flush l-vertical"> <!-- inv-tab-panel w/ `is-open` specified --> <inv-tab-panel tabs="tabs" on-tab-selected="tabSelected" bottom-highlight="true" is-open="tabPanelShouldOpen"> </inv-tab-panel> <!-- c-tabContent w/ `is-open` ng-class --> <div class="l-vertical-scrollParent c-tabContent" ng-class="{'is-open': tabPanelShouldOpen}"> <div ng-show="tabs[0].active" class="l-vertical-scrollParent" style=""> <div class="l-vertical-growAndScroll u-sizeFull"> <div class="u-mt++ u-textCenter"> Empty </div> </div> </div> <div ng-show="tabs[1].active" class="l-vertical-scrollParent"> <div class="l-vertical-growAndScroll u-sizeFull u-p"> <!-- Long list to showcase internal scrolling --> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> <div class="c-definitions c-definitions--long"> <div class="c-definition"> <div class="c-definition-term">username</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> <div class="c-definition"> <div class="c-definition-term">email</div> <div class="c-definition-value">jonathanrahemer@gmail.com</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>