UX: post action spacing refactor & consistency (#15403)

app/assets/stylesheets/common/base/topic-post.scss

@@ -227,6 +227,133 @@ $quote-share-maxwidth: 150px;
   }
 }
 
+nav.post-controls {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--primary-low-mid);
+
+  .actions {
+    display: inline-flex;
+    text-align: right;
+    margin-left: auto;
+
+    // Some buttons can be doubled up, like likes or flags
+    .double-button {
+      display: inline-flex;
+      flex: 0 1 auto;
+      align-items: center;
+      white-space: nowrap;
+      button {
+        // It looks really confusing when one half a double button has an inner shadow on click.
+        &:active {
+          box-shadow: none;
+        }
+        &.my-likes,
+        &.read-indicator,
+        &.regular-likes {
+          // Like count on posts
+          .d-icon {
+            color: var(--primary-low-mid);
+            padding-left: 0.45em;
+          }
+        }
+        &.has-like {
+          // Like button after I've liked
+          .d-icon {
+            color: var(--love);
+          }
+        }
+        &[disabled] {
+          // Disabled like button
+          cursor: not-allowed;
+        }
+        &.button-count {
+          // Like count button
+          height: 100%; // sometimes the font might be shorter than the icon
+          &:not(.my-likes) {
+            padding-right: 0;
+          }
+          + .toggle-like {
+            // Like button when like count is present
+            padding-left: 0.45em;
+          }
+        }
+      }
+    }
+    a,
+    button {
+      color: var(--primary-low-mid-or-secondary-high);
+      .d-icon {
+        opacity: 1;
+      }
+      display: inline-block;
+    }
+
+    button {
+      flex: 0 1 auto;
+      font-size: var(--font-up-1);
+      padding: 8px 10px;
+      vertical-align: top;
+      background: transparent;
+      border: none;
+      &.d-hover,
+      &:focus,
+      &:active {
+        outline: none;
+        background: var(--primary-low);
+        color: var(--primary);
+      }
+      &.hidden {
+        display: none;
+      }
+      &.admin {
+        position: relative;
+      }
+      &.delete.d-hover,
+      &.delete:hover,
+      &.delete:focus {
+        background: var(--danger);
+        color: var(--secondary);
+        .d-icon {
+          color: var(--secondary);
+        }
+      }
+      &.bookmarked .d-icon {
+        color: var(--tertiary);
+      }
+      &.create {
+        margin-right: 0;
+        color: var(--primary-high-or-secondary-low);
+        .d-icon {
+          color: var(--primary-high-or-secondary-low);
+        }
+      }
+    }
+  }
+
+  .show-replies {
+    font-size: var(--font-up-1);
+    font-size: inherit;
+    padding: 10px;
+    color: var(--primary-medium);
+    &:hover,
+    &:focus {
+      outline: none;
+      color: var(--primary);
+      background: var(--primary-low);
+    }
+    .d-icon {
+      font-size: var(--font-down-1);
+    }
+    .d-button-label + .d-icon {
+      margin-left: 0.45em;
+      margin-right: 0;
+    }
+  }
+}
+
 .deleted {
   .regular > .cooked {
     background-color: var(--danger-low-mid);

app/assets/stylesheets/desktop/topic-post.scss

@@ -48,26 +48,22 @@ section.post-menu-area {
 }
 
 nav.post-controls {
-  padding: 0;
+  // for consistency, try to control spacing by editing these variables
-  display: flex;
+  --control-margin: 0.33em;
-  align-items: center;
+  --control-icon-space: 0.33em;
-  justify-content: space-between;
-
   .actions {
-    text-align: right;
+    button {
-    display: inline-block;
+      margin-left: var(--control-margin);
-    margin-left: auto;
+      &.create {
-
+        margin-left: calc(var(--control-margin) * 1.52);
-    .more-actions {
+        .d-icon {
-      display: none;
+          margin-right: var(--control-icon-space);
-      overflow: hidden;
+        }
+      }
     }
-
     // Some buttons can be doubled up, like likes or flags
     .double-button {
-      display: inline-flex;
+      margin-left: var(--control-margin);
-      color: var(--primary-low-mid);
-      margin-right: 0.15em;
       &:hover {
         button {
           background: var(--primary-low);
@@ -75,21 +71,8 @@ nav.post-controls {
         }
       }
       button {
-        // It looks really confusing when one half a double button has an inner shadow on click.
-        &:active {
-          box-shadow: none;
-        }
         margin-left: 0;
         margin-right: 0;
-        &.my-likes,
-        &.read-indicator,
-        &.regular-likes {
-          // Like count on posts
-          .d-icon {
-            color: var(--primary-low-mid);
-            padding-left: 0.45em;
-          }
-        }
         &.like {
           // Like button with 0 likes
           &.d-hover {
@@ -101,9 +84,6 @@ nav.post-controls {
         }
         &.has-like {
           // Like button after I've liked
-          .d-icon {
-            color: var(--love);
-          }
           &.d-hover {
             background: var(--primary-low);
             .d-icon {
@@ -111,21 +91,13 @@ nav.post-controls {
             }
           }
         }
-        &[disabled] {
-          // Disabled like button
-          cursor: not-allowed;
-        }
         &.button-count {
           // Like count button
-          &:not(.my-likes) {
-            padding-right: 0;
-          }
           &.d-hover {
             color: var(--primary);
           }
           + .toggle-like {
             // Like button when like count is present
-            padding-left: 0.45em;
             &.d-hover {
               background: var(--primary-low);
             }
@@ -133,92 +105,11 @@ nav.post-controls {
         }
       }
     }
-    a,
-    button {
-      color: var(--primary-low-mid-or-secondary-high);
-      .d-icon {
-        opacity: 1;
-      }
-      margin-right: 2px;
-      display: inline-block;
-    }
-    a.toggle-likes {
-      padding: 8px 0;
-      margin-right: -3px;
-    }
-    span.badge-posts {
-      margin-right: 5px;
-      transition: all linear 0.15s;
-    }
-
-    button.create {
-      margin-right: 0;
-      color: var(--primary-high-or-secondary-low);
-      margin-left: 10px;
-      .d-icon {
-        color: var(--primary-high-or-secondary-low);
-      }
-    }
-    .create .d-icon {
-      margin-right: 5px;
-    }
-    button {
-      font-size: $font-up-1;
-      padding: 8px 10px;
-      vertical-align: top;
-      background: transparent;
-      border: none;
-      margin-left: 3px;
-      &.d-hover,
-      &:focus,
-      &:active {
-        outline: none;
-        background: var(--primary-low);
-        color: var(--primary);
-      }
-      &.hidden {
-        display: none;
-      }
-      &.admin {
-        position: relative;
-      }
-      &.delete.d-hover,
-      &.delete:hover,
-      &.delete:focus {
-        background: var(--danger);
-        color: var(--secondary);
-        .d-icon {
-          color: var(--secondary);
-        }
-      }
-      &.bookmark {
-        padding: 8px 11px;
-        &.bookmarked .d-icon {
-          color: var(--tertiary);
-        }
-      }
-    }
   }
-
   .show-replies {
-    font-size: $font-up-1;
+    margin-left: -11px; // negates padding-left on .cooked, for visual alignment
-    margin-left: -10px;
-    font-size: inherit;
-    padding: 10px;
-    color: var(--primary-medium);
-    &:hover,
-    &:focus {
-      outline: none;
-      color: var(--primary);
-      background: var(--primary-low);
-    }
     .d-icon {
-      margin-right: 5px;
+      margin-right: var(--control-icon-space);
-      font-size: $font-down-1;
-    }
-    .d-button-label + .d-icon {
-      margin-left: 5px;
-      margin-right: 0;
     }
   }
 }

app/assets/stylesheets/mobile/topic-post.scss

@@ -28,100 +28,64 @@ span.badge-posts {
   display: none;
 }
 
-.topic-post {
+nav.post-controls {
-  nav.post-controls {
+  // for consistency, try to control spacing by editing these variables
-    color: var(--primary-low-mid-or-secondary-high);
+  --control-space: 0.58em;
-    &.expanded {
+  --control-space-small: calc(var(--control-space) / 2);
-      // on small devices with many buttons this can overflow
+  --control-space-large: calc(var(--control-space) * 1.3);
-      overflow-x: scroll;
+  &.expanded {
+    // on small devices with many buttons this can overflow
+    overflow-x: scroll;
+  }
+  .actions {
+    // using an auto margin on first-child instead of justify-content on the parent
+    // because justify-content breaks overflow scrolling
+    :first-child {
+      margin-left: auto;
     }
-    .actions {
+    // Some buttons can be doubled up, like likes or flags
-      display: flex;
+    .double-button {
-      // using an auto margin on first-child instead of justify-content on the parent
+      button {
-      // because justify-content breaks overflow scrolling
+        &.button-count {
-      :first-child {
+          padding: var(--control-space);
-        margin-left: auto;
+          + .toggle-like,
-      }
+          + .create-flag {
-
+            padding: var(--control-space) var(--control-space-large)
-      // Handles the like and flag buttons in the post menu.
+              var(--control-space) var(--control-space-small);
-      .double-button {
-        display: flex;
-        flex: 0 1 auto;
-        align-items: center;
-        button {
-          &.like,
-          &.read-indicator,
-          &.create-flag {
-            flex: 1 1 auto;
           }
-          &.button-count {
+          &.regular-likes {
-            padding: 8px 4px 8px 8px;
+            padding: var(--control-space) var(--control-space-small)
-            + .toggle-like,
+              var(--control-space) var(--control-space-large);
-            + .create-flag {
-              padding: 8px 8px 8px 4px;
-            }
-            &.my-likes,
-            &.regular-likes {
-              display: flex;
-              max-width: unset;
-              padding: 8px;
-              .d-icon {
-                padding-left: 8px;
-              }
-            }
           }
         }
       }
+    }
+    button {
+      padding: var(--control-space) var(--control-space-large);
+      &.expand-post {
+        margin: var(--control-space) 0 var(--control-space) 0;
+      }
+      &.has-like {
+        .d-icon {
+          color: var(--love);
+        }
+      }
+    }
+  }
+  &.replies-button-visible {
+    display: flex;
+    align-items: center;
+    .show-replies {
+      display: flex;
+      + .reply {
+        margin-left: 0;
+      }
       .d-icon {
-        opacity: 1;
+        padding-left: var(--control-space);
-      }
-      button {
-        border: none;
-        font-size: $font-up-1;
-        padding: 10px 8px;
-        background: transparent;
-        flex: 1 1 auto;
-        max-width: 45px;
-        &.hidden {
-          display: none;
-        }
-        &.admin {
-          position: relative;
-        }
-        &.expand-post {
-          margin: 10px 0 10px 0;
-        }
-
-        &.has-like {
-          .d-icon {
-            color: var(--love);
-          }
-        }
-        &.bookmarked {
-          .d-icon {
-            color: var(--tertiary);
-          }
-        }
       }
     }
-    &.replies-button-visible {
+    .actions {
-      display: flex;
+      flex-grow: 2;
-      align-items: center;
-      .show-replies {
-        display: flex;
-        font-size: $font-up-1;
-        padding: 10px 8px;
-        + .reply {
-          margin-left: 0;
-        }
-        .d-icon {
-          padding-left: 8px;
-          font-size: $font-down-1;
-        }
-      }
-      .actions {
-        flex-grow: 2;
-      }
     }
   }
 }