Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[50213][46215] Missing space between avatars and usernames #15098

Merged
merged 2 commits into from
Mar 25, 2024
Merged

[50213][46215] Missing space between avatars and usernames #15098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1ff123
Set principal class on the name inside admin->users table
HDinger Mar 25, 2024
9fbb746
Use op-principal classes on the Github user to look like our principa…
HDinger Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/users/row_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ def row_css_class
def login
icon = helpers.avatar user, size: :mini

link = link_to h(user.login), helpers.allowed_management_user_profile_path(user)
link = link_to h(user.login), helpers.allowed_management_user_profile_path(user), class: "op-principal--name"

icon + link
end
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/shared/components/principal/principal-renderer.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ export class PrincipalRendererService {
}

const image = new Image();
image.classList.add('op-principal--avatar');
image.classList.add('op-avatar');
image.classList.add(`op-avatar_${options.size}`);
image.src = url;
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/global_styles/content/_principal.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
flex-grow: 1
flex-shrink: 1
min-width: 0 // See: https://css-tricks.com/flexbox-truncated-text/
margin-left: $spot-spacing-0_25

&_wrapped &--name
white-space: normal
Expand All @@ -28,6 +29,3 @@
@media screen and (max-width: $breakpoint-sm)
&--name
display: none

.op-avatar + .op-principal--name
margin-left: $spot-spacing-0_5
22 changes: 12 additions & 10 deletions modules/github_integration/frontend/module/pull-request/pull-request.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,21 @@

<div class="op-pull-request--info">
{{ text.label_created_by }}
<img
*ngIf="pullRequest._embedded.githubUser"
alt='PR author avatar'
class='op-pull-request--avatar op-avatar op-avatar_mini'
[src]="pullRequest._embedded.githubUser.avatarUrl"
/>
<span class='op-pull-request--user'>

<div class="op-principal"
*ngIf="pullRequest._embedded.githubUser">
<img
alt='PR author avatar'
class='op-pull-request--avatar op-avatar op-avatar_mini op-principal--avatar'
[src]="pullRequest._embedded.githubUser.avatarUrl"
/>
<a
*ngIf="pullRequest._embedded.githubUser"
[href]="pullRequest._embedded.githubUser.htmlUrl"
[textContent]="pullRequest._embedded.githubUser.login"
></a>.
</span>
class="op-principal--name"
></a>
</div>
.

<span class='op-pull-request--date'>
{{ text.label_last_updated_on }}
Expand Down
16 changes: 4 additions & 12 deletions modules/github_integration/frontend/module/pull-request/pull-request.component.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
display: grid
grid-template-columns: auto 1fr auto auto
grid-template-areas: "link link link link" "title title title state" "info info info info" "checks-label checks-label checks-label checks-label" "checks checks checks checks"
align-items: center
margin-bottom: 11px
padding-bottom: 11px
border-bottom: 1px solid #dddddd
Expand All @@ -48,34 +49,25 @@
line-height: 32px
margin-right: 20px

&--avatar
grid-area: info

&--info
display: block
grid-area: info
margin-bottom: 3px
font-size: 0.9rem
display: inline-flex
grid-area: info
color: var(--color-fg-muted)
// The mini avatar is much higher than the text line. Compensate it.
margin-top: -4px

&--avatar,
&--date
grid-area: info
margin-left: 0.25rem

&--link
grid-area: link
margin-top: 6px
font-size: 0.9rem

&--state
grid-area: state

&--checks-label
grid-area: checks-label
margin-top: 12px
font-size: 0.9rem
font-weight: var(--base-text-weight-bold)

&--checks
Expand Down
Loading