diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig index 101f59395..d0ebdad6e 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig @@ -18,7 +18,6 @@ {% if entries is not empty %}
{{ entries.count }} {% trans %}entries{% endtrans %}
-
{{ form_rest(form) }}
{% endif %} + + + +
+
+ +

{% trans %}Filters{% endtrans %}

+ +
+ +
+ +
+
+ {{ form_widget(form.readingTime.left_number, {'type': 'number'}) }} + +
+
+ {{ form_widget(form.readingTime.right_number, {'type': 'number'}) }} + +
+ +
+ +
+
+ {{ form_widget(form.createdAt.left_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.left_date.vars.value} }) }} + +
+
+ {{ form_widget(form.createdAt.right_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.right_date.vars.value} }) }} + +
+ +
+ {% trans %}Clean{% endtrans %} +
+ +
+ +
+ +
+ +
+
{% endblock %} diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig index 561d0183c..b92c41b60 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig @@ -3,6 +3,9 @@ {% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %} {% block menu %} +
+
+
{% endblock %} diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css index bf7e667ec..81ea598c4 100755 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css @@ -48,6 +48,16 @@ nav, main, footer { margin-bottom: 0; } +.pagination li { + padding: 0; +} + +.pagination a { + padding: 0px 10px; + height: 30px; + display: block; +} + .page-footer .footer-copyright p { display: inline; } @@ -56,10 +66,18 @@ nav, main, footer { display: none; } +.picker__date-display { + display: none; +} + /* ========================================================================== 1 = Nav ========================================================================== */ +nav input { + color: #aaa; +} + .nav-wrapper .button-collapse { padding: 0px 15px; } @@ -96,6 +114,38 @@ nav, main, footer { white-space: nowrap; } +.nav-panels .input-field input { + display: block; + line-height: inherit; + padding-left: 4rem !important; + width: calc(100% - 8rem); +} + +.nav-panels .input-field input:focus { + background-color: #fff; + border: 0; + box-shadow: none; + color: #444; +} + +.input-field.nav-panel-add label { + left: 1rem; +} + +.input-field.nav-panel-add .mdi-navigation-close { + position: absolute; + top: 0; + right: 1rem; + color: transparent; + cursor: pointer; + font-size: 2rem; + transition: .3s color; +} + +#button_filters { + display: none; +} + /* ========================================================================== 2 = Side-nav ========================================================================== */ @@ -132,6 +182,21 @@ nav, main, footer { margin: 0px 1rem; } +/* ========================================================================== + * 3 = Filters slider + * ========================================================================== */ + +#filters button { + padding: 0px; + width: 100%; +} + +.side-nav.fixed.right-aligned { + right: -250px; + left: auto !important; + overflow-y: visible; +} + /* ========================================================================== 3 = Cards ========================================================================== */ @@ -200,6 +265,15 @@ main ul.row { width: 240px !important; } +.reader-mode .collapsible-body { + height: 0; + overflow: hidden; +} + +.reader-mode:hover .collapsible-body { + height: auto; +} + .reader-mode span { opacity: 0; transition: opacity 0.2s ease; @@ -209,6 +283,14 @@ main ul.row { opacity: 1; } +.progress { + position:fixed; + top:0px; + width: 100%; + height: 3px; + margin: 0; + z-index: 9999; +} /* ========================================================================== 6 = Media queries ========================================================================== */ diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js index 9341cb5aa..0339eba02 100755 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js @@ -1,3 +1,15 @@ +function init_filters() { + // no display if filters not aviable + if ($("div").is("#filters")) { + $('#button_filters').show(); + $('.button-collapse-right').sideNav({ edge: 'right' }); + $('#clean_form_filters').on('click', function(){ + $('#filters input').val(''); + return false; + }); + } +} + $(document).ready(function(){ // sideNav $('.button-collapse').sideNav(); @@ -5,18 +17,25 @@ $(document).ready(function(){ $('.collapsible').collapsible({ accordion : false }); + $('.datepicker').pickadate({ + selectMonths: true, + selectYears: 15, + formatSubmit: 'dd/mm/yyyy', + hiddenName: true, + format: 'dd/mm/yyyy', + }); + init_filters(); - $('#nav-btn-add').click(function(){ + $('#nav-btn-add').on('click', function(){ $(".nav-panel-buttom").hide(100); $(".nav-panel-add").show(100); - $(".nav-panel-menu").hide(100); $(".nav-panels .action").hide(100); $(".nav-panel-menu").addClass('hidden'); $(".nav-panels").css('background', 'white'); $("#entry_url").focus(); return false; }); - $('#nav-btn-search').click(function(){ + $('#nav-btn-search').on('click', function(){ $(".nav-panel-buttom").hide(100); $(".nav-panel-search").show(100); $(".nav-panels .action").hide(100); @@ -25,7 +44,7 @@ $(document).ready(function(){ $("#searchfield").focus(); return false; }); - $('.mdi-navigation-close').click(function(){ + $('.mdi-navigation-close').on('click', function(){ $(".nav-panel-add").hide(100); $(".nav-panel-search").hide(100); $(".nav-panel-buttom").show(100); @@ -34,4 +53,11 @@ $(document).ready(function(){ $(".nav-panels").css('background', 'transparent'); return false; }); + $(window).scroll(function () { + var s = $(window).scrollTop(), + d = $(document).height(), + c = $(window).height(); + var scrollPercent = (s / (d-c)) * 100; + $(".progress .determinate").css('width', scrollPercent+'%'); + }); });