1
У меня есть страница моего рельсового приложения, настроенная правильно на моем localhost, но когда я нажимаю ее на Heroku, все идет не так (с тем же кодом, насколько мне известно).Heroku появляется отличным от localhost
Вот что показывает на моем localhost:
А вот что происходит на Heroku:
Вот html/erb код для данной страницы :
<div style="height: 80px"></div>
<div class="text-center">
<h1 style="font-size: 10vh">Gift Helper</h1>
<p>Select the age group for which you are being forced to shop.</p>
</div>
<div style="height: 50px" class="hidden-xs"></div>
<div class="text-center frame">
<%= image_tag 'speedometer.jpg', style: "width: 100%; max-width: 700px", class: "vertical-align-in-div", alt: "Speedometer of Gifting. Ooooh. Aaaaah." %>
</div>
<div class="text-center frame" style="margin-top: -465px">
<%= image_tag 'needle.png', id: "needle", style: "width: 100%; max-width: 290px", class: "vertical-align-in-div", alt: "The Needle of Wisdom." %>
</div>
<div class="frame" style="margin-top: -450px; width: 80%; margin-left: 10%">
<%= link_to gifts_babies_path, id: "kids" do %>
<div id="kids" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_kids_path do %>
<div id="teens" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_teens_path do %>
<div id="babies" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_adults_path do %>
<div id="adults" class="stacking-boxes"></div>
<% end %>
</div>
<script>
$('#babies').hover(
function(){ $('#needle').addClass('animation-babies') },
function(){ $('#needle').removeClass('animation-babies') }
);
$('#kids').hover(
function(){ $('#needle').addClass('animation-kids') },
function(){ $('#needle').removeClass('animation-kids') }
);
$('#teens').hover(
function(){ $('#needle').addClass('animation-teens') },
function(){ $('#needle').removeClass('animation-teens') }
);
$('#adults').hover(
function(){ $('#needle').addClass('animation-adults') },
function(){ $('#needle').removeClass('animation-adults') }
);
</script>
И вот мой код layout.html.erb. Я думаю, что это имеет отношение, потому что это сноска (среди прочего), что тянет вверх неловко версии Heroku:
<!DOCTYPE html>
<html>
<head>
<title>Manly Art of BBQ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<link href='https://fonts.googleapis.com/css?family=Heebo:400,900,100,700|Covered+By+Your+Grace|Josefin+Slab' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'Ckeditor.cdn_url' %>
</head>
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="/"><%= image_tag 'LogoTextWhite.png', style: "height: 50px; margin-top: -15px" %></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Man Rules', rules_path %></li>
<li><%= link_to 'BBQ', home_bbq_path %></li>
<li><%= link_to 'Jokes', home_jokes_path %></li>
<li><%= link_to 'Lifehacks', home_lifehacks_path %></li>
<% if current_user %>
<li><%= link_to user_path(current_user) do %>
My Mancard <span style="background-color: red; padding-left: 5px; padding-right: 5px; border-radius: 7px"><%= current_user.manpoints %></span>
<% end %></li>
<% else %>
<li><%= link_to 'Log In', new_user_session_path %></li>
<% end %>
</ul>
</div> <!-- collapse -->
</div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->
<%= yield %>
<footer>
<div class="row" style="height: 320px">
<div class="col-sm-4 text-center">
<%= image_tag 'Logo.png', style: "margin-top: 40px !important; width: 225px; margin: 10px;" %>
</div> <!-- logo column -->
<div class="col-sm-4">
<div class="hidden-xs" style="height: 60px"></div>
<h2 class="text-center comment" style="margin-top: 15px; margin-left: 50px; margin-right: 50px; margin-bottom: 40px; padding-top: 20px; padding-bottom: 20px; border-top: thick solid red; border-bottom: thick solid red !important">Helping Men Be Men</h2>
</div> <!-- men be men column -->
<div class="col-sm-4" style="height: 320px; position: relative">
<%= image_tag "remote-control-menu.png", style: "position: absolute; bottom: 0; right: 0", class: "hidden-xs", usemap: "#image-map", alt: "Remote control menu. Yes, you get to hold it." %>
<%= image_tag "remote-control-menu.png", style: "position: absolute; display: block; bottom: 0; left: 0; right: 0; margin: auto", class: "visible-xs", usemap: "#image-map", alt: "Remote control menu. Yes, you get to hold it." %>
</div> <!-- remote column -->
<map name="image-map">
<% if current_user %>
<area target="" alt="Sign Out" title="Sign Out" href="<%= url_for destroy_user_session_path %>" coords="177,85,121,54" shape="rect">
<area target="" alt="My Mancard" title="My Mancard" href="<%= url_for user_path(current_user) %>" coords="64,148,24" shape="circle">
<% else %>
<area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="121,51,177,87" shape="rect">
<area target="" alt="My Mancard" title="My Mancard" href="<%= url_for new_user_session_path %>" coords="64,148,24" shape="circle">
<% end %>
<area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="148,143,26" shape="circle">
<area target="" alt="Man Rules" title="Man Rules" href="<%= url_for rules_path %>" coords="234,144,27" shape="circle">
<area target="" alt="Lifehacks" title="Lifehacks" href="<%= url_for home_lifehacks_path %>" coords="66,230,26" shape="circle">
<area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="148,223,27" shape="circle">
<area target="" alt="Man Gear" title="Man Gear" href="#" coords="235,228,26" shape="circle">
</map>
</div> <!-- footer row -->
</footer>
</body>
</html>
Наконец, вот соответствующий SCSS:
.frame {
height: 450px; /*can be anything*/
width: 80%;
margin-left: 10%;
position: relative;
}
.vertical-align-in-div {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.speedometer-label {
position: absolute;
z-index: 100;
color: red;
font-family: $font-writing;
font-weight: bolder;
font-size: 7vh;
}
.stacking-boxes {
height: 175px;
z-index: 100;
position: relative;
width: 49% !important;
display: inline-block;
}
Может кто-нибудь где ошибка здесь? Я не могу найти ответ, который изменил бы его на Heroku, чем на моем localhost.
Я бы начал с проверки (в инспекторе сети chrome), что все ваши активы загружаются должным образом. –
есть ли у вас какие-либо ошибки в консоли? –
@GuyDubrovski, только одна консольная ошибка, связанная с активом, который не используется на этой странице, поэтому ничего полезного ... – Liz