From 758158391c1c1043de6b6a70faeaf9f170c442f3 Mon Sep 17 00:00:00 2001
From: Jimmy Zelinskie <jimmy.zelinskie@coreos.com>
Date: Tue, 24 Feb 2015 14:43:04 -0500
Subject: [PATCH] css: prevent new UI css from breaking old css

This also breaks css out into directives.
---
 static/css/directives/repo-list-grid.css | 131 +++++++++++++++++++++++
 static/css/directives/repo-list.css      |   7 ++
 static/css/quay.css                      | 117 ++++----------------
 static/directives/repo-list-grid.html    |  11 +-
 4 files changed, 160 insertions(+), 106 deletions(-)
 create mode 100644 static/css/directives/repo-list-grid.css
 create mode 100644 static/css/directives/repo-list.css

diff --git a/static/css/directives/repo-list-grid.css b/static/css/directives/repo-list-grid.css
new file mode 100644
index 000000000..301905e11
--- /dev/null
+++ b/static/css/directives/repo-list-grid.css
@@ -0,0 +1,131 @@
+.repo-panel-title-row .repo-circle {
+  color: #999;
+  display: inline-block;
+  position: relative;
+  background: #eee;
+  padding: 4px;
+  border-radius: 50%;
+  display: inline-block;
+  width: 46px;
+  height: 46px;
+}
+
+.repo-panel-title-row .repo-circle .fa-hdd-o {
+  font-size: 1.7em;
+}
+
+.repo-panel-title-row .repo-circle.no-background .fa-hdd-o {
+  font-size: 1.7em;
+}
+
+.repo-panel-title-row .repo-circle .fa-lock {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 12px !important;
+}
+
+.repo-panel-title-row .repo-circle.no-background .fa-lock {
+  bottom: 5px;
+  right: 2px;
+}
+
+.empty-primary-msg {
+  font-size: 18px;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.empty-secondary-msg {
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.repo-list-title {
+  margin-bottom: 30px;
+  margin-top: 10px;
+  line-height: 24px;
+  font-size: 18px;
+}
+
+.repo-list-title a {
+  font-size: 18px;
+  margin: 0;
+  display: inline-block;
+}
+
+.repo-list-title i {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.repo-list-title .starred {
+  color: #ffba6d;
+}
+
+.repo-panel {
+  padding: 20px;
+  border: 1px solid #eee;
+  margin-bottom: 30px;
+}
+
+.repo-panel-title-row {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.panel-body.starred {
+  background: -moz-linear-gradient(top, rgba(255,240,188,1) 0%, rgba(255,255,255,0.5) 5%, rgba(255,255,255,0.49) 51%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,240,188,1)), color-stop(5%,rgba(255,255,255,0.5)), color-stop(51%,rgba(255,255,255,0.49)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* IE10+ */
+  background: linear-gradient(to bottom, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* W3C */
+}
+
+.star-icon {
+  color: #ddd;
+  display: block;
+  font-size: 1.2em;
+  text-align: right;
+  line-height: 2em;
+}
+
+.star-icon:hover {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.star-icon.starred {
+  color: #ffba6d;
+}
+
+.new-repo-listing {
+  display: block;
+  border-bottom: 1px solid #eee;
+  font-size: 14px;
+  line-height: normal;
+  padding-bottom: 30px;
+}
+
+.new-repo-listing .description {
+  font-size: 0.91em;
+  padding-top: 13px;
+}
+
+.new-repo-listing .description {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.repo-panel-repo-link {
+  font-size: 1.2em;
+}
+
+.repo-list-grid {
+  padding-top: 10px;
+}
diff --git a/static/css/directives/repo-list.css b/static/css/directives/repo-list.css
new file mode 100644
index 000000000..2ba509177
--- /dev/null
+++ b/static/css/directives/repo-list.css
@@ -0,0 +1,7 @@
+.repo-list-sidebar .button-bar-right {
+  margin-bottom: 20px;
+}
+
+.repo-list-sidebar .panel .panel-body .fa-gear {
+  float: right;
+}
diff --git a/static/css/quay.css b/static/css/quay.css
index 646204252..4fc72cc49 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -909,8 +909,6 @@ i.toggle-icon:hover {
 }
 
 .repo-circle {
-  color: #999;
-  display: inline-block;
   position: relative;
   background: #eee;
   padding: 4px;
@@ -918,6 +916,7 @@ i.toggle-icon:hover {
   display: inline-block;
   width: 46px;
   height: 46px;
+  text-align: center;
 }
 
 .repo-circle.no-background {
@@ -928,11 +927,11 @@ i.toggle-icon:hover {
 }
 
 .repo-circle .fa-hdd-o {
-  font-size: 1.7em;
+  font-size: 36px;
 }
 
 .repo-circle.no-background .fa-hdd-o {
-  font-size: 1.7em;
+  font-size: 30px;
 }
 
 .repo-circle .fa-lock {
@@ -940,18 +939,18 @@ i.toggle-icon:hover {
   bottom: -2px;
   right: -4px;
   background: rgb(253, 191, 191);
-  width: 16px;
+  width: 20px;
   display: inline-block;
   border-radius: 50%;
   text-align: center;
-  height: 16px;
-  line-height: 16px;
-  font-size: 12px !important;
+  height: 20px;
+  line-height: 21px;
+  font-size: 16px !important;
 }
 
 .repo-circle.no-background .fa-lock {
-  bottom: 5px;
-  right: 7px;
+  bottom: -2px;
+  right: -6px;
   color: #444;
 }
 
@@ -2457,49 +2456,10 @@ p.editable:hover i {
   cursor: pointer;
 }
 
-.empty-primary-msg {
-  font-size: 18px;
-  margin-bottom: 30px;
-  text-align: center;
-}
-
-.empty-secondary-msg {
-  font-size: 14px;
-  color: #999;
-  text-align: center;
-  margin-bottom: 10px;
-}
-
 .repo-list {
   margin-bottom: 40px;
 }
 
-.repo-list-title {
-  margin-bottom: 30px;
-  margin-top: 10px;
-  line-height: 24px;
-  font-size: 18px;
-}
-
-.repo-list-title a {
-  font-size: 18px;
-  margin: 0;
-  display: inline-block;
-}
-
-.repo-list-title i {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.repo-list-sidebar .button-bar-right {
-  margin-bottom: 20px;
-}
-
-.repo-list-sidebar .panel .panel-body .fa-gear {
-  float: right;
-}
-
 .repo-list .button-bar-right {
   float: right;
 }
@@ -2519,47 +2479,11 @@ p.editable:hover i {
   margin-right: 10px;
 }
 
-.repo-panel {
-  padding: 20px;
-  border: 1px solid #eee;
-  margin-bottom: 30px;
-}
-
-.repo-panel-title-row {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.panel-body.starred {
-  background: -moz-linear-gradient(top, rgba(255,240,188,1) 0%, rgba(255,255,255,0.5) 5%, rgba(255,255,255,0.49) 51%, rgba(255,255,255,0) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,240,188,1)), color-stop(5%,rgba(255,255,255,0.5)), color-stop(51%,rgba(255,255,255,0.49)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(255,240,188,1) 0%,rgba(255,255,255,0.5) 5%,rgba(255,255,255,0.49) 51%,rgba(255,255,255,0) 100%); /* W3C */
-}
-
-.star-icon {
-  color: #ddd;
-  display: block;
-  font-size: 1.2em;
-  text-align: right;
-  line-height: 2em;
-}
-
-.star-icon:hover {
-  cursor: pointer;
-  cursor: hand;
-}
-
-.star-icon.starred {
-  color: #ffba6d;
-}
-
 .repo-listing {
   display: block;
+  margin-bottom: 20px;
   border-bottom: 1px solid #eee;
+  padding: 10px;
   font-size: 14px;
   line-height: normal;
 }
@@ -2573,19 +2497,18 @@ p.editable:hover i {
   margin-bottom: 0px;
 }
 
-.repo-panel-repo-link {
-  font-size: 1.2em;
+.repo-listing a {
+  font-size: 1.5em;
+}
+
+.repo-listing i {
+  color: #999;
+  display: inline-block;
+  margin-right: 6px;
 }
 
 .repo-listing .description {
-  font-size: 0.91em;
-  padding-top: 13px;
-}
-
-.repo-listing .description p:last-child {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  padding-left: 44px;
 }
 
 
diff --git a/static/directives/repo-list-grid.html b/static/directives/repo-list-grid.html
index 628b02030..ea22b7cb4 100644
--- a/static/directives/repo-list-grid.html
+++ b/static/directives/repo-list-grid.html
@@ -1,9 +1,9 @@
 <div class="resource-view" resource="repositories">
-  <div class="repo-listing">
+  <div class="new-repo-listing">
 
     <!-- Titles -->
     <div ng-if="starred" class="repo-list-title">
-      <i class="fa fa-star starred" style="color:#ffba6d"></i>
+      <i class="fa fa-star starred"></i>
       Starred
     </div>
     <div ng-if="!starred && user.username == namespace.username" class="repo-list-title">
@@ -50,13 +50,6 @@
         <div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div>
         <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
       </div>
-
-      <!-- HR -->
-      <div class="row">
-        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-          <hr>
-        </div>
-      </div>
     </div>
 
   </div>