fix #1378: nice display for tags list

This commit is contained in:
Nicolas Lœuillet 2015-08-24 11:59:53 +02:00
parent 7083d183b9
commit a754db33c9
4 changed files with 48 additions and 5 deletions

View file

@ -74,6 +74,14 @@
<div class="collapsible-body"></div>
</li>
<li class="bold border-bottom hide-on-med-and-down">
<a class="waves-effect collapsible-header" id="nav-btn-add-tag">
<i class="mdi-action-label-outline small"></i>
<span>{% trans %}Add a tag{% endtrans %}</span>
</a>
<div class="collapsible-body"></div>
</li>
<li class="bold">
<a class="waves-effect collapsible-header">
<i class="mdi-social-share small"></i>
@ -134,11 +142,17 @@ main {
<div id="article">
<header class="mbm">
<h1>{{ entry.title|raw }} <a href="{{ path('edit', { 'id': entry.id }) }}" title="{% trans %}Edit title{% endtrans %}">✎</a></h1>
<a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %} : {{ entry.title|e }}" class="tool link"><span>{{ entry.domainName }}</span></a>
</header>
<aside class="tags">
{% for tag in entry.tags %}<span class="mdi-action-label-outline">{{ tag.label }}</span>{% endfor %}
{{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
<aside>
<a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %} : {{ entry.title|e }}" class="tool link mdi-content-link"> <span>{{ entry.domainName }}</span></a>
<div id="list">
{% for tag in entry.tags %}<span><a href="#">{{ tag.label }}</a></span>{% endfor %}
</div>
<div class="input-field nav-panel-add-tag" style="display: none">
{{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
</div>
</aside>
<article>
{{ entry.content | raw }}

View file

@ -9,7 +9,6 @@
{% endif %}
{{ form_widget(form.label, { 'attr': {'autocomplete': 'off'} }) }}
{{ form_widget(form.save, { 'attr': {'class': 'btn waves-effect waves-light'}, 'label': 'add tag' }) }}
<div class="hidden">{{ form_rest(form) }}</div>
</form>

View file

@ -303,6 +303,30 @@ main ul.row {
margin: 0;
z-index: 9999;
}
#article aside .link {
color: #000;
font-size: 0.6em;
text-decoration: none;
}
#article aside #list {
float: right;
margin-right: 15px;
}
#article aside span a {
background-color: #039be5;
color: #fff;
border-radius: 3px;
float: left;
font-size: 0.6em;
margin-left: 0.5em;
margin-bottom: 0.5em;
padding: 4px;
text-decoration: none;
}
/* ==========================================================================
6 = Media queries
========================================================================== */

View file

@ -27,6 +27,12 @@ $(document).ready(function(){
});
init_filters();
$('#nav-btn-add-tag').on('click', function(){
$(".nav-panel-add-tag").toggle(100);
$(".nav-panel-menu").addClass('hidden');
$("#tag_label").focus();
return false;
});
$('#nav-btn-add').on('click', function(){
$(".nav-panel-buttom").hide(100);
$(".nav-panel-add").show(100);