From e6afbd043b3da34491edacd2a3eaae1be76adee9 Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Wed, 11 Mar 2020 16:45:01 -0400 Subject: [PATCH] Update style of podcast views (#6596) [deploy] --- app/assets/stylesheets/footer.scss | 3 + app/assets/stylesheets/ltags/PodcastTag.scss | 20 +++++-- .../stylesheets/podcast-episodes-show.scss | 59 +++++++++++-------- .../stylesheets/user-profile-header.scss | 17 +++++- app/helpers/application_helper.rb | 6 +- .../_subscribe_buttons.html.erb | 32 ---------- app/views/podcast_episodes/index.html.erb | 12 ++-- app/views/podcast_episodes/show.html.erb | 1 - 8 files changed, 76 insertions(+), 74 deletions(-) delete mode 100644 app/views/podcast_episodes/_subscribe_buttons.html.erb diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss index 360aafc5a..3370f4851 100644 --- a/app/assets/stylesheets/footer.scss +++ b/app/assets/stylesheets/footer.scss @@ -55,4 +55,7 @@ footer { .stories-show + footer .inner-footer-container { margin-left: 16px; } + .podcast_episodes-show + footer .inner-footer-container { + margin-left: auto; + } } diff --git a/app/assets/stylesheets/ltags/PodcastTag.scss b/app/assets/stylesheets/ltags/PodcastTag.scss index 095c804d7..8256126c8 100644 --- a/app/assets/stylesheets/ltags/PodcastTag.scss +++ b/app/assets/stylesheets/ltags/PodcastTag.scss @@ -46,7 +46,7 @@ h1 { margin: 0px 0px 0.5em 0px; - font-weight: inherit; + font-weight: 700; padding: 0; } @@ -54,14 +54,24 @@ font-size: calc(1.8vw + 19px); } .podcastliquidtag__info__podcasttitle { - font-size: calc(1vw + 14px); + font-size: calc(1.2vw + 14px); padding: 0px 0px; + font-weight: 500; + margin-top: -5px; button { - font-size: calc(1vw + 12px); + font-size: 25px; border-radius: 3px; border: 0px; - margin-left: 5px; - width: calc(105px + 4.5vw); + width: 100%; + margin-top: 15px; + padding: 20px 0px; + @media screen and (min-width: 950px) { + font-size: calc(1.2vw + 16px); + margin-left: 5px; + display: inline-block; + width: 220px; + padding: 5px 0px; + } } } diff --git a/app/assets/stylesheets/podcast-episodes-show.scss b/app/assets/stylesheets/podcast-episodes-show.scss index 010dbf6b4..7e8f5b4ba 100644 --- a/app/assets/stylesheets/podcast-episodes-show.scss +++ b/app/assets/stylesheets/podcast-episodes-show.scss @@ -7,21 +7,21 @@ padding-bottom: 30px; text-align: center; .title { - padding-top: 40px; + padding-top: 10px; background: $black; - height: 300px; - margin-bottom: -120px; + min-height: 300px; + margin-bottom: -60px; @media screen and (min-width: 600px) { - padding-top: 60px; - height: 400px; - margin-bottom: -200px; + padding-top: 20px; + min-height: 400px; + margin-bottom: -120px; } color: white; h2 { - font-weight: 300; + font-weight: 500; margin: 0; margin-top: 40px; - font-size: 18px; + font-size: 20px; color: rgb(235, 243, 245); a { color: white; @@ -39,14 +39,16 @@ border-radius: 30px; } .follow-action-button { - width: 120px; + width: 260px; border-radius: 3px; border: 0px; - font-size: 16px; - vertical-align: 2px; + display: block; + margin: 20px auto; + padding: 10px 0px; + font-size: 25px; } @media screen and (min-width: 600px) { - font-size: 22px; + font-size: 24px; img { height: 28px; width: 28px; @@ -55,39 +57,46 @@ } } h1 { - font-weight: 300; + font-weight: 700; margin: 15px auto 18px; - font-size: 27px; + font-size: 30px; line-height: 31px; max-width: 94%; @media screen and (min-width: 680px) { - font-size: 40px; - line-height: 44px; + font-size: 45px; + line-height: 55px; margin-bottom: 28px; } @media screen and (min-width: 800px) { - font-size: 44px; - line-height: 49px; + font-size: 49px; + line-height: 58px; } &.smaller { font-size: 23px; line-height: 25.5px; @media screen and (min-width: 490px) { - font-size: 27px; - line-height: 30px; + font-size: 30px; + line-height: 35px; } @media screen and (min-width: 680px) { - font-size: 30px; - line-height: 33px; + font-size: 35px; + line-height: 39px; margin-bottom: 20px; } @media screen and (min-width: 800px) { - font-size: 40px; - line-height: 43px; + font-size: 45px; + line-height: 50px; } } } + time { + padding-bottom: 70px; + display: block; + @media screen and (min-width: 600px) { + padding-bottom: 150px; + } + } } .status-message { margin: auto; @@ -217,7 +226,7 @@ } .container { margin-bottom: 60px; - margin-top: 40px; + margin-top: 20px; .comments-container { margin-bottom: 20px; } diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss index c55c0f5c8..aa17dc209 100644 --- a/app/assets/stylesheets/user-profile-header.scss +++ b/app/assets/stylesheets/user-profile-header.scss @@ -41,10 +41,24 @@ &.podcast-header { background: rgb(5, 22, 32); text-align: center; - padding-bottom: 60px; + padding: 70px 0px; color: white; h1 { font-size: calc(2vw + 28px); + .follow-action-button { + font-size: 25px; + display: block; + margin: 10px auto; + width: 100%; + padding: 15px 0px; + @media screen and (min-width: 950px) { + vertical-align: 3px; + display: inline-block; + font-size: calc(1.9vw + 8px); + width: 280px; + padding: 3px 0px; + } + } } img.record { height: 150px; @@ -299,7 +313,6 @@ } .user-profile-follow-button { background: $green; - color: white; border: 0; font-size: 17px; border-radius: 3px; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 36d8f1173..cc81d3111 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -8,7 +8,9 @@ module ApplicationHelper end def view_class - if @story_show # custom due to edge cases + if @podcast_episode_show # custom due to edge cases + "stories stories-show podcast_episodes-show" + elsif @story_show "stories stories-show" else "#{controller_name} #{controller_name}-#{controller.action_name}" @@ -156,6 +158,6 @@ module ApplicationHelper end def app_protocol_and_domain - "#{ApplicationConfig["APP_PROTOCOL"]}#{ApplicationConfig["APP_DOMAIN"]}" + "#{ApplicationConfig['APP_PROTOCOL']}#{ApplicationConfig['APP_DOMAIN']}" end end diff --git a/app/views/podcast_episodes/_subscribe_buttons.html.erb b/app/views/podcast_episodes/_subscribe_buttons.html.erb deleted file mode 100644 index 96deb8b02..000000000 --- a/app/views/podcast_episodes/_subscribe_buttons.html.erb +++ /dev/null @@ -1,32 +0,0 @@ -
- <% if @podcast.itunes_url.present? %> - - iTunes" /> - iTunes - - <% end %> - <% if @podcast.overcast_url.present? %> - - Overcast" /> - Overcast - - <% end %> - <% if @podcast.android_url.present? %> - - Android" /> - Android - - <% end %> - <% if @podcast.soundcloud_url.present? %> - - Soundcloud" /> - Soundcloud - - <% end %> - <% if @podcast.feed_url.present? %> - - RSS Feeds" /> - RSS - - <% end %> -
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb index f978e2e36..12aae305f 100644 --- a/app/views/podcast_episodes/index.html.erb +++ b/app/views/podcast_episodes/index.html.erb @@ -3,12 +3,11 @@ <% end %> <% if @podcast %>
);"> + type: "fetch", + quality: "auto", + sign_url: true, + flags: "progressive", + fetch_format: "jpg") %>);">

 

- <%= render "podcast_episodes/subscribe_buttons" %>
<% end %> diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb index 24df8f2a7..f9c41789f 100644 --- a/app/views/podcast_episodes/show.html.erb +++ b/app/views/podcast_episodes/show.html.erb @@ -86,7 +86,6 @@

<% end %> - <%= render "podcast_episodes/subscribe_buttons" %>
<% if @episode.podcast.feed_url.include?("soundcloud") %>