[PATCH 9/9] ui: Rework the project list page

[Stephen Finucane]

Make a number of changes to the UI page, including:

* Show four items per row, instead of three
* Remove the minimum padding of each element in favour of the clearfix
* Show the web URL and web SCM values buttons in the bottom of each
  project listing

Signed-off-by: Stephen Finucane <stephen.finucane at intel.com>
---
 htdocs/css/style.css                        | 37 ++++++++++++++++++++++++
 patchwork/templates/patchwork/projects.html | 45 +++++++++++++++++------------
 2 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index f7f7b6a..cb2ef7a 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -45,6 +45,43 @@ pre {
 	color: #999;
 }
 
+.list-box {
+	display: block;
+	margin-bottom: 20px;
+	line-height: 1.42857143;
+	background-color: #fff;
+	border: 1px solid #ddd;
+	border-radius: 1px;
+	-webkit-transition: border .2s ease-in-out;
+		-o-transition: border .2s ease-in-out;
+		transition: border .2s ease-in-out;
+}
+
+.list-box .content {
+	padding: 0 10px;
+}
+
+.list-box .link {
+	border-top: 1px solid #ddd;
+	display: inline-block;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	text-align: center;
+	width: 50%;
+}
+
+.list-box .link:hover {
+	text-decoration: none;
+}
+
+.list-box .link-left {
+	border-right: 0.5px solid #ddd;
+}
+
+.list-box .link-right {
+	border-left: 0.5px solid #ddd;
+}
+
 form {
 	padding: 0em;
 	margin: 0em;
diff --git a/patchwork/templates/patchwork/projects.html b/patchwork/templates/patchwork/projects.html
index 9ce1918..3777139 100644
--- a/patchwork/templates/patchwork/projects.html
+++ b/patchwork/templates/patchwork/projects.html
@@ -2,37 +2,44 @@
 
 {% block title %}Project List{% endblock %}
 {% block body %}
+<h1>Projects</h1>
 <div style="margin-top:20px;"></div>
 {% if projects %}
 {% for p in projects %}
-{% cycle '<div class="row">' '' '' %}
-  <div class="col-sm-6 col-md-4">
-    <div class="thumbnail">
-      <div class="caption">
-        <h3>{{p.name}}</h3>
-        <p class="core-info">
-         <span>
+{% if forloop.first or forloop.counter0|divisibleby:4 %}
+<div class="row">
+{% endif %}
+  <div class="col-md-3">
+    <div class="list-box">
+      <div class="content">
+        <header>
           <a href="{% url 'patch-list' project_id=p.linkname %}">
-           View patches
+            <h3>{{p.linkname}}</h3>
           </a>
-        </span>
-        </p>
+          <p>{{p.name}}</p>
+        </header>
+      </div>
+      <a href="{{p.web_url}}" class="link link-left">
 {% if p.web_url %}
-      <p><a href="{{p.web_url}}">{{p.web_url}}</a></p>
+        <span class="glyphicon glyphicon-home"></span> Home
+{% else %}
+-
 {% endif %}
+      </a><a href="{{p.webscm_url}}" class="link link-right">
 {% if p.webscm_url %}
-      <p><a href="{{p.webscm_url}}">{{p.webscm_url}}</a></p>
+        <span class="glyphicon glyphicon-download"></span> SCM
+{% else %}
+-
 {% endif %}
-     </div>
-   </div>
- </div>
-{% if forloop.last %}
+      </a>
+    </div>
+  </div>
+{% if forloop.last or forloop.counter|divisibleby:4 %}
+  <div class="clearfix visible-xs-block"></div>
 </div>
-{% else %}
-{% cycle '' '' '</div>' %}
 {% endif %}
 {% endfor %}
 {% else %}
-<p>Patchwork doesn't have any projects to display!</p>
+<p>There are no projects available.</p>
 {% endif %}
 {% endblock %}
-- 
2.0.0