paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

modal_css: Refactor css of header of user profile modal.

Browse Source 
This commit enhances the layout of user profile modal header by using
flexbox properties.
This commit is contained in:
Pratik
2024-04-03 12:54:40 +05:30
committed by Tim Abbott
parent fdbce9d889
commit 3b2bf7b2b9
3 changed files with 21 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/styles/modal.css
View File

@@ -62,6 +62,9 @@
max-width: 80%;
display: flex;
align-items: center;
gap: 10px;
/* This line-height is to increase the vertical clickable areas on the icons. */
line-height: 28px;
.user-profile-name {
white-space: nowrap;

26
web/styles/popovers.css
View File

@@ -535,26 +535,18 @@ ul {
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button {
width: 25px;
height: 14px;
text-align: center;
font-size: 18px;
}
.user-profile-manage-own-copy-link-button {
width: 20px;
height: 15px;
text-align: center;
text-decoration: none;
font-size: 15px;
}
#user_profile_manage_own_copy_link {
height: 25px;
margin-right: 8px;
.user-profile-manage-own-copy-link-button {
font-size: 19px;
text-decoration: none;
}
#user_profile_manage_own_edit_link {
height: 25px;
.zulip-icon-link,
.zulip-icon-edit {
vertical-align: middle;
}
.deactivated-user-icon {
@@ -562,10 +554,6 @@ ul {
vertical-align: middle;
}
.user-profile-name {
margin: 0 10px;
}
.zulip-icon.zulip-icon-bot {
padding: unset;
}

2
web/templates/user_profile_modal.hbs
View File

@@ -2,6 +2,7 @@
<div class="modal__overlay" tabindex="-1">
<div class="modal__container new-style" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
<div class="modal__header">
<h1 class="modal__title user-profile-name-heading" id="name">
{{#unless is_bot}}
{{#if is_active}}
<div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
@@ -13,7 +14,6 @@
</div>
{{/if}}
{{/unless}}
<h1 class="modal__title user-profile-name-heading" id="name">
{{#if is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{/if}}