Mass actions available on cards view

fixup! Mass action toggle button added

app/Resources/static/themes/material/css/entries.scss

@@ -16,12 +16,6 @@
 .mass-buttons {
   margin: 10px 5px 10px 20px;
 
-  #selectAll {
-    position: relative;
-    opacity: initial;
-    left: 0;
-  }
-
   span {
     padding: 3px;
   }
@@ -38,20 +32,30 @@
   }
 }
 
-.card-stacked {
-  input[type="checkbox"] {
-    position: relative;
-    opacity: initial;
-    left: 0;
-  }
+.entry-checkbox {
+  margin: 10px 15px 10px 5px;
 
-  .entry-checkbox {
-    margin-right: 10px;
+  .card & {
+    float: right;
+    margin-right: 0;
+    padding: 10px;
   }
 }
 
+.entries .entry-checkbox-input,
+.mass-buttons .entry-checkbox-input {
+  position: relative;
+  left: 0;
+  width: 20px;
+  min-height: 25px;
+  height: 100%;
+  vertical-align: middle;
+  opacity: initial;
+}
+
 .mass-action-inputs-displayed:not(:checked) ~ .mass-buttons,
-.mass-action-inputs-displayed:not(:checked) ~ .entries .entry-checkbox {
+.mass-action-inputs-displayed:not(:checked) ~ .entries .entry-checkbox,
+.mass-action-inputs-displayed:checked ~ .entries .card-preview {
   display: none;
 }
 

src/Wallabag/CoreBundle/Resources/views/Entry/Card/_mass_checkbox.html.twig

@@ -1,3 +1,3 @@
 <div class="entry-checkbox">
-    <input type="checkbox" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
+    <input type="checkbox" class="entry-checkbox-input" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
 </div>

src/Wallabag/CoreBundle/Resources/views/Entry/_card_preview.html.twig

@@ -1,6 +1,7 @@
 <div class="card entry-card{% if currentRoute in routes and entry.isArchived %} archived{% endif %}">
     <div class="card-body">
         <div class="card-image waves-effect waves-block waves-light">
+            {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}
             <ul class="card-entry-labels">
             {% for tag in entry.tags|slice(0, 3) %}
                 <li title="{{ tag.label }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>

src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig

@@ -33,9 +33,7 @@
             {% if app.user.config.feedToken %}
                 {% include "@WallabagCore/Entry/_feed_link.html.twig" %}
             {% endif %}
-            {% if list_mode == 1 %}
-                <label for="mass-action-inputs-displayed" class="mass-action-toggle results-item tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'entry.list.toggle_mass_action'|trans }}"><i class="material-icons">library_add_check</i></label>
-            {% endif %}
+            <label for="mass-action-inputs-displayed" class="mass-action-toggle results-item tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'entry.list.toggle_mass_action'|trans }}"><i class="material-icons">library_add_check</i></label>
         </div>
         {% if current_route == 'search' %}<div><a href="{{ path('tag_this_search', {'filter': searchTerm, 'currentRoute': app.request.get('currentRoute')}) }}" title="{{ 'entry.list.assign_search_tag'|trans }}">{{ 'entry.list.assign_search_tag'|trans }}</a></div>{% endif %}
         {% if entries.getNbPages > 1 %}
@@ -43,25 +41,23 @@
         {% endif %}
     </div>
 
-    {% if list_mode == 1 %}
+    {% if entries.count > 0 %}
         <input id="mass-action-inputs-displayed" class="mass-action-inputs-displayed" type="checkbox" />
         <div class="mass-buttons">
-            {% if entries.count > 0 and list_mode == 1 %}
-                <span>
-                    <input id="selectAll" type="checkbox" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />&nbsp;
-                </span>
+            <span>
+                <input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
+            </span>
 
-                <span>
-                    <button class="btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
-                    <button class="btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
-                    <button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
-                    <button class="btn cyan darken-1" type="submit" name="tag"><i class="material-icons">label</i></button>
-                </span>
+            <span>
+                <button class="btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
+                <button class="btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
+                <button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
+                <button class="btn cyan darken-1" type="submit" name="tag"><i class="material-icons">label</i></button>
+            </span>
 
-                <span class="input-field inline">
-                    <input type="text" name="tags" />
-                </span>
-            {% endif %}
+            <span class="input-field inline">
+                <input type="text" name="tags" />
+            </span>
         </div>
     {% endif %}