Layer details style changes

Changed to full screen layout to improve the table display
and get rid of the accordion for the layer information.

Signed-off-by: Belen Barros <belen.barros.pena@intel.com>
This commit is contained in:
Belen Barros 2013-02-22 15:45:35 +00:00 committed by Paul Eggleton
parent ea213c8007
commit 18bbce1de9
3 changed files with 109 additions and 147 deletions

1
TODO
View File

@ -21,6 +21,7 @@ TODO:
* Show layer notes records
Later:
* Show count of layers to be reviewed next to review button
* Ability for users to edit existing layers
* Something to help with compatibility (although maybe this should just be handled using the existing versioned layer dependencies in layer.conf)
* Query backend service? i.e. special URL to query information

View File

@ -22,25 +22,21 @@
<div class="container-fluid">
<div class="row-fluid">
<div class="span9 offset1">
<h1 style="margin-bottom: 1em;">{{ layeritem.name }}</h1>
</div> <!-- end of span9 -->
</div> <!-- end of row-fluid -->
<div class="page-header">
<h1>{{ layeritem.name }}
{% if user.is_authenticated %}
{% if layeritem.status = "N" %}
<a href="{% url publish layeritem.name %}" class="btn btn-primary pull-right">Publish layer</a>
{% endif %}
{% endif %}
</h1>
</div>
</div> <!-- end of row-fluid -->
</div> <!-- end of container-fluid -->
<div class="container-fluid">
<div class="row-fluid offset1">
<div class="span3">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Description
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="description span7">
<p>
{{ layeritem.description }}
</p>
@ -51,103 +47,68 @@
</span>
{% endif %}
</p>
</div>
</div>
</div>
<h3>Git repository</h3>
<p> {{ layeritem.vcs_url }}
{% if layeritem.vcs_web_url %}
<span class="label label-info">
<a href="{{ layeritem.vcs_web_url }}">web repo</a>
</span>
{% endif %}
</p>
{% if layeritem.vcs_subdir %}
<h4>Subdirectory</h4>
<p>{{ layeritem.vcs_subdir }}
{% if layeritem.tree_url %}
<span class="label label-info">
<a href="{{ layeritem.tree_url }}">web subdirectory</a>
</span>
{% endif %}
</p>
{% endif %}
<h3>{% if layeritem.active_maintainers|length = 1 %}Maintainer{% else %}Maintainers{% endif %}</h3>
<ul>
{% for maintainer in layeritem.active_maintainers %}
<li>
{{ maintainer.name }}
{% if maintainer.responsibility %}
<span>({{ maintainer.responsibility }})</span>
{% endif %}
<span class="label label-info">
<a href="mailto:{{ maintainer.email }}">email</a>
</span>
</li>
{% endfor %}
</ul>
</div> <!-- end of span7 -->
<div class="span4 pull-right description">
{% if layeritem.dependencies_set.all %}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Dependencies
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="well dependency-well">
<h3>Dependencies </h3>
<p>The {{ layeritem.name }} layer depends upon:</p>
<ul>
{% for dep in layeritem.dependencies_set.all %}
<li><a href="{% url layer_item dep.dependency.name %}">{{ dep.dependency.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div> <!-- end of well -->
{% endif %}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Repository
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Git repository</h4>
<p>{{ layeritem.vcs_url }}</p>
{% if layeritem.vcs_subdir %}
<h4>Subdirectory</h4>
<p>{{ layeritem.vcs_subdir }}</p>
{% endif %}
<p>
{% if layeritem.vcs_web_url %}
<span class="label label-info">
<a href="{{ layeritem.vcs_web_url }}">web repo</a>
</span>
{% endif %}
{% if layeritem.tree_url %}
<span class="label label-info">
<a href="{{ layeritem.tree_url }}">tree</a>
</span>
{% endif %}
</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Maintainer information
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<dl>
{% for maintainer in layeritem.active_maintainers %}
<dt class="showRollie">
{{ maintainer.name }}
<a class="rollie" href="mailto:{{ maintainer.email }}">
<span class="label label-info">
<i class="icon-envelope icon-white"></i>
</span>
</a>
</dt>
{% if maintainer.responsibility %}
<dd>- {{ maintainer.responsibility }}</dd>
{% endif %}
{% endfor %}
</dl>
</div>
</div>
</div>
</div> <!-- end of accordion2 -->
</div>
<div class="span6">
</div> <!-- end of span4 -->
</div> <!-- end of row-fluid -->
</div> <!-- end of container-fluid -->
<div class="container-fluid" style="margin-bottom:1em;">
<div class="row-fluid">
<div class="navbar">
<div class="navbar-inner">
<!-- a class="btn btn-big pull-left back-button" href="index.html"><i class="icon-chevron-left"></i></a -->
<a class="brand pull-left">{{ layeritem.name }} recipes</a>
<ul class="nav pull-right">
@ -175,24 +136,23 @@
<tr>
<td><a href="{% url recipe recipe.id %}">{{ recipe.name }}</a></td>
<td>{{ recipe.pv }}</td>
<td>{{ recipe.short_desc }}</td>
<td class="span8">{{ recipe.short_desc }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row-fluid">
{% if user.is_authenticated %}
<div class="well">
{% if layeritem.status = "N" %}
<a href="{% url publish layeritem.name %}" class="btn">Publish</a>
<a href="{% url publish layeritem.name %}" class="btn btn-primary pull-right">Publish layer</a>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
{% endautoescape %}

View File

@ -27,29 +27,30 @@ textarea {
color:white;
}
bs-docs-example:after {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Recipes";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.bs-docs-example {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
margin: 15px 0;
padding: 39px 19px 14px;
position: relative;
}
.footer {
text-align: center;
}
.description {
margin-bottom: 2em;
}
.description p {
font-size: 1.2em;
}
.description ul {
font-size: 1.2em;
}
.description li {
margin-bottom: 0.5em;
}
.dependency-well {
padding-top: 4px;
}
h1 .btn {
font-weight: normal;
}