Merge pull request #6912 from Simounet/feat/tag-mass-action-improved

Mass action layout improved

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

@@ -14,25 +14,30 @@
 }
 
 .mass-action {
-  margin: 10px 5px 10px 20px;
+  margin: 20px 5px 10px 20px;
 }
 
 .mass-action-group {
   display: flex;
   padding: 3px;
-  gap: 10px;
+  align-items: center;
+  gap: 30px;
 }
 
 .mass-action-button {
-  height: 24px;
-  line-height: 24px;
-  padding: 0 0.5rem;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 0.7rem;
 
   i {
     font-size: 1rem;
   }
 }
 
+.mass-action-button--tags {
+  border-radius: 2px 0 0 2px;
+}
+
 .entry-checkbox {
   margin: 10px 15px 10px 5px;
 
@@ -64,11 +69,19 @@
 
 .mass-action-tags {
   display: flex;
-  align-items: center;
-  gap: 10px;
+  margin-top: 10px;
 
-  .mass-action-tags-input {
+  .mass-action-tags-input.mass-action-tags-input {
     margin: 0;
+    padding: 0 5px;
+    height: 34px;
+    background: white;
+    border-bottom: 3px solid #c5ebef;
+  }
+
+  .mass-action-tags-input.mass-action-tags-input.mass-action-tags-input:focus {
+    border-bottom: 3px solid $blue-accent-color;
+    box-shadow: none;
   }
 }
 
@@ -88,13 +101,16 @@
 
 .results {
   display: flex;
+  margin-bottom: 10px;
   padding: 1rem 1rem 0;
   flex-wrap: wrap;
   justify-content: space-between;
+}
 
-  .nb-results {
-    display: inline-flex;
-  }
+.nb-results {
+  display: inline-flex;
+  margin-bottom: 20px;
+  gap: 30px;
 }
 
 .results-item {
@@ -173,9 +189,38 @@ footer {
 }
 
 @media screen and (min-width: 993px) {
+  .results {
+    margin-bottom: 0;
+  }
+
+  .nb-results {
+    margin-bottom: 0;
+    gap: 0;
+  }
+
+  .mass-action-button {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 0.5rem;
+  }
+
+  .mass-action-group {
+    gap: 10px;
+  }
+
+  .mass-action-tags {
+    margin-top: 0;
+    margin-left: 7px;
+    flex-wrap: initial;
+  }
+
   .mass-action {
     display: flex;
+    margin-top: 10px;
     align-items: center;
-    gap: 30px;
+
+    .mass-action-tags-input.mass-action-tags-input {
+      height: 21px;
+    }
   }
 }

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

@@ -53,13 +53,11 @@
                 <button class="mass-action-button 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="mass-action-button 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="mass-action-button 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>
-                <label for="mass-action-tags-displayed" class="mass-action-button btn cyan darken-1" type="button" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></label>
             </div>
 
-            <input id="mass-action-tags-displayed" class="toggle-checkbox" type="checkbox" />
             <div class="mass-action-tags">
+                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></button>
                 <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" />
-                <button class="btn cyan darken-1" type="submit" name="tag">{{ 'entry.list.add_tags'|trans }}</button>
             </div>
         </div>