maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add horizontal padding on preview card trigger button (#14472)

Browse source 
* tweak trigger button padding on article byline

* tweak padding on comment preview triggers
This commit is contained in:
Suzanne Aitchison 2021-08-11 12:31:48 +01:00 • committed by GitHub
parent 382ca6e802
commit e749626e71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/utilities/buildCommentHTML.js.erb
View file

@ -46,15 +46,15 @@ function buildCommentHTML(comment) {
<img class="crayons-avatar__image" width="32" height="32" src="${ comment.user.profile_pic }" alt="${ comment.user.username } profile" />
</a>`;
commentHeader = `<div class="comment__header" >
commentHeader = `<div class="comment__header m:pl-1" >
<a href="/${ comment.user.username }" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
<span class="js-comment-username">${ comment.user.name }</span>
</a>
<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
<button id="comment-profile-preview-trigger-${comment.id}" aria-controls="comment-profile-preview-content-${comment.id}" class="profile-preview-card__trigger px-0 crayons-btn crayons-btn--ghost" aria-label="${comment.user.name} profile details">${comment.user.name}</button>
<button id="comment-profile-preview-trigger-${comment.id}" aria-controls="comment-profile-preview-content-${comment.id}" class="profile-preview-card__trigger px-2 crayons-btn crayons-btn--ghost" aria-label="${comment.user.name} profile details">${comment.user.name}</button>
<span data-js-comment-user-id="${comment.user.id}" data-js-dropdown-content-id="comment-profile-preview-content-${comment.id}" class="preview-card-placeholder"></span>
</div>
<span class="color-base-30 px-2" role="presentation">&bull;</span>
<span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>
<a href="${ comment.url }" class="comment-date crayons-link crayons-link--secondary fs-s">
<time datetime="${ comment.published_timestamp }">

8
app/views/articles/show.html.erb
View file

@ -135,12 +135,12 @@
<% end %>
<div class="crayons-article__subheader">
<a href="/<%= @user.username %>" class="flex items-center mr-2 mb-4 s:mb-0 fw-medium crayons-link">
<span class="crayons-avatar crayons-avatar--l mr-2"><img class="crayons-avatar__image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" alt="" /></span>
<a href="/<%= @user.username %>" class="flex items-center mr-2 m:mr-1 mb-4 s:mb-0 fw-medium crayons-link">
<span class="crayons-avatar crayons-avatar--l mr-2 m:mr-1"><img class="crayons-avatar__image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" alt="" /></span>
<span class="block m:hidden"><%= @user.name %></span>
</a>
<div class="profile-preview-card relative mr-4 mb-4 s:mb-0 fw-medium">
<button id="profile-preview-trigger" class="profile-preview-card__trigger px-0 crayons-btn crayons-btn--ghost hidden m:block" aria-label="<%= @user.name %> profile details"><%= @user.name %></button>
<div class="profile-preview-card relative mr-2 mb-4 s:mb-0 fw-medium">
<button id="profile-preview-trigger" class="profile-preview-card__trigger crayons-btn crayons-btn--ghost px-2 hidden m:block" aria-label="<%= @user.name %> profile details"><%= @user.name %></button>
<%= render "/shared/profile_preview_card", actor: @user, id: "profile-preview-content" %>
</div>

2
app/views/comments/_comment_date.erb
View file

@ -1,4 +1,4 @@
<span class="color-base-30 px-2" role="presentation">&bull;</span>
<span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>
<a href="<%= URL.comment(decorated_comment) %>" class="comment-date crayons-link crayons-link--secondary fs-s">
<time datetime="<%= decorated_comment.published_timestamp %>">

4
app/views/comments/_comment_header.html.erb
View file

@ -1,4 +1,4 @@
<div class="comment__header">
<div class="comment__header m:pl-1">
<a href="<%= URL.user(comment.user) %>" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
<span class="js-comment-username"><%= comment.user.name %></span>
<% if commentable_author_is_op?(commentable, comment) %>
@ -8,7 +8,7 @@
<% end %>
</a>
<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
<button id="comment-profile-preview-trigger-<%= comment.id %>" aria-controls="comment-profile-preview-content-<%= comment.id %>" class="profile-preview-card__trigger px-0 crayons-btn crayons-btn--ghost" aria-label="<%= comment.user.name %> profile details">
<button id="comment-profile-preview-trigger-<%= comment.id %>" aria-controls="comment-profile-preview-content-<%= comment.id %>" class="profile-preview-card__trigger px-2 crayons-btn crayons-btn--ghost" aria-label="<%= comment.user.name %> profile details">
<%= comment.user.name %>
</button>
<%= render "/shared/profile_preview_card", actor: comment.user, id: "comment-profile-preview-content-#{comment.id}" %>