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

Actions bar fix on Article view (#8903)

Browse source 
* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* revert
This commit is contained in:
ludwiczakpawel 2020-06-25 13:02:38 +02:00 • committed by GitHub
parent ab4753079c
commit dbe6f81b43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/stylesheets/views/article.scss
View file

@ -341,15 +341,9 @@
right: 0;
bottom: 0;
padding: var(--su-2);
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
padding-bottom: env(safe-area-inset-bottom);
}
display: flex;
align-items: center;
background: var(--body-bg);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
z-index: 100;
justify-content: space-around;
@media (min-width: $breakpoint-m) {
padding: 0;
@ -361,6 +355,19 @@
justify-content: stretch;
top: calc(var(--header-height) + var(--layout-padding) + 6vh);
}
&__inner {
display: flex;
align-items: center;
justify-content: space-around;
padding-bottom: env(safe-area-inset-bottom);
@media (min-width: $breakpoint-m) {
display: grid;
gap: var(--su-6);
justify-content: stretch;
}
}
}
.crayons-reaction {

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

@ -1,82 +1,84 @@
<div class="crayons-article-actions">
<% if @article.published? %>
<div class="crayons-article-actions__inner">
<% if @article.published? %>
<%= render partial: "articles/reaction_button",
locals: {
category: :like,
description: "Heart",
image_path: "heart.svg",
image_active_path: "heart-filled.svg"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :unicorn,
description: "Unicorn",
image_path: "unicorn.svg",
image_active_path: "unicorn-filled.svg"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :readinglist,
description: "Reading list",
image_path: "save.svg",
image_active_path: "save-filled.svg"
} %>
<% end %>
<%= render partial: "articles/reaction_button",
locals: {
category: :like,
description: "Heart",
image_path: "heart.svg",
image_active_path: "heart-filled.svg"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :unicorn,
description: "Unicorn",
image_path: "unicorn.svg",
image_active_path: "unicorn-filled.svg"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :readinglist,
description: "Reading list",
image_path: "save.svg",
image_active_path: "save-filled.svg"
} %>
<% end %>
<div class="align-center m:relative">
<button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
</button>
<div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-auto m:right-auto m:left-100 m:top-0 fs-base">
<clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
<div class="flex items-center">
<input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
<%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Notifications") %>
</div>
<div id="article-copy-link-announcer" role="alert" class="crayons-notice crayons-notice--success my-2 p-1" hidden>Copied to Clipboard</div>
</clipboard-copy>
<web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> <%= u SiteConfig.twitter_hashtag %> <%= article_url(@article) %>'>
Share to Twitter
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
Share to LinkedIn
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
Share to Reddit
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
Share to Hacker News
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
Share to Facebook
</a>
</web-share-wrapper>
<template id="web-share-button">
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post</a>
</template>
<a href="/report-abuse" class="dropdown-link-row crayons-link crayons-link--block">Report Abuse</a>
<div class="align-center m:relative">
<button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
</button>
<div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
<clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
<div class="flex items-center">
<input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
<%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Notifications") %>
</div>
<div id="article-copy-link-announcer" role="alert" class="crayons-notice crayons-notice--success my-2 p-1" hidden>Copied to Clipboard</div>
</clipboard-copy>
<web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> <%= u SiteConfig.twitter_hashtag %> <%= article_url(@article) %>'>
Share to Twitter
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
Share to LinkedIn
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
Share to Reddit
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
Share to Hacker News
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
Share to Facebook
</a>
</web-share-wrapper>
<template id="web-share-button">
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post</a>
</template>
<a href="/report-abuse" class="dropdown-link-row crayons-link crayons-link--block">Report Abuse</a>
</div>
</div>
</div>
</div>

2
app/views/shell/_top.html.erb
View file

@ -31,7 +31,7 @@
<%= javascript_packs_with_chunks_tag "Search", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %>
<% end %>
<%= yield(:page_meta) %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<%= favicon_link_tag SiteConfig.favicon_url %>
<link rel="apple-touch-icon" href="<%= cloudinary(SiteConfig.logo_png, 180, "png") %>">
<link rel="apple-touch-icon" sizes="152x152" href="<%= cloudinary(SiteConfig.logo_png, 152, "png") %>">