mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2024-09-27 05:50:02 +00:00
Code Issues Projects Releases Wiki Activity

#1320 Design for filters

Browse source
This commit is contained in:
Alexandr Danilov 2015-08-12 22:55:44 +03:00
parent 8ba913d87a
commit 392f4a2681
4 changed files with 64 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
View file

@ -18,7 +18,6 @@
{% if entries is not empty %}
<div class="results clearfix">
<div class="nb-results left">{{ entries.count }} {% trans %}entries{% endtrans %}</div>
<div class="left"><form>{{ form_rest(form) }}<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">Filter</button></form></div>
<ul class="pagination right">
{% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
<li class="{{ currentPage == p ? 'active':'waves-effect'}}">
@ -62,4 +61,40 @@
{% endfor %}
</ul>
{% endif %}
<!-- Filters -->
<div id="filters" class="side-nav fixed right-aligned">
<form>
<h4 class="center">{% trans %}Filters{% endtrans %}</h1>
<div class="row">
<div class="col s12">
<label>{% trans %}Reading time in minutes{% endtrans %}</label>
</div>
<div class="input-field col s6">
<input id="entry_filter_readingTime_left_number" name="entry_filter[readingTime][left_number]" type="number">
<label for="entry_filter_readingTime_left_number">{% trans %}from{% endtrans %}</label>
</div>
<div class="input-field col s6">
<input id="entry_filter_readingTime_right_number" name="entry_filter[readingTime][right_number]" type="number">
<label for="entry_filter_readingTime_right_number">{% trans %}to{% endtrans %}</label>
</div>
<div class="col s6">
<a href="#!" class="center waves-effect waves-green btn-flat" id="clean_form_filters">{% trans %}Clean{% endtrans %}</a>
</div>
<div class="col s6">
<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{% trans %}Filter{% endtrans %}</button>
</div>
</div>
</form>
</div>
{% endblock %}

8
src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
View file

@ -60,6 +60,7 @@
<ul>
<li class="bold"><a class="waves-effect" href="{{ path('new') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
<li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
<li id="button_filters"><a href="#" data-activates="filters" class="nav-panel-menu button-collapse-right"><i class="mdi-content-filter-list"></i></a></li>
</ul>
</div>
<form method="get" action="index.php">
@ -74,13 +75,6 @@
<label for="add" class="active"><i class="mdi-content-add"></i></label>
<i class="mdi-navigation-close"></i>
</div>
<!--<form name="entry" method="post" action="{{ path('new_entry') }}">
<div class="input-field nav-panel-add" style="display: none">
<input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
<label for="add"><i class="mdi-content-add"></i></label>
<i class="mdi-navigation-close"></i>
</div>
</form>-->
</div>
</nav>
{% endblock %}

13
src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
View file

@ -128,6 +128,10 @@ nav input {
transition: .3s color;
}
#button_filters {
display: none;
}
/* ==========================================================================
2 = Side-nav
========================================================================== */
@ -164,6 +168,15 @@ nav input {
margin: 0px 1rem;
}
/* ==========================================================================
* 3 = Filters slider
* ========================================================================== */
#filters button {
padding: 0px;
width: 100%;
}
/* ==========================================================================
3 = Cards
========================================================================== */

14
src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
View file

@ -1,3 +1,16 @@
function init_filters() {
// no display if filters not aviable
if ($("div").is("#filters")) {
$('#button_filters').show();
$('.button-collapse-right').sideNav({ edge: 'right' });
$('#filters').css({ "left": "auto" });
$('#clean_form_filters').click(function(){
$('#filters input').val('');
return false;
});
}
}
$(document).ready(function(){
// sideNav
$('.button-collapse').sideNav();
@ -5,6 +18,7 @@ $(document).ready(function(){
$('.collapsible').collapsible({
accordion : false
});
init_filters();
$('#nav-btn-add').click(function(){
$(".nav-panel-buttom").hide(100);