aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/Wallabag
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas@loeuillet.org>2015-08-17 15:32:59 +0200
committerNicolas LÅ“uillet <nicolas@loeuillet.org>2015-08-17 15:32:59 +0200
commit925d8ab316127be8dc0cea2515cfc1d419b1d5e8 (patch)
tree41f81822db306039281230f5fba5c659e3c177d0 /src/Wallabag
parent0a3a5f6cd702f224c97ce8decadccad5347bde2c (diff)
parentd5b28518e9c1c654e3eaa913603dd08fc7b04677 (diff)
downloadwallabag-925d8ab316127be8dc0cea2515cfc1d419b1d5e8.tar.gz
wallabag-925d8ab316127be8dc0cea2515cfc1d419b1d5e8.tar.zst
wallabag-925d8ab316127be8dc0cea2515cfc1d419b1d5e8.zip
Merge pull request #1337 from modos189/v2_material
fixes material
Diffstat (limited to 'src/Wallabag')
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig47
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig3
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig2
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig26
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig10
-rwxr-xr-xsrc/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css82
-rwxr-xr-xsrc/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js34
7 files changed, 179 insertions, 25 deletions
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 101f5939..d0ebdad6 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 @@
18 {% if entries is not empty %} 18 {% if entries is not empty %}
19 <div class="results clearfix"> 19 <div class="results clearfix">
20 <div class="nb-results left">{{ entries.count }} {% trans %}entries{% endtrans %}</div> 20 <div class="nb-results left">{{ entries.count }} {% trans %}entries{% endtrans %}</div>
21 <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>
22 <ul class="pagination right"> 21 <ul class="pagination right">
23 {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %} 22 {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
24 <li class="{{ currentPage == p ? 'active':'waves-effect'}}"> 23 <li class="{{ currentPage == p ? 'active':'waves-effect'}}">
@@ -62,4 +61,50 @@
62 {% endfor %} 61 {% endfor %}
63 </ul> 62 </ul>
64 {% endif %} 63 {% endif %}
64
65
66 <!-- Filters -->
67 <div id="filters" class="side-nav fixed right-aligned">
68 <form>
69
70 <h4 class="center">{% trans %}Filters{% endtrans %}</h1>
71
72 <div class="row">
73
74 <div class="col s12">
75 <label>{% trans %}Reading time in minutes{% endtrans %}</label>
76 </div>
77 <div class="input-field col s6">
78 {{ form_widget(form.readingTime.left_number, {'type': 'number'}) }}
79 <label for="entry_filter_readingTime_left_number">{% trans %}from{% endtrans %}</label>
80 </div>
81 <div class="input-field col s6">
82 {{ form_widget(form.readingTime.right_number, {'type': 'number'}) }}
83 <label for="entry_filter_readingTime_right_number">{% trans %}to{% endtrans %}</label>
84 </div>
85
86 <div class="col s12">
87 <label>{% trans %}Create at{% endtrans %}</label>
88 </div>
89 <div class="input-field col s6">
90 {{ form_widget(form.createdAt.left_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.left_date.vars.value} }) }}
91 <label for="entry_filter_createdAt_left_date" class="active">{% trans %}from{% endtrans %}</label>
92 </div>
93 <div class="input-field col s6">
94 {{ form_widget(form.createdAt.right_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.right_date.vars.value} }) }}
95 <label for="entry_filter_createdAt_right_date" class="active">{% trans %}to{% endtrans %}</label>
96 </div>
97
98 <div class="col s6">
99 <a href="#!" class="center waves-effect waves-green btn-flat" id="clean_form_filters">{% trans %}Clean{% endtrans %}</a>
100 </div>
101
102 <div class="col s6">
103 <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{% trans %}Filter{% endtrans %}</button>
104 </div>
105
106 </div>
107
108 </form>
109 </div>
65{% endblock %} 110{% 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 561d0183..b92c41b6 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 @@
3{% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %} 3{% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %}
4 4
5{% block menu %} 5{% block menu %}
6 <div class="progress">
7 <div class="determinate"></div>
8 </div>
6 <nav class="hide-on-large-only"> 9 <nav class="hide-on-large-only">
7 <div class="nav-wrapper cyan darken-1"> 10 <div class="nav-wrapper cyan darken-1">
8 <ul> 11 <ul>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
index 1a3ab86d..fda53e5b 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
@@ -8,7 +8,7 @@
8 <span class="black-text">{{ form_errors(form.url) }}</span> 8 <span class="black-text">{{ form_errors(form.url) }}</span>
9 {% endif %} 9 {% endif %}
10 10
11 {{ form_widget(form.url) }} 11 {{ form_widget(form.url, { 'attr': {'autocomplete': 'off'} }) }}
12 12
13 <div class="hidden">{{ form_rest(form) }}</div> 13 <div class="hidden">{{ form_rest(form) }}</div>
14</form> 14</form>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
index 73abc3f8..2c513ffe 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
@@ -23,19 +23,23 @@
23 <span class="black-text"><p>{{ flashMessage }}</p></span> 23 <span class="black-text"><p>{{ flashMessage }}</p></span>
24 {% endfor %} 24 {% endfor %}
25 25
26 <div class="input-field s12"> 26 <div class="row">
27 <label for="username">{% trans %}Username{% endtrans %}</label>
28 <input type="text" id="username" name="_username" value="{{ last_username }}" />
29 </div>
30 27
31 <div class="input-field s12"> 28 <div class="input-field col s12">
32 <label for="password">{% trans %}Password{% endtrans %}</label> 29 <label for="username">{% trans %}Username{% endtrans %}</label>
33 <input type="password" id="password" name="_password" /> 30 <input type="text" id="username" name="_username" value="{{ last_username }}" />
34 </div> 31 </div>
32
33 <div class="input-field col s12">
34 <label for="password">{% trans %}Password{% endtrans %}</label>
35 <input type="password" id="password" name="_password" />
36 </div>
37
38 <div class="input-field col s12">
39 <input type="checkbox" id="remember_me" name="_remember_me" checked />
40 <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
41 </div>
35 42
36 <div class="input-field s12">
37 <input type="checkbox" id="remember_me" name="_remember_me" checked />
38 <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
39 </div> 43 </div>
40 44
41 </div> 45 </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 17136566..554865d7 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -57,6 +57,7 @@
57 <ul> 57 <ul>
58 <li class="bold"><a class="waves-effect" href="{{ path('new') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li> 58 <li class="bold"><a class="waves-effect" href="{{ path('new') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
59 <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a> 59 <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
60 <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>
60 </ul> 61 </ul>
61 </div> 62 </div>
62 <form method="get" action="index.php"> 63 <form method="get" action="index.php">
@@ -68,16 +69,9 @@
68 </form> 69 </form>
69 <div class="input-field nav-panel-add" style="display: none"> 70 <div class="input-field nav-panel-add" style="display: none">
70 {{ render(controller( "WallabagCoreBundle:Entry:addEntryForm" )) }} 71 {{ render(controller( "WallabagCoreBundle:Entry:addEntryForm" )) }}
71 <label for="add"><i class="mdi-content-add"></i></label> 72 <label for="add" class="active"><i class="mdi-content-add"></i></label>
72 <i class="mdi-navigation-close"></i> 73 <i class="mdi-navigation-close"></i>
73 </div> 74 </div>
74 <!--<form name="entry" method="post" action="{{ path('new_entry') }}">
75 <div class="input-field nav-panel-add" style="display: none">
76 <input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
77 <label for="add"><i class="mdi-content-add"></i></label>
78 <i class="mdi-navigation-close"></i>
79 </div>
80 </form>-->
81 </div> 75 </div>
82 </nav> 76 </nav>
83{% endblock %} 77{% 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 bf7e667e..81ea598c 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 {
48 margin-bottom: 0; 48 margin-bottom: 0;
49} 49}
50 50
51.pagination li {
52 padding: 0;
53}
54
55.pagination a {
56 padding: 0px 10px;
57 height: 30px;
58 display: block;
59}
60
51.page-footer .footer-copyright p { 61.page-footer .footer-copyright p {
52 display: inline; 62 display: inline;
53} 63}
@@ -56,10 +66,18 @@ nav, main, footer {
56 display: none; 66 display: none;
57} 67}
58 68
69.picker__date-display {
70 display: none;
71}
72
59/* ========================================================================== 73/* ==========================================================================
60 1 = Nav 74 1 = Nav
61 ========================================================================== */ 75 ========================================================================== */
62 76
77nav input {
78 color: #aaa;
79}
80
63.nav-wrapper .button-collapse { 81.nav-wrapper .button-collapse {
64 padding: 0px 15px; 82 padding: 0px 15px;
65} 83}
@@ -96,6 +114,38 @@ nav, main, footer {
96 white-space: nowrap; 114 white-space: nowrap;
97} 115}
98 116
117.nav-panels .input-field input {
118 display: block;
119 line-height: inherit;
120 padding-left: 4rem !important;
121 width: calc(100% - 8rem);
122}
123
124.nav-panels .input-field input:focus {
125 background-color: #fff;
126 border: 0;
127 box-shadow: none;
128 color: #444;
129}
130
131.input-field.nav-panel-add label {
132 left: 1rem;
133}
134
135.input-field.nav-panel-add .mdi-navigation-close {
136 position: absolute;
137 top: 0;
138 right: 1rem;
139 color: transparent;
140 cursor: pointer;
141 font-size: 2rem;
142 transition: .3s color;
143}
144
145#button_filters {
146 display: none;
147}
148
99/* ========================================================================== 149/* ==========================================================================
100 2 = Side-nav 150 2 = Side-nav
101 ========================================================================== */ 151 ========================================================================== */
@@ -133,6 +183,21 @@ nav, main, footer {
133} 183}
134 184
135/* ========================================================================== 185/* ==========================================================================
186 * 3 = Filters slider
187 * ========================================================================== */
188
189#filters button {
190 padding: 0px;
191 width: 100%;
192}
193
194.side-nav.fixed.right-aligned {
195 right: -250px;
196 left: auto !important;
197 overflow-y: visible;
198}
199
200/* ==========================================================================
136 3 = Cards 201 3 = Cards
137 ========================================================================== */ 202 ========================================================================== */
138 203
@@ -200,6 +265,15 @@ main ul.row {
200 width: 240px !important; 265 width: 240px !important;
201} 266}
202 267
268.reader-mode .collapsible-body {
269 height: 0;
270 overflow: hidden;
271}
272
273.reader-mode:hover .collapsible-body {
274 height: auto;
275}
276
203.reader-mode span { 277.reader-mode span {
204 opacity: 0; 278 opacity: 0;
205 transition: opacity 0.2s ease; 279 transition: opacity 0.2s ease;
@@ -209,6 +283,14 @@ main ul.row {
209 opacity: 1; 283 opacity: 1;
210} 284}
211 285
286.progress {
287 position:fixed;
288 top:0px;
289 width: 100%;
290 height: 3px;
291 margin: 0;
292 z-index: 9999;
293}
212/* ========================================================================== 294/* ==========================================================================
213 6 = Media queries 295 6 = Media queries
214 ========================================================================== */ 296 ========================================================================== */
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 9341cb5a..0339eba0 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 @@
1function init_filters() {
2 // no display if filters not aviable
3 if ($("div").is("#filters")) {
4 $('#button_filters').show();
5 $('.button-collapse-right').sideNav({ edge: 'right' });
6 $('#clean_form_filters').on('click', function(){
7 $('#filters input').val('');
8 return false;
9 });
10 }
11}
12
1$(document).ready(function(){ 13$(document).ready(function(){
2 // sideNav 14 // sideNav
3 $('.button-collapse').sideNav(); 15 $('.button-collapse').sideNav();
@@ -5,18 +17,25 @@ $(document).ready(function(){
5 $('.collapsible').collapsible({ 17 $('.collapsible').collapsible({
6 accordion : false 18 accordion : false
7 }); 19 });
20 $('.datepicker').pickadate({
21 selectMonths: true,
22 selectYears: 15,
23 formatSubmit: 'dd/mm/yyyy',
24 hiddenName: true,
25 format: 'dd/mm/yyyy',
26 });
27 init_filters();
8 28
9 $('#nav-btn-add').click(function(){ 29 $('#nav-btn-add').on('click', function(){
10 $(".nav-panel-buttom").hide(100); 30 $(".nav-panel-buttom").hide(100);
11 $(".nav-panel-add").show(100); 31 $(".nav-panel-add").show(100);
12 $(".nav-panel-menu").hide(100);
13 $(".nav-panels .action").hide(100); 32 $(".nav-panels .action").hide(100);
14 $(".nav-panel-menu").addClass('hidden'); 33 $(".nav-panel-menu").addClass('hidden');
15 $(".nav-panels").css('background', 'white'); 34 $(".nav-panels").css('background', 'white');
16 $("#entry_url").focus(); 35 $("#entry_url").focus();
17 return false; 36 return false;
18 }); 37 });
19 $('#nav-btn-search').click(function(){ 38 $('#nav-btn-search').on('click', function(){
20 $(".nav-panel-buttom").hide(100); 39 $(".nav-panel-buttom").hide(100);
21 $(".nav-panel-search").show(100); 40 $(".nav-panel-search").show(100);
22 $(".nav-panels .action").hide(100); 41 $(".nav-panels .action").hide(100);
@@ -25,7 +44,7 @@ $(document).ready(function(){
25 $("#searchfield").focus(); 44 $("#searchfield").focus();
26 return false; 45 return false;
27 }); 46 });
28 $('.mdi-navigation-close').click(function(){ 47 $('.mdi-navigation-close').on('click', function(){
29 $(".nav-panel-add").hide(100); 48 $(".nav-panel-add").hide(100);
30 $(".nav-panel-search").hide(100); 49 $(".nav-panel-search").hide(100);
31 $(".nav-panel-buttom").show(100); 50 $(".nav-panel-buttom").show(100);
@@ -34,4 +53,11 @@ $(document).ready(function(){
34 $(".nav-panels").css('background', 'transparent'); 53 $(".nav-panels").css('background', 'transparent');
35 return false; 54 return false;
36 }); 55 });
56 $(window).scroll(function () {
57 var s = $(window).scrollTop(),
58 d = $(document).height(),
59 c = $(window).height();
60 var scrollPercent = (s / (d-c)) * 100;
61 $(".progress .determinate").css('width', scrollPercent+'%');
62 });
37}); 63});