Fix plans table on mobile

This commit is contained in:
Joseph Schorr 2015-01-12 12:17:00 -05:00
parent 42ea3b835c
commit 5a0277b465
2 changed files with 50 additions and 16 deletions

View file

@ -3547,6 +3547,22 @@ p.editable:hover i {
font-size: 16px;
}
.plans-table ul {
margin-top: 10px;
padding: 0px;
}
.plans-table ul li {
padding: 4px;
margin: 0px;
}
.plans-table ul li .plan-info {
padding: 4px;
}
.repo-breadcrumb-element .crumb {
cursor: pointer;
}

View file

@ -1,23 +1,41 @@
<div class="plans-table-element">
<table class="table table-hover plans-table-table" ng-show="plans">
<thead>
<th>Plan</th>
<th>Private Repositories</th>
<th style="min-width: 85px">Price</th>
<th></th>
</thead>
<ul class="plans-table-list visible-xs">
<li ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
<tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
<td>{{ plan.title }}</td>
<td>{{ plan.privateRepos }}</td>
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
<td class="controls">
<a class="btn" href="javascript:void(0)"
ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
ng-click="setPlan(plan)">
{{ currentPlan == plan ? 'Selected' : 'Choose' }}
{{ plan.title }}
</a>
</td>
</tr>
</table>
<div class="plan-info">
${{ plan.price / 100 }} / month -
{{ plan.privateRepos }} repositories
</div>
</li>
</ul>
<div class="hidden-xs">
<table class="table table-hover plans-table-table" ng-show="plans">
<thead>
<th>Plan</th>
<th>Private Repositories</th>
<th style="min-width: 85px">Price</th>
<th></th>
</thead>
<tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
<td>{{ plan.title }}</td>
<td>{{ plan.privateRepos }}</td>
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
<td class="controls">
<a class="btn" href="javascript:void(0)"
ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
ng-click="setPlan(plan)">
{{ currentPlan == plan ? 'Selected' : 'Choose' }}
</a>
</td>
</tr>
</table>
</div>
</div>