diff --git a/app/assets/stylesheets/ltags/LinkTag.scss b/app/assets/stylesheets/ltags/LinkTag.scss index fe0107bef..17ecc8f62 100644 --- a/app/assets/stylesheets/ltags/LinkTag.scss +++ b/app/assets/stylesheets/ltags/LinkTag.scss @@ -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 { diff --git a/app/views/articles/_liquid.html.erb b/app/views/articles/_liquid.html.erb index a4083a81d..d3d57a66f 100644 --- a/app/views/articles/_liquid.html.erb +++ b/app/views/articles/_liquid.html.erb @@ -1,15 +1,36 @@ <% if article %>
<% if article.video && article.cloudinary_video_url %> - - - " alt="video camera"> - <%= article.video_duration_in_minutes %> - + + + " alt="video camera"> + <%= article.video_duration_in_minutes %> + <% end %> + <% if article.organization %> + +
+ <%= article.organization.name.to_s %> +
+ +
+
+ + +
+

<%= title %>

+

<%= article.user.name %> for <%= article.organization.name %> ・ <%= article.readable_publish_date %> ・ <%= article.reading_time < 2 ? 1 : article.reading_time %> min read

+
+ <% article.tag_list.each do |t| %> + #<%= t %> + <% end %> +
+
+ + <% else %>
- <%= "#{article.user.username} image" %> + <%= article.user.username.to_s %>
@@ -23,6 +44,7 @@
+ <% end %> <% else %>
diff --git a/spec/liquid_tags/link_tag_spec.rb b/spec/liquid_tags/link_tag_spec.rb index facaf5d72..60fd0c5e1 100644 --- a/spec/liquid_tags/link_tag_spec.rb +++ b/spec/liquid_tags/link_tag_spec.rb @@ -35,7 +35,7 @@ RSpec.describe LinkTag, type: :liquid_tag do
- #{article.user.username} image + #{article.user.username}
@@ -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| "##{t}" }.join("\n#{"\s" * 8}") + + <<~HTML +
+ +
+ #{article.organization.name} +
+ +
+
+ + +
+

#{CGI.escapeHTML(article.title)}

+

#{CGI.escapeHTML(article.user.name)} for #{article.organization.name} ・ #{article.readable_publish_date} ・ #{article.reading_time} min read

+
+ #{tags} +
+
+ +
+ HTML + end + def missing_article_html <<~HTML
@@ -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