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

[Finucane, Stephen]

On 30 Mar 22:04, Stephen Finucane wrote:
> 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">

This anchor means the "buttons" are always present, even when they
don't go anywhere. This needs to be fixed. Will try a different
approach.

>  {% 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
>