Merge pull request #6991 from Simounet/feat/6971-mass-action-click-full-card

Fix #6971 - Full clickable card on mass action

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

@@ -38,25 +38,29 @@
   border-radius: 2px 0 0 2px;
 }
 
-.entry-checkbox {
+.card-stacked .entry-checkbox {
   margin: 10px 15px 10px 5px;
-
-  .card & {
-    float: right;
-    margin-right: 0;
-    padding: 10px;
 }
+
+.card .entry-checkbox {
+  position: absolute;
+  display: flex;
+  padding: 10px;
+  inset: 0;
+  justify-content: flex-end;
+  align-items: start;
+  background-color: rgb(0 172 193 / 20%);
+  cursor: pointer;
+  z-index: 10;
 }
 
 .entries .entry-checkbox-input,
 .mass-action .entry-checkbox-input {
   position: relative;
-  left: 0;
   width: 20px;
   min-height: 25px;
-  height: 100%;
-  vertical-align: middle;
   opacity: initial;
+  cursor: pointer;
   z-index: 10;
 }
 

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

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

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

@@ -1,7 +1,7 @@
 <div class="card entry-card{% if currentRoute in routes and entry.isArchived %} archived{% endif %}">
+    {% include "@WallabagCore/Entry/Card/_mass_checkbox.html.twig" with {'entry': entry} only %}
     <div class="card-body">
         <div class="{% if app.user.config.displayThumbnails %}card-image{% endif %} 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>