From 5a0277b4654b64f178e76b11aa01ee1cfd7028de Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Mon, 12 Jan 2015 12:17:00 -0500
Subject: [PATCH] Fix plans table on mobile

---
 static/css/quay.css                | 16 ++++++++++
 static/directives/plans-table.html | 50 ++++++++++++++++++++----------
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 4df625503..bc23177df 100644
--- a/static/css/quay.css
+++ b/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;
 }
diff --git a/static/directives/plans-table.html b/static/directives/plans-table.html
index 2870a06de..d4badb3c6 100644
--- a/static/directives/plans-table.html
+++ b/static/directives/plans-table.html
@@ -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>