Плавающий нижний колонтитул с переключением языков в I18n RoR - PullRequest
Новая
       11

Плавающий нижний колонтитул с переключением языков в I18n RoR

0 голосов
/ 06 сентября 2018

Вот кое-что, с чем я боролся в течение долгого времени и которое, похоже, не исчезло.У меня есть страница галереи с изображениями.Для загрузки страницы и особенно изображений я вставил значок предварительного загрузчика, который вращается в течение 2000 миллисекунд, пока не исчезнет и страница не появится снова.Нижний колонтитул по умолчанию устанавливается через #myFooter на display: none;, и после загрузки в течение 2 секунд через JS стиль снова изменяется на display: flex;.

Однако у меня есть 2 разных нижних колонтитула, один из которых сделан длястраница галереи и одна для других страниц.Один для страницы галереи имеет #myFooter идентификатор, а другой нет.Это потому, что без этого идентификатора вы бы увидели нижний колонтитул, плавающий прямо под заголовком (navbar).

Я также сделал весь сайт на 2 языках благодаря использованию I18n внутри RoR.Из-за этого исчезновение display: none; css происходит только на одном из языков (английском), в то время как на другом языке (испанском) он не отображается.Поэтому, когда я переключаюсь на английский, страница каким-то образом загружает нижний колонтитул, который предназначен только для других страниц, но не страницы галереи.При переключении на испанский он загружает правый нижний колонтитул.

Вот HTML:

Нижний колонтитул без идентификатора #myFooter: 

<div class="footer">
</div>

Нижний колонтитул с идентификатором #myFooter:

<div id="myFooter" class="footer">
</div>

application.html.erb:

`` `

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ibiza Wedding Ceremonies</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
  </head>
  <body onload="myFunction()" style="margin:0;">
    <% if current_page?(root_path) %>
      <%= render 'shared/banner' %>
      <%= render 'shared/navbar' %>
      <%= render 'shared/topbtn' %>
    <% elsif current_page?(pages_about_path) %>
      <%= render 'shared/navbar-2' %>
    <% else %>
      <%= render 'shared/navbar-2' %>
      <%= render 'shared/topbtn' %>
    <% end %>

    <%= render 'shared/flashes' %>
    <%= yield %>
    <% if current_page?(gallery_index_path) %>
      <%= render 'shared/footer-2' %>
    <% else %>
      <%= render 'shared/footer' %>
    <% end %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

Вот код:

_footer.scss: 

#myFooter {
  display: none;
}

.footer {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0px 50px;
  color: rgba(0,0,0,0.3);
  bottom: 0px;
  width: 100%;
}
.footer-links {
  display: flex;
  align-items: center;
}
.footer-links a {
  color: black;
  opacity: 0.15;
  text-decoration: none;
  font-size: 24px;
  padding: 0px 10px;
}
.footer-links a:hover {
  opacity: 1;
}
.footer .fa-heart {
  color: #D23333;
}

_loader.scss: 

/* Center the loader */

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

Вот код JavaScript:

pre-loader.js: 

var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 2000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
  document.getElementById("myFooter").style.display = "flex";
}

routes.rb: 

Rails.application.routes.draw do
  ActiveAdmin.routes(self)
  devise_for :users

  get '/change_locale/:locale', to: 'settings#change_locale', as: :change_locale
  get '/:locale' => 'pages#home'

  root to: 'pages#home'

  scope '(:locale)', locale: /en|es/ do
    root to: 'pages#home'
    get 'pages/contact'
    get 'pages/weddings'
    get 'pages/about'
    get 'pages/press'
    get 'pages/other_ceremonies'
    get 'pages/press/ibiza-si-quiero', to: 'pages#si_quiero', as: :si_quiero
    get 'pages/press/celebrating-love', to: 'pages#celebrating_love', as: :celebrating_love
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    resources :testimonials
    resources :photos, only: [:index], as: :gallery
  end
end

Итак, мой вопрос: как заставить исчезнуть плавающий нижний колонтитул на странице на английском и испанском языках?

...