Update style of podcast views (#6596) [deploy]
This commit is contained in:
Ben Halpern
GitHub
parent
867cbaa4c8
commit
e6afbd043b
8 changed files with 76 additions and 74 deletions
|
|
@ -55,4 +55,7 @@ footer {
|
|||
.stories-show + footer .inner-footer-container {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.podcast_episodes-show + footer .inner-footer-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<div class="subscribe-buttons">
|
||||
<% if @podcast.itunes_url.present? %>
|
||||
<a href="<%= @podcast.itunes_url %>" target="_blank" rel="noopener">
|
||||
<img alt="iTunes" src="<%= cloudinary("https://d.ibtimes.co.uk/en/full/1423047/itunes-12.png", 40, 90, format = "png") %>" />
|
||||
iTunes
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @podcast.overcast_url.present? %>
|
||||
<a href="<%= @podcast.overcast_url %>" target="_blank" rel="noopener">
|
||||
<img alt="Overcast" src="<%= cloudinary("https://d2uzvmey2c90kn.cloudfront.net/img/logo.svg", 40, 90, format = "png") %>" />
|
||||
Overcast
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @podcast.android_url.present? %>
|
||||
<a href="<%= @podcast.android_url %>" target="_blank" rel="noopener">
|
||||
<img alt="Android" src="<%= cloudinary("http://storage.googleapis.com/ix_choosemuse/uploads/2016/02/android-logo.png", 40, 90, format = "png") %>" />
|
||||
Android
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @podcast.soundcloud_url.present? %>
|
||||
<a href="<%= @podcast.soundcloud_url %>" target="_blank" rel="noopener">
|
||||
<img alt="Soundcloud" src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/u4dh128d4hcwyazwu268.png", 40, 90, format = "png") %>" />
|
||||
Soundcloud
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @podcast.feed_url.present? %>
|
||||
<a href="<%= @podcast.feed_url %>" target="_blank" rel="noopener">
|
||||
<img alt="RSS Feeds" src="<%= cloudinary("https://temenos.com/globalassets/img/marketplace/temenos/rss/rss.png", 40, 90, format = "png") %>" />
|
||||
RSS
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -3,12 +3,11 @@
|
|||
<% end %>
|
||||
<% if @podcast %>
|
||||
<div class="user-profile-header tag-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= cl_image_path(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png",
|
||||
type: "fetch",
|
||||
quality: "auto",
|
||||
sign_url: true,
|
||||
flags: "progressive",
|
||||
fetch_format: "jpg")
|
||||
%>);">
|
||||
type: "fetch",
|
||||
quality: "auto",
|
||||
sign_url: true,
|
||||
flags: "progressive",
|
||||
fetch_format: "jpg") %>);">
|
||||
<div class="tag-or-query-header-container">
|
||||
<h1><img class="record" src="<%= cl_image_path(@podcast.image_url,
|
||||
type: "fetch",
|
||||
|
|
@ -24,7 +23,6 @@
|
|||
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>"}'> </button>
|
||||
</h1>
|
||||
</div>
|
||||
<%= render "podcast_episodes/subscribe_buttons" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@
|
|||
</p>
|
||||
</center>
|
||||
<% end %>
|
||||
<%= render "podcast_episodes/subscribe_buttons" %>
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<% if @episode.podcast.feed_url.include?("soundcloud") %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue