Fix plans table on mobile

static/css/quay.css

@@ -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;
 }

static/directives/plans-table.html

@@ -1,4 +1,21 @@
 <div class="plans-table-element">
+  <ul class="plans-table-list visible-xs">
+    <li ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
+
+        <a class="btn" href="javascript:void(0)"
+           ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
+           ng-click="setPlan(plan)">
+          {{ plan.title }}
+        </a>
+
+      <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>
@@ -21,3 +38,4 @@
       </tr>
     </table>
   </div>
+</div>