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

Little frontend refactor (#14755)

Browse source 
* profile dropdown update
* dropdown fixes
* preview cards fix
This commit is contained in:
ludwiczakpawel 2021-09-17 16:23:51 +02:00 • committed by GitHub
parent 57561b1815
commit e7af2bfc86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 48 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -46,12 +46,12 @@ 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 m:pl-1" >
commentHeader = `<div class="comment__header" >
<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-2 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 p-1 -my-1 -ml-1 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 m:pl-0" role="presentation">&bull;</span>
@ -66,13 +66,15 @@ function buildCommentHTML(comment) {
<button id="comment-dropdown-trigger-${comment.id}" aria-controls="comment-dropdown-${comment.id}" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon" aria-label="Toggle dropdown menu" aria-haspopup="true">
${ iconSmallOverflowHorizontal }
</button>
<ul id="comment-dropdown-${comment.id}" class="crayons-dropdown p-1 right-1 s:right-0 s:left-auto fs-base dropdown">
<li><a href="${ comment.url }" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to ${ comment.user.name }'s comment" data-no-instant>Copy link</a></li>
<li><a href="${ comment.url }/settings" class="crayons-link crayons-link--block" aria-label="Go to ${ comment.user.name }'s comment settings">Settings</a></li>
<li><a href="/report-abuse?url=${ comment.url }" class="crayons-link crayons-link--block" aria-label="Report ${ comment.user.name }'s comment as abusive or violating our code of conduct and/or terms and conditions">Report abuse</a></li>
<li class="${ comment.newly_created ? '' : 'hidden' }"><a href="${ comment.url }/edit" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Edit this comment">Edit</a></li>
<li class="${ comment.newly_created ? '' : 'hidden' }"><a data-no-instant="" href="${ comment.url }/delete_confirm" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Delete this comment">Delete</a></li>
</ul>
<div id="comment-dropdown-${comment.id}" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
<ul class="m-0">
<li><a href="${ comment.url }" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to ${ comment.user.name }'s comment" data-no-instant>Copy link</a></li>
<li><a href="${ comment.url }/settings" class="crayons-link crayons-link--block" aria-label="Go to ${ comment.user.name }'s comment settings">Settings</a></li>
<li><a href="/report-abuse?url=${ comment.url }" class="crayons-link crayons-link--block" aria-label="Report ${ comment.user.name }'s comment as abusive or violating our code of conduct and/or terms and conditions">Report abuse</a></li>
<li class="${ comment.newly_created ? '' : 'hidden' }"><a href="${ comment.url }/edit" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Edit this comment">Edit</a></li>
<li class="${ comment.newly_created ? '' : 'hidden' }"><a data-no-instant="" href="${ comment.url }/delete_confirm" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Delete this comment">Delete</a></li>
</ul>
</div>
</div>
</div>`;

14
app/assets/stylesheets/components/dropdowns.scss
View file

@ -3,7 +3,7 @@
.crayons-dropdown {
position: absolute;
display: none; // initially hidden
padding: var(--su-4);
padding: var(--su-2);
min-width: 250px;
z-index: var(--z-dropdown);
background: var(--card-bg);
@ -17,18 +17,6 @@
width: max-content;
}
&.side-bar {
bottom: 100%;
font-size: var(--fs-base);
padding: var(--su-2);
right: var(--su-1);
@media (min-width: $breakpoint-m) {
right: auto;
bottom: auto;
top: 0;
}
}
&.reverse {
// Flips the dropdown to drop-upwards when set
bottom: 100%;

2
app/assets/stylesheets/components/stories.scss
View file

@ -12,7 +12,7 @@
.crayons-story {
background: var(--card-bg);
box-shadow: 0 0 0 1px var(--card-border);
margin: 0 0 var(--su-3);
margin: 0 0 var(--su-2);
position: relative;
&:focus-within {

2
app/assets/stylesheets/views/profile.scss
View file

@ -34,6 +34,8 @@
right: 0;
top: var(--su-7);
position: absolute;
left: 0;
justify-content: flex-end;
padding: var(--padding) var(--padding) 0 0;
@media (min-width: $breakpoint-m) {

2
app/javascript/CommentSubscription/CommentSubscription.jsx
View file

@ -144,7 +144,7 @@ export class CommentSubscription extends Component {
dropdownContentId="subscription-settings-dropdown"
dropdownContentCloseButtonId="subscription-settings-done-btn"
data-testid="subscriptions-panel"
className={`right-4 left-4 s:right-0 s:left-auto${
className={`right-4 left-4 s:right-0 p-4 s:left-auto${
positionType === 'relative' ? ' w-full' : ''
}`}
ref={(element) => {

2
app/views/articles/_actions.html.erb
View file

@ -33,7 +33,7 @@
<%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: "More...") %>
</button>
<div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-1 s:left-auto m:left-100">
<div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto bottom-100 m:bottom-auto m:top-0 mb-1 m:mb-0">
<div>
<button
id="copy-post-url-button"

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

@ -1,4 +1,4 @@
<div class="comment__header m:pl-1">
<div class="comment__header">
<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-2 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 p-1 -my-1 -ml-1 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}" %>
@ -25,18 +25,20 @@
<button id="comment-dropdown-trigger-<%= comment.id %>" aria-controls="comment-dropdown-<%= comment.id %>" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon" aria-label="Toggle dropdown menu" aria-haspopup="true">
<%= inline_svg_tag("small-overflow-horizontal.svg", aria: true, class: "crayons-icon pointer-events-none", title: "Dropdown menu") %>
</button>
<ul id="comment-dropdown-<%= comment.id %>" class="crayons-dropdown p-1 right-1 s:right-0 s:left-auto fs-base dropdown">
<li><a href="<%= URL.comment(comment) %>" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to <%= comment.user.name %>'s comment" data-no-instant>Copy link</a></li>
<li class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= URL.comment(comment) %>/settings" aria-label="Go to <%= comment.user.name %>'s comment settings"></li>
<% action = comment.hidden_by_commentable_user ? "Unhide" : "Hide" %>
<li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="<%= commentable.user_id %>" data-user-id="<%= comment.user_id %>">
<a href="#" class="crayons-link crayons-link--block hide-comment" data-hide-type="<%= action.downcase %>" data-comment-id="<%= comment.id %>" aria-label="<%= action %> <%= comment.user.name %>'s comment">
<%= action %>
</a>
</li>
<li class="mod-actions hidden mod-actions-comment-button" data-path="<%= URL.comment(comment) %>/mod" aria-label="Moderate <%= comment.user.name %>'s comment"></li>
<li class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= URL.comment(comment) %>" aria-label="Report <%= comment.user.name %>'s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
<li class="current-user-actions"></li>
</ul>
<div id="comment-dropdown-<%= comment.id %>" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
<ul class="m-0">
<li><a href="<%= URL.comment(comment) %>" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to <%= comment.user.name %>'s comment" data-no-instant>Copy link</a></li>
<li class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= URL.comment(comment) %>/settings" aria-label="Go to <%= comment.user.name %>'s comment settings"></li>
<% action = comment.hidden_by_commentable_user ? "Unhide" : "Hide" %>
<li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="<%= commentable.user_id %>" data-user-id="<%= comment.user_id %>">
<a href="#" class="crayons-link crayons-link--block hide-comment" data-hide-type="<%= action.downcase %>" data-comment-id="<%= comment.id %>" aria-label="<%= action %> <%= comment.user.name %>'s comment">
<%= action %>
</a>
</li>
<li class="mod-actions hidden mod-actions-comment-button" data-path="<%= URL.comment(comment) %>/mod" aria-label="Moderate <%= comment.user.name %>'s comment"></li>
<li class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= URL.comment(comment) %>" aria-label="Report <%= comment.user.name %>'s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
<li class="current-user-actions"></li>
</ul>
</div>
</div>
</div>

2
app/views/dashboards/_dashboard_article.html.erb
View file

@ -13,7 +13,7 @@
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More...") %>
</button>
<div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 z-10 align-left js-ellipsis-menu-dropdown p-1">
<div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 z-10 align-left js-ellipsis-menu-dropdown">
<%= form_for(article, method: :patch, remote: true, authenticity_token: true, html: { "data-type": "json", class: "p-0 js-archive-toggle" }) do |f| %>
<%= f.hidden_field :archived, value: !article.archived %>

2
app/views/dashboards/_dashboard_article_row.html.erb
View file

@ -98,7 +98,7 @@
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More options for post: #{article.title}") %>
</button>
<div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 align-left js-ellipsis-menu-dropdown p-1">
<div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 align-left js-ellipsis-menu-dropdown">
<% if article.user_subscriptions_count > 0 %>
<a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="crayons-link crayons-link--block w-100"><%= "Subscriptions (#{article.user_subscriptions_count})" %></a>
<% end %>

20
app/views/layouts/_nav_menu.html.erb
View file

@ -1,6 +1,6 @@
<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
<ul class="p-0" id="crayons-header__menu__dropdown__list">
<li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-2 mb-2">
<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
<ul class="m-0" id="crayons-header__menu__dropdown__list">
<li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 pb-2 mb-2">
<a id="first-nav-link" class="crayons-link crayons-link--block">
<div>
<span class="fw-medium block">...</span>
@ -9,18 +9,18 @@
</a>
</li>
<li class="px-2 js-header-menu-admin-link hidden">
<li class="js-header-menu-admin-link hidden">
<a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant>Admin</a>
</li>
<li class="px-2"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
<li class="px-2"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
<li class="px-2"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
<li class="px-2"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
<li class="border-0 border-b-1 border-solid border-base-20 px-2 pb-2">
<li><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
<li><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
<li><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
<li><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
<li class="border-0 border-b-1 border-solid border-base-20 pb-2">
<a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link">Settings</a>
</li>
<li class="px-2 py-2">
<li class="pt-2">
<a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
</li>
</ul>

4
app/views/users/show.html.erb
View file

@ -36,12 +36,12 @@
<% end %>
<% end %>
<button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
<div class="profile-dropdown ml-2 relative hidden" data-username="<%= @user.username %>">
<div class="profile-dropdown ml-2 s:relative hidden" data-username="<%= @user.username %>">
<button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
<%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "User actions") %>
</button>
<div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 p-1">
<div id="user-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1">
<%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
<% if user_signed_in? %>
<a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>