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

[15 minute fix] Podcast fixes/clean up (#14790)

Browse source 
* Podcast fixes/clean up

* Remove unused pattern image line

* Fix tests
This commit is contained in:
Ben Halpern 2021-09-23 10:33:05 -04:00 • committed by GitHub
parent 9c2d33bda0
commit f1c875f84e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 22 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/ltags/PodcastTag.scss
View file

@ -29,6 +29,7 @@
a {
color: white;
text-decoration: none;
.tinyimage {
width: 22px;

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

@ -79,6 +79,9 @@
a {
color: rgb(97, 97, 97);
}
.crayons-btn--outlined {
background: white;
}
.profile-pic-wrapper {
float: left;
width: calc(14.5vw + 60px);
@ -254,76 +257,4 @@
display: inline-block;
margin-left: 5px;
}
.user-profile-follow-button {
background: $green;
border: 0;
font-size: 17px;
border-radius: 3px;
vertical-align: 3px;
padding: 2px 6px;
cursor: pointer;
min-width: 120px;
opacity: 0.7;
&.showing {
opacity: 1;
}
@media screen and (min-width: 430px) {
font-size: 18px;
padding: 3px 8px;
vertical-align: 7px;
border-radius: 5px;
min-width: 140px;
}
@media screen and (min-width: 950px) {
font-size: 22px;
padding: 4px 8px;
vertical-align: 12px;
border-radius: 5px;
min-width: 140px;
}
}
// same as above, just add class to above style
.user-profile-chat-button-wrapper {
position: relative;
z-index: 5;
display: inline-block;
margin-left: 5px;
}
.user-profile-chat-button {
background: $green;
color: white;
border: 0;
font-size: 17px;
border-radius: 3px;
vertical-align: 3px;
padding: 2px 6px;
cursor: pointer;
min-width: 60px;
font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed',
'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed',
'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold',
'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica',
'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif;
-webkit-appearance: none;
font-stretch: condensed;
&.showing {
opacity: 1;
}
@media screen and (min-width: 430px) {
font-size: 18px;
padding: 3px 8px;
vertical-align: 7px;
border-radius: 5px;
min-width: 80px;
}
@media screen and (min-width: 950px) {
font-size: 22px;
padding: 4px 8px;
vertical-align: 12px;
border-radius: 5px;
min-width: 80px;
}
}
}

2
app/views/organizations/_header.html.erb
View file

@ -19,7 +19,7 @@
<div class="profile-header__actions">
<button
id="user-follow-butt"
class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button"
class="crayons-btn whitespace-nowrap follow-action-button"
data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>
Follow
</button>

7
app/views/podcast_episodes/_liquid.html.erb
View file

@ -1,14 +1,11 @@
<% image_url = Images::Optimizer.call(podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", crop: nil, fetch_format: "jpg") %>
<div class="podcastliquidtag" style="background: #<%= podcast.main_color_hex %> url(<%= image_url %>)" data-meta="<%= episode.decorate.mobile_player_metadata.to_json %>">
<div class="podcastliquidtag" style="background: #<%= podcast.main_color_hex %>" data-meta="<%= episode.decorate.mobile_player_metadata.to_json %>">
<div class="podcastliquidtag__info">
<a href="/<%= podcast.slug %>/<%= episode.slug %>">
<h1 class="podcastliquidtag__info__episodetitle"><%= episode.title %></h1>
</a>
<a href="/<%= podcast.slug %>" style="display:block">
<h2 class="podcastliquidtag__info__podcasttitle">
<%= podcast.title %> <button class="crayons-btn follow-action-button" data-info='{"id":<%= podcast.id %>,"className":"<%= podcast.class.name %>", "name": <%= podcast.name %>}'>&nbsp;</button>
<%= podcast.title %>
</h2>
</a>
</div>

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

@ -2,18 +2,20 @@
<%= render "podcast_episodes/meta" %>
<% 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 podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= image %>);">
<div class="user-profile-header podcast-header" style="background:#<%= @podcast.main_color_hex %>;">
<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 %>
<button
id="user-follow-butt"
class="crayons-btn follow-action-button user-profile-follow-button"
data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>", "name": "<%= @podcast.name %>"}'>
&nbsp;
</button>
</h1>
</h1>
<h2>
<button
id="user-follow-butt"
class="crayons-btn follow-action-button"
style="min-width: 100px;"
data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>", "name": "<%= @podcast.name %>"}'>
&nbsp;
</button>
</h2>
</div>
</div>
<% end %>

3
app/views/podcast_episodes/show.html.erb
View file

@ -30,8 +30,7 @@
<main id="main-content" class="podcast-episode-container" data-meta="<%= @episode.decorate.mobile_player_metadata.to_json %>">
<div class="hero">
<% image_url = Images::Optimizer.call(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png", fetch_format: "jpg", crop: nil) %>
<div class="title" style="background:#<%= @podcast.main_color_hex %> url(<%= image_url %>)">
<div class="title" style="background:#<%= @podcast.main_color_hex %>">
<h2>
<a href="/<%= @podcast.slug %>">
<img aria-hidden="true" alt="<%= @podcast.title %>" src="<%= optimized_image_url(@podcast.image_url, width: 60, quality: 80) %>" /><%= @podcast.title %>

2
app/views/users/show.html.erb
View file

@ -35,7 +35,7 @@
</a>
<% end %>
<% end %>
<button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
<button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
<div class="profile-dropdown ml-2 s:relative hidden" data-username="<%= @user.username %>">
<button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
<%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "User actions") %>

2
cypress/integration/seededFlows/loggedOutFlows/showLoginModal.spec.js
View file

@ -98,7 +98,7 @@ describe('Show log in modal', () => {
cy.get('[data-follow-clicks-initialized]');
cy.findByRole('heading', {
name: 'Developer on Fire Developer on Fire Follow',
name: 'Developer on Fire Developer on Fire',
});
verifyLoginModalBehavior(() =>

2
cypress/integration/seededFlows/podcastFlows/followPodcast.spec.js
View file

@ -11,7 +11,7 @@ describe('Follow podcast', () => {
cy.get('[data-follow-clicks-initialized]');
cy.findByRole('heading', {
name: 'Developer on Fire Developer on Fire Follow',
name: 'Developer on Fire Developer on Fire',
});
cy.findByRole('button', { name: 'Follow podcast: Developer on Fire' }).as(