fix(ui): random text overflow spots
This commit is contained in:
parent
2102a8ea14
commit
573b10f5e1
6 changed files with 31 additions and 6 deletions
|
@ -149,6 +149,19 @@ article {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* typo */
|
/* typo */
|
||||||
|
.name {
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 901px) {
|
||||||
|
.name.shorter {
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
community=community, size="72px") }}
|
community=community, size="72px") }}
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex gap-2 items-center">
|
<div class="flex gap-2 items-center">
|
||||||
<h3 id="title" class="title">
|
<h3 id="title" class="title name shorter">
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
{% if community.context.display_name %}
|
{% if community.context.display_name %}
|
||||||
{{ community.context.display_name }}
|
{{ community.context.display_name }}
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
{{ icon "ellipsis" }}
|
{{ icon "ellipsis" }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="inner left">
|
<div class="inner">
|
||||||
<button
|
<button
|
||||||
class="red"
|
class="red"
|
||||||
onclick="trigger('me::report', ['{{ community.id }}', 'community'])"
|
onclick="trigger('me::report', ['{{ community.id }}', 'community'])"
|
||||||
|
|
|
@ -438,6 +438,16 @@
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
role: (new_role) => {
|
role: (new_role) => {
|
||||||
|
const [matching, _] =
|
||||||
|
all_matching_permissions(new_role);
|
||||||
|
|
||||||
|
document.getElementById(
|
||||||
|
"permissions",
|
||||||
|
).innerHTML = get_permissions_html(
|
||||||
|
rebuild_role(matching),
|
||||||
|
"permissions",
|
||||||
|
);
|
||||||
|
|
||||||
return update_user_role(
|
return update_user_role(
|
||||||
e.target.uid.value,
|
e.target.uid.value,
|
||||||
new_role,
|
new_role,
|
||||||
|
|
|
@ -57,7 +57,7 @@ community %}
|
||||||
{{ components::community_avatar(id=community.id, community=community,
|
{{ components::community_avatar(id=community.id, community=community,
|
||||||
size="48px") }}
|
size="48px") }}
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<h3>{{ community.context.display_name }}</h3>
|
<h3 class="name">{{ community.context.display_name }}</h3>
|
||||||
<span class="fade"><b>{{ community.member_count }}</b> members</span>
|
<span class="fade"><b>{{ community.member_count }}</b> members</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
@ -132,7 +132,9 @@ show_community %}
|
||||||
|
|
||||||
<div class="flex flex-col w-full gap-1">
|
<div class="flex flex-col w-full gap-1">
|
||||||
<div class="flex flex-wrap gap-2 items-center">
|
<div class="flex flex-wrap gap-2 items-center">
|
||||||
{{ components::full_username(user=owner) }}
|
<span class="name"
|
||||||
|
>{{ components::full_username(user=owner) }}</span
|
||||||
|
>
|
||||||
|
|
||||||
<span class="fade date">{{ post.created }}</span>
|
<span class="fade date">{{ post.created }}</span>
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
<h3 id="username" class="username flex items-center gap-2">
|
<h3 id="username" class="username flex items-center gap-2">
|
||||||
{{ components::username(user=profile) }}
|
<span class="name shorter">{{ components::username(user=profile) }}</span>
|
||||||
|
|
||||||
{% if profile.is_verified %}
|
{% if profile.is_verified %}
|
||||||
<span title="Verified" style="color: var(--color-primary);" class="flex items-center">
|
<span title="Verified" style="color: var(--color-primary);" class="flex items-center">
|
||||||
|
|
|
@ -262,7 +262,7 @@ media_theme_pref();
|
||||||
const height = parent_height;
|
const height = parent_height;
|
||||||
const y = box.y + scroll;
|
const y = box.y + scroll;
|
||||||
|
|
||||||
if (y > height - scroll - 300) {
|
if (y > height - scroll - 375) {
|
||||||
dropdown.classList.add("top");
|
dropdown.classList.add("top");
|
||||||
} else {
|
} else {
|
||||||
dropdown.classList.remove("top");
|
dropdown.classList.remove("top");
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue