Стили Rails, сохраняющиеся между страницами - PullRequest
Новая
       29

Стили Rails, сохраняющиеся между страницами

1 голос
/ 18 июня 2019

Я создаю приложение для чтения книг. Каждая книга has_many страниц. У меня есть ссылки, переходящие с одной страницы на другую, нажав на левую и правую половины страниц. Когда вы наводите курсор мыши на край страницы, элемент div (действующий как ссылка), плавающий над страницей, меняет свою непрозрачность как индикатор наличия другой страницы. Эти дивы img-prev и img-next

Вот пример эффекта наведения на правой половине страницы: Example of the hover effect

Проблема в том, что после перехода на следующую (или предыдущую) страницу непрозрачность последующего img-prev или img-next деления для этой новой страницы очень коротко все еще имеет свой "темный" цвет , прежде чем вернуться обратно к полностью прозрачным. У меня такое чувство, что это связано с турболинками, но я не уверен.

приложение / просмотров / страниц / show.html.erb 

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

приложение / активы / таблицы стилей / pages.scss 

    #container-main {
      max-width: 100vw;
      text-align: center;
    }

    #div-image-wrapper {
      position: relative;
      display: inline-block;
    }

    #img-prev {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      left: 0;
    }

    #img-next {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
    }

    #img-page {
      max-height: 80vh;
    }

приложение / активы / JavaScripts / pages.js 

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }
    });

Единственная подсказка, которую я имею, состоит в том, что, если я заставлю свои ссылки img-prev и img-next игнорировать турболинки, проблема исчезнет, ​​но полное обновление страницы будет выполнено на каждой странице, которая не идеальна. Код для этого выглядит так:

app / views / pages / show.html.erb (альтернативный вариант) 

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, "data-turbolinks": false do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, "data-turbolinks": false do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

Не уверен, что это уместно, но я должен упомянуть, что эту строку добавили в мой config / initializers / assets.rb : 

Rails.application.config.assets.precompile += %w( pages.css )

Кроме того, полный исходный код этого приложения можно найти здесь, на моем Github: https://github.com/tliss/lianhuanhua

1 Ответ

0 голосов
/ 19 июня 2019

Я изменил следующие два файла, чтобы сбросить непрозрачность после нажатия на ссылку, и это решило проблему без принудительного обновления на всю страницу.Требовалось добавить идентификаторы к тегам:

app / assets / javascripts / pages.js 

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        $('#img-next-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });

        $('#img-prev-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });
    });

app / views / pages / show.html.erb 

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, id: "img-prev-link" do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, id: "img-next-link" do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>
...