]> cat aescling's git repositories - mastodon.git/commitdiff
[Glitch] Fix regressions in icon buttons in web UI
authorEugen Rochko <eugen@zeonfederated.com>
Sun, 4 Oct 2020 13:02:36 +0000 (15:02 +0200)
committerThibaut Girka <thib@sitedethib.com>
Mon, 26 Oct 2020 18:51:09 +0000 (19:51 +0100)
Port a549415868fe23e0afaf258c17afafac117d0163 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
app/javascript/flavours/glitch/components/icon_button.js
app/javascript/flavours/glitch/styles/components/index.scss
app/javascript/flavours/glitch/styles/components/status.scss

index 51540d17df2485a4c48685da4124b1405e2728c1..58d3568dd2bc35d416e656a02b03c9b8ef22e94e 100644 (file)
@@ -123,6 +123,7 @@ export default class IconButton extends React.PureComponent {
       activate,
       deactivate,
       overlayed: overlay,
+      'icon-button--with-counter': typeof counter !== 'undefined',
     });
 
     if (typeof counter !== 'undefined') {
index 337005a5976c9c3100223d37289c2a801a234832..0614278e2da4ff8212e042d8f2692a296a89d17e 100644 (file)
 }
 
 .icon-button {
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   padding: 0;
   color: $action-button-color;
   border: 0;
   cursor: pointer;
   transition: all 100ms ease-in;
   transition-property: background-color, color;
+  text-decoration: none;
 
   &:hover,
   &:active,
     }
   }
 
+  &--with-counter {
+    display: inline-flex;
+    align-items: center;
+    width: auto !important;
+  }
+
   &__counter {
     display: inline-block;
     width: 14px;
index c589d935a0a470d1981956655b80cdac70e9a878..7ec377bada1760a05f52f0f20f78d5299691cd34 100644 (file)
 
 .status__action-bar-button {
   margin-right: 18px;
+
+  &.icon-button--with-counter {
+    margin-right: 14px;
+  }
 }
 
 .status__action-bar-dropdown {