From e7af2bfc86d52322d79d4186cb4cc69c4e8ddd92 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Fri, 17 Sep 2021 16:23:51 +0200 Subject: [PATCH] Little frontend refactor (#14755) * profile dropdown update * dropdown fixes * preview cards fix --- .../utilities/buildCommentHTML.js.erb | 20 ++++++------ .../stylesheets/components/dropdowns.scss | 14 +------- .../stylesheets/components/stories.scss | 2 +- app/assets/stylesheets/views/profile.scss | 2 ++ .../CommentSubscription.jsx | 2 +- app/views/articles/_actions.html.erb | 2 +- app/views/comments/_comment_header.html.erb | 32 ++++++++++--------- .../dashboards/_dashboard_article.html.erb | 2 +- .../_dashboard_article_row.html.erb | 2 +- app/views/layouts/_nav_menu.html.erb | 20 ++++++------ app/views/users/show.html.erb | 4 +-- 11 files changed, 48 insertions(+), 54 deletions(-) diff --git a/app/assets/javascripts/utilities/buildCommentHTML.js.erb b/app/assets/javascripts/utilities/buildCommentHTML.js.erb index 0547742a5..0619469a3 100644 --- a/app/assets/javascripts/utilities/buildCommentHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentHTML.js.erb @@ -46,12 +46,12 @@ function buildCommentHTML(comment) { ${ comment.user.username } profile `; - commentHeader = `
+ commentHeader = `
${ comment.user.name } • @@ -66,13 +66,15 @@ function buildCommentHTML(comment) { - +
`; diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss index 6e2230fc2..0f98c1ddf 100644 --- a/app/assets/stylesheets/components/dropdowns.scss +++ b/app/assets/stylesheets/components/dropdowns.scss @@ -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%; diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss index c63217543..e343bb520 100644 --- a/app/assets/stylesheets/components/stories.scss +++ b/app/assets/stylesheets/components/stories.scss @@ -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 { diff --git a/app/assets/stylesheets/views/profile.scss b/app/assets/stylesheets/views/profile.scss index 36d6be785..1735911d4 100644 --- a/app/assets/stylesheets/views/profile.scss +++ b/app/assets/stylesheets/views/profile.scss @@ -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) { diff --git a/app/javascript/CommentSubscription/CommentSubscription.jsx b/app/javascript/CommentSubscription/CommentSubscription.jsx index a121934cd..86d243749 100644 --- a/app/javascript/CommentSubscription/CommentSubscription.jsx +++ b/app/javascript/CommentSubscription/CommentSubscription.jsx @@ -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) => { diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb index 2c50c8372..3c42c1dc9 100644 --- a/app/views/articles/_actions.html.erb +++ b/app/views/articles/_actions.html.erb @@ -33,7 +33,7 @@ <%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: "More...") %> -
+
<%= render "/shared/profile_preview_card", actor: comment.user, id: "comment-profile-preview-content-#{comment.id}" %> @@ -25,18 +25,20 @@ - +
diff --git a/app/views/dashboards/_dashboard_article.html.erb b/app/views/dashboards/_dashboard_article.html.erb index 504615243..4ec557df1 100644 --- a/app/views/dashboards/_dashboard_article.html.erb +++ b/app/views/dashboards/_dashboard_article.html.erb @@ -13,7 +13,7 @@ <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More...") %> -
+
<%= 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 %> diff --git a/app/views/dashboards/_dashboard_article_row.html.erb b/app/views/dashboards/_dashboard_article_row.html.erb index 0822bd5b6..00546dd70 100644 --- a/app/views/dashboards/_dashboard_article_row.html.erb +++ b/app/views/dashboards/_dashboard_article_row.html.erb @@ -98,7 +98,7 @@ <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More options for post: #{article.title}") %> -
+
<% if article.user_subscriptions_count > 0 %> " class="crayons-link crayons-link--block w-100"><%= "Subscriptions (#{article.user_subscriptions_count})" %> <% end %> diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb index 5eeca5aba..e1a5f2041 100644 --- a/app/views/layouts/_nav_menu.html.erb +++ b/app/views/layouts/_nav_menu.html.erb @@ -1,6 +1,6 @@ -
-