From dca6b93592022d3f6377041e9f4661253a560726 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Fri, 17 Apr 2015 12:17:44 -0400
Subject: [PATCH] Responsive new repo page

---
 .../directives/ui/dockerfile-build-form.css   | 15 ++++
 static/css/pages/new-repo.css                 | 10 ++-
 static/css/quay.css                           | 15 ----
 static/directives/dockerfile-build-form.html  | 76 +++++++++----------
 static/partials/new-repo.html                 | 35 ++++++---
 5 files changed, 83 insertions(+), 68 deletions(-)
 create mode 100644 static/css/directives/ui/dockerfile-build-form.css

diff --git a/static/css/directives/ui/dockerfile-build-form.css b/static/css/directives/ui/dockerfile-build-form.css
new file mode 100644
index 000000000..825a6a717
--- /dev/null
+++ b/static/css/directives/ui/dockerfile-build-form.css
@@ -0,0 +1,15 @@
+.dockerfile-build-form table td {
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.dockerfile-build-form input[type="file"] {
+  margin: 0px;
+}
+
+.dockerfile-build-form .help-text {
+  font-size: 13px;
+  color: #aaa;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
\ No newline at end of file
diff --git a/static/css/pages/new-repo.css b/static/css/pages/new-repo.css
index 425e26774..33af66dec 100644
--- a/static/css/pages/new-repo.css
+++ b/static/css/pages/new-repo.css
@@ -11,7 +11,6 @@
 .new-repo .required-plan {
   margin: 10px;
   margin-top: 20px;
-  margin-left: 50px;
 }
 
 .new-repo .required-plan .alert {
@@ -66,6 +65,10 @@
   text-align: center;
 }
 
+.new-repo .repo-option-title {
+  white-space: nowrap;
+}
+
 .new-repo .option-description {
   display: inline-block;
   vertical-align: top;
@@ -88,3 +91,8 @@
 .new-repo .initialize-repo .file-drop {
   margin: 10px;
 }
+
+.new-repo .xs-label {
+  margin-top: 10px;
+  margin-bottom: 6px;
+}
\ No newline at end of file
diff --git a/static/css/quay.css b/static/css/quay.css
index 477b08929..b62e575e0 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -4717,21 +4717,6 @@ i.rocket-icon {
   margin-bottom: -16px;
 }
 
-.dockerfile-build-form table td {
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.dockerfile-build-form input[type="file"] {
-  margin: 0px;
-}
-
-.dockerfile-build-form .help-text {
-  font-size: 13px;
-  color: #aaa;
-  margin-bottom: 20px;
-  padding-left: 22px;
-}
 
 .restart-required {
   position: relative;
diff --git a/static/directives/dockerfile-build-form.html b/static/directives/dockerfile-build-form.html
index 6278bd940..49b383eb1 100644
--- a/static/directives/dockerfile-build-form.html
+++ b/static/directives/dockerfile-build-form.html
@@ -1,7 +1,5 @@
 <div class="dockerfile-build-form-element">
-  <div ng-show="building">
-    <div class="quay-spinner"></div>
-  </div>
+  <div class="cor-loader" ng-show="building"></div>
   <div ng-show="uploading">
     <span class="message">Uploading file {{ upload_file }}</span>
     <div class="progress progress-striped active">
@@ -11,44 +9,40 @@
   </div>
 
   <div ng-show="!uploading && !building">
-    <table>
-      <tr>
-        <td style="vertical-align: middle;">Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</td>
-        <td><input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
-      </tr>
-      <tr>
-        <td></td>
-        <td>
-          <div class="help-text">If an archive, the Dockerfile must be at the root</div>
-        </td>
-      </tr>
-      <tr>
-        <td>Base Image Pull Credentials:</td>
-        <td>
-          <!-- Select credentials -->
-          <div class="btn-group btn-group-sm">
-            <button type="button" class="btn btn-default"
-                    ng-class="is_public ? 'active btn-info' : ''"
-                    ng-click="is_public = true">
-              None
-            </button>
-            <button type="button" class="btn btn-default"
-                    ng-class="is_public ? '' : 'active btn-info'"
-                    ng-click="is_public = false">
-              <i class="fa fa-wrench"></i>
-              Robot account
-            </button>
-          </div>
+    <dl>
+      <dt>Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</dt>
+      <dd>
+        <input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
+        <div class="help-text">If an archive, the Dockerfile must be at the root</div>
+      </dd>
+    </dl>
 
-          <!-- Robot Select -->
-          <div ng-show="!is_public" style="margin-top: 10px">
-            <div class="entity-search" namespace="repository.namespace"
-                 placeholder="'Select robot account for pulling...'"
-                 current-entity="pull_entity"
-                 allowed-entities="['robot']"></div>
-          </div>
-        </td>
-      </tr>
-    </table>
+    <dl>
+      <dt>Base Image Pull Credentials:</dt>
+      <dd style="margin: 20px;">
+        <!-- Select credentials -->
+        <div class="btn-group btn-group-sm">
+          <button type="button" class="btn btn-default"
+                  ng-class="is_public ? 'active btn-info' : ''"
+                  ng-click="is_public = true">
+            None
+          </button>
+          <button type="button" class="btn btn-default"
+                  ng-class="is_public ? '' : 'active btn-info'"
+                  ng-click="is_public = false">
+            <i class="fa fa-wrench"></i>
+            Robot account
+          </button>
+        </div>
+
+        <!-- Robot Select -->
+        <div ng-show="!is_public" style="margin-top: 10px">
+          <div class="entity-search" namespace="repository.namespace"
+               placeholder="'Select robot account for pulling...'"
+               current-entity="pull_entity"
+               allowed-entities="['robot']"></div>
+        </div>
+      </dd>
+    </dl>
   </div>
 </div>
diff --git a/static/partials/new-repo.html b/static/partials/new-repo.html
index c8e0b3369..c2a01ce34 100644
--- a/static/partials/new-repo.html
+++ b/static/partials/new-repo.html
@@ -31,8 +31,13 @@
             <div class="section">
               <div class="new-header">
                 <span class="namespace-selector-header">
+
+                  <span class="visible-xs xs-label">Namespace:</span>
                   <span class="namespace-selector" user="user" namespace="repo.namespace" require-create="true"></span>
-                  <span class="slash">/</span>
+
+                  <span class="slash hidden-xs">/</span>
+
+                  <span class="visible-xs xs-label">Repository Name:</span>
                   <span class="name-container">
                     <input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name"
                            required autofocus data-trigger="manual" data-content="{{ createError }}" data-placement="right" ng-pattern="/^[.a-z0-9_-]+$/">
@@ -56,23 +61,28 @@
         <div class="row">
 
           <div class="col-md-12">
-            <div class="section-title">Repository Visibility</div>
             <div class="section">
+              <div class="section-title">Repository Visibility</div>
+              <br>
               <div class="repo-option">
-                <input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
-                <i class="fa fa-unlock fa-large" data-title="Public Repository"></i>
+                <div class="repo-option-title">
+                  <input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
+                  <i class="fa fa-unlock fa-large" data-title="Public Repository"></i>
+                  <label for="publicrepo"><strong>Public</strong></label>
+                </div>
 
                 <div class="option-description">
-                  <label for="publicrepo"><strong>Public</strong></label>
                   <span class="description-text">Anyone can see and pull from this repository. You choose who can push.</span>
                 </div>
               </div>
               <div class="repo-option">
-                <input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
-                <i class="fa fa-lock fa-large" data-title="Private Repository"></i>
+                <div class="repo-option-title">
+                  <input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
+                  <i class="fa fa-lock fa-large" data-title="Private Repository"></i>
+                  <label for="privaterepo"><strong>Private</strong></label>
+                </div>
 
                 <div class="option-description">
-                  <label for="privaterepo"><strong>Private</strong></label>
                   <span class="description-text">You choose who can see, pull and push from/to this repository.</span>
                 </div>
               </div>
@@ -142,11 +152,14 @@
 
           <div class="col-md-12">
             <div class="section">
-              <div class="section-title">Upload Dockerfile or Archive</div>
+              <div class="section-title">Initialize from Dockerfile</div>
               <div style="padding-top: 20px;">
                 <div class="initialize-repo">
-                  <div class="dockerfile-build-form" repository="createdForBuild || repo" upload-failed="handleBuildFailed(message)"
-                       build-started="handleBuildStarted()" build-failed="handleBuildFailed(message)" start-now="createdForBuild"
+                  <div class="dockerfile-build-form" repository="createdForBuild || repo"
+                       upload-failed="handleBuildFailed(message)"
+                       build-started="handleBuildStarted()"
+                       build-failed="handleBuildFailed(message)"
+                       start-now="createdForBuild"
                        is-ready="hasDockerfile" uploading="uploading" building="building"></div>
                 </div>
               </div>