Skip to content

Commit

Permalink
Use op-principal classes on the Github user to look like our principa…
Browse files Browse the repository at this point in the history
…ls. Further, the CSS was cleaned up
  • Loading branch information
HDinger committed Mar 25, 2024
1 parent c1ff123 commit 9fbb746
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 22 deletions.
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
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

0 comments on commit 9fbb746

Please sign in to comment.