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

LinkTag: correctly display organization avatar (#13928)

Browse source 
* Set up Docker

* Add conditional to render org logo with user avatar

* Create styling for logo with avatar

* Update app/views/articles/_liquid.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/articles/_liquid.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* update rspec test

* Restore schema.rb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Michael Kohl <me@citizen428.net>
This commit is contained in:
Meg Gutshall 2021-06-22 23:25:29 -04:00 • committed by GitHub
parent 3b20edc944
commit ef474fd919
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
app/assets/stylesheets/ltags/LinkTag.scss
View file

@ -1,4 +1,5 @@
@import '../variables';
.ltag__link__link {
color: $black !important;
color: var(--body-color) !important;
@ -54,11 +55,63 @@
display: inline-block;
padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
padding-right: 8px;
box-sizing: border-box;
img {
width: calc(2.2vw + 45px);
height: calc(2.2vw + 45px);
margin: auto auto !important;
border-radius: 150px;
box-sizing: border-box;
}
}
.ltag__link__org__pic {
border-radius: var(--radius);
position: relative;
background-color: var(--body-color-inverted);
display: inline-block;
padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
padding-top: calc(0.5vw + 12px);
padding-right: 8px;
margin-right: 2px;
box-sizing: border-box;
&::after {
content: '';
opacity: 0.15;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: var(--radius);
pointer-events: none;
box-sizing: border-box;
}
}
.ltag__link__org__pic > img {
display: inline-block;
width: calc(2.5vw + 40px);
height: calc(2.5vw + 40px);
margin: auto auto !important;
border-radius: var(--radius);
box-sizing: border-box;
}
.ltag__link__user__pic {
display: inline-block;
position: absolute;
right: calc(0.5vw * -1);
bottom: calc(1vw);
border: 2px solid var(--base-inverted);
border-radius: 100%;
background-color: var(--card-color-tertiary);
box-sizing: border-box;
width: calc(2vw + 25px);
height: calc(2vw + 25px);
img {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 100%;
margin: 0;
}
}
.ltag__link__content {

34
app/views/articles/_liquid.html.erb
View file

@ -1,15 +1,36 @@
<% if article %>
<div class='ltag__link'>
<% if article.video && article.cloudinary_video_url %>
<a href='<%= article.path %>' class="video-image" style="background-image: url(<%= article.cloudinary_video_url %>)">
<span class="video-timestamp">
<img src="<%= asset_path("video-camera.svg") %>" alt="video camera">
<%= article.video_duration_in_minutes %></span>
</a>
<a href='<%= article.path %>' class="video-image" style="background-image: url(<%= article.cloudinary_video_url %>)">
<span class="video-timestamp">
<img src="<%= asset_path("video-camera.svg") %>" alt="video camera">
<%= article.video_duration_in_minutes %></span>
</a>
<% end %>
<% if article.organization %>
<a href='<%= article.organization.path %>' class='ltag__link__link'>
<div class='ltag__link__org__pic'>
<img src='<%= Images::Profile.call(article.organization.profile_image_url, length: 150) %>' alt='<%= article.organization.name.to_s %>'>
<div class='ltag__link__user__pic'>
<img src='<%= Images::Profile.call(article.user.profile_image_url, length: 150) %>' alt=''>
</div>
</div>
</a>
<a href='<%= article.path %>' class='ltag__link__link'>
<div class='ltag__link__content'>
<h2><%= title %></h2>
<h3><%= article.user.name %> for <%= article.organization.name %> ・ <%= article.readable_publish_date %> ・ <%= article.reading_time < 2 ? 1 : article.reading_time %> min read</h3>
<div class='ltag__link__taglist'>
<% article.tag_list.each do |t| %>
<span class='ltag__link__tag'>#<%= t %></span>
<% end %>
</div>
</div>
</a>
<% else %>
<a href='<%= article.user.path %>' class='ltag__link__link'>
<div class='ltag__link__pic'>
<img src='<%= Images::Profile.call(article.user.profile_image_url, length: 150) %>' alt='<%= "#{article.user.username} image" %>'>
<img src='<%= Images::Profile.call(article.user.profile_image_url, length: 150) %>' alt='<%= article.user.username.to_s %>'>
</div>
</a>
<a href='<%= article.path %>' class='ltag__link__link'>
@ -23,6 +44,7 @@
</div>
</div>
</a>
<% end %>
</div>
<% else %>
<div class='ltag__link'>

30
spec/liquid_tags/link_tag_spec.rb
View file

@ -35,7 +35,7 @@ RSpec.describe LinkTag, type: :liquid_tag do
<div class='ltag__link'>
<a href='#{article.user.path}' class='ltag__link__link'>
<div class='ltag__link__pic'>
<img src='#{Images::Profile.call(article.user.profile_image_url, length: 150)}' alt='#{article.user.username} image'>
<img src='#{Images::Profile.call(article.user.profile_image_url, length: 150)}' alt='#{article.user.username}'>
</div>
</a>
<a href='#{article.path}' class='ltag__link__link'>
@ -51,6 +51,32 @@ RSpec.describe LinkTag, type: :liquid_tag do
HTML
end
def correct_org_link_html(article)
tags = article.tag_list.map { |t| "<span class='ltag__link__tag'>##{t}</span>" }.join("\n#{"\s" * 8}")
<<~HTML
<div class='ltag__link'>
<a href='#{article.organization.path}' class='ltag__link__link'>
<div class='ltag__link__org__pic'>
<img src='#{Images::Profile.call(article.organization.profile_image_url, length: 150)}' alt='#{article.organization.name}'>
<div class='ltag__link__user__pic'>
<img src='#{Images::Profile.call(article.user.profile_image_url, length: 150)}' alt=''>
</div>
</div>
</a>
<a href='#{article.path}' class='ltag__link__link'>
<div class='ltag__link__content'>
<h2>#{CGI.escapeHTML(article.title)}</h2>
<h3>#{CGI.escapeHTML(article.user.name)} for #{article.organization.name} ・ #{article.readable_publish_date} ・ #{article.reading_time} min read</h3>
<div class='ltag__link__taglist'>
#{tags}
</div>
</div>
</a>
</div>
HTML
end
def missing_article_html
<<~HTML
<div class='ltag__link'>
@ -80,7 +106,7 @@ RSpec.describe LinkTag, type: :liquid_tag do
it "also tries to look for article by organization if failed to find by username" do
liquid = generate_new_liquid(slug: "#{org_article.username}/#{org_article.slug}")
expect(liquid.render).to eq(correct_link_html(org_article))
expect(liquid.render).to eq(correct_org_link_html(org_article))
end
it "renders with a leading slash" do