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

[Crayons] Update tag page header (#11130) [deploy]

Browse source 
* Update tag page header

* Update small fixes

* Make small edits

* Update header layout

* Use "opacity-50" instead of part of a component

* Bringing back `p` since we're stripping other tags anyway :)

* Update to test to match new header

* Update test

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
Co-authored-by: Zhao-Andy <17884966+Zhao-Andy@users.noreply.github.com>
This commit is contained in:
Lisa Sy 2020-10-30 10:24:11 -07:00 • committed by GitHub
parent dde7fb0423
commit 3a50ae1b4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/assets/stylesheets/user-profile-header.scss
View file

@ -17,23 +17,6 @@
@media screen and (min-width: 1100px) {
padding: 25px 0px 11px;
}
&.tag-header {
@media screen and (min-width: 1100px) {
padding: 0px 0px 1.2vw;
}
h1 {
font-size: calc(3vw + 23px);
margin-top: 1.2vw;
margin-bottom: 8px;
margin-left: 3%;
text-align: center;
width: 94%;
img {
max-height: calc(3vw + 33px);
max-width: calc(3vw + 33px);
}
}
}
&.podcast-header {
background: rgb(5, 22, 32);
text-align: center;

1
app/assets/stylesheets/views.scss
View file

@ -11,3 +11,4 @@
@import 'views/signin';
@import 'views/signup-modal';
@import 'views/sponsors';
@import 'views/tag';

14
app/assets/stylesheets/views/tag.scss Normal file
View file

@ -0,0 +1,14 @@
@import '../config/import';
.tag-header {
padding: var(--su-4);
border-radius: 0;
@media (min-width: $breakpoint-m) {
border-radius: var(--radius);
}
@media (min-width: $breakpoint-l) {
padding: var(--su-6);
}
}

51
app/views/articles/tag_index.html.erb
View file

@ -4,31 +4,38 @@
<% expiry_minutes = params[:timeframe].blank? || params[:timeframe] == "latest" ? 4 : 20 %>
<% flag = true %>
<% cache("tag-stories-index-#{params}-#{flag}-#{@tag_model.updated_at}-#{user_signed_in?}", expires_in: expiry_minutes.minutes) do %>
<style>
.tag-header {
border: 2px solid<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
box-shadow: 5px 6px 0px<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
}
</style>
<div class="user-profile-header tag-header">
<div class="tag-or-query-header-container">
<h1>
<div class="crayons-layout">
<header class="tag-header crayons-card branded-4" style="border-top-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
<div class="flex gap-4">
<% if @tag_model.badge_id && @tag_model.badge %>
<img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 180) %>" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg);" />
<img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
<% end %>
<% if @tag_model && @tag_model.pretty_name.present? %>
<%= @tag_model.pretty_name %>
<% else %>
<%= @tag %>
<% end %>
<% if @tag_model %>
<span class="user-profile-follow-button-wrapper">
<button id="user-follow-butt" class="crayons-btn follow-action-button user-profile-follow-button" style="color:<%= @tag_model.text_color_hex %>;background-color:<%= @tag_model.bg_color_hex %>" data-info='{"id":<%= @tag_model.id %>,"className":"Tag"}'>&nbsp;</button>
</span>
<% end %>
</h1>
</div>
<div class="flex flex-col w-100 justify-center">
<div class="flex justify-between items-center">
<h1 class="crayons-title">
<% if @tag_model && @tag_model.pretty_name.present? %>
<%= @tag_model.pretty_name %>
<% else %>
<span class="opacity-50">#</span>
<%= @tag %>
<% end %>
</h1>
<% if @tag_model %>
<button id="user-follow-butt" class="crayons-btn follow-action-button" data-info='{"id":<%= @tag_model.id %>,"className":"Tag"}'>Follow</button>
<% end %>
</div>
<% if @tag_model && @tag_model.short_summary.present? %>
<p class="max-w-100 m:max-w-75 pt-2 s:pt-4">
<%= strip_tags(@tag_model.short_summary) %>
</p>
<% end %>
</div>
</div>
<% if @tag_model && @tag_model.short_summary.present? %>
<% end %>
</header>
</div>
<div class="home sub-home" id="index-container"
data-params="<%= params.merge(sort_by: "hotness_score", sort_direction: "desc").to_json(only: %i[tag username sort_by sort_direction]) %>" data-which=""
data-tag="<%= @tag %>"

10
app/views/articles/tags/_sidebar.html.erb
View file

@ -2,16 +2,6 @@
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
<div class="sidebar-bg" id="sidebar-bg-left"></div>
<div class="side-bar">
<% if @tag_model && @tag_model.short_summary.present? %>
<div class="widget">
<header>
<h4>#<%= @tag %> 👋</h4>
</header>
<div class="widget-body">
<%= sanitize @tag_model.short_summary %>
</div>
</div>
<% end %>
<% if @tag_model && @tag_model.rules_html.present? %>
<div class="widget">
<header>

2
app/views/podcast_episodes/index.html.erb
View file

@ -3,7 +3,7 @@
<% end %>
<% if @podcast %>
<% image = Images::Optimizer.call(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", fetch_format: "jpg", crop: nil) %>
<div class="user-profile-header tag-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
<div class="user-profile-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
<div class="tag-or-query-header-container">
<h1><img class="record main-image" src="<%= Images::Optimizer.call(@podcast.image_url, crop: "fill", width: 420, height: 420) %>"
alt="<%= @podcast.title %>" /> <%= @podcast.title %>

4
spec/system/articles/user_visits_articles_by_tag_spec.rb
View file

@ -23,7 +23,7 @@ RSpec.describe "User visits articles by tag", type: :system do
end
it "shows the follow button", js: true, stub_elasticsearch: true do
within("h1") { expect(page).to have_button("Follow") }
within("header.tag-header") { expect(page).to have_button("Follow") }
end
it "shows correct articles count" do
@ -59,7 +59,7 @@ RSpec.describe "User visits articles by tag", type: :system do
it "shows the following button", js: true, stub_elasticsearch: true do
wait_for_javascript
within("h1") { expect(page).to have_button("Following") }
within("header.tag-header") { expect(page).to have_button("Following") }
end
it "shows time buttons" do