github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 14:32:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve mobile user card button display (#24311)

Browse Source
This commit is contained in:
Kris 2023-11-14 17:13:37 -05:00 committed by GitHub
parent e69f93e729
commit 38e53b5e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/user-card-contents.hbs
View File

@ -171,13 +171,11 @@
/>
</li>
{{/if}}
<li>
<PluginOutlet
@name="user-card-additional-buttons"
@connectorTagName="div"
@outletArgs={{hash user=this.user close=(action "close")}}
/>
</li>
<PluginOutlet
@name="user-card-additional-buttons"
@connectorTagName="li"
@outletArgs={{hash user=this.user close=(action "close")}}
/>
</ul>
<PluginOutlet
@name="user-card-additional-controls"

15
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -21,20 +21,21 @@
}
.usercard-controls {
width: 100%; // always wraps to next line
--usercard-control-margin: 0.25em;
display: flex;
flex-wrap: wrap;
margin: 1em calc(var(--usercard-control-margin) * -1) 0;
margin-top: 1em;
gap: 0.5em;
li {
flex: 1 0 calc(50% - (var(--usercard-control-margin) * 2));
min-width: 0;
margin: 0 var(--usercard-control-margin);
flex: 1 0 45%;
min-width: 8em;
&:empty {
display: none;
}
button {
@include ellipsis;
margin-bottom: calc(var(--usercard-control-margin) * 2);
margin: 0;
.d-button-label {
@include ellipsis;
}
}
}
}