1

一部のリクエストを検証する (または検証しない) 2 つのスプライト ボタンを作成したいと考えています。

だからここに私の同意したボタンがあります：

<div class="validation_button loan_button" id="agreed_loan_button_<%=loan.id%>">
  <% if loan.agreed == true %>
    <div class="icon-agree enabled"></div>
  <% elsif loan.agreed == false %>
    <div class="icon-agree disabled"></div>
  <% else %>
    <%= form_for(loan, remote: true) do |f| %>
      <div><%= f.hidden_field :agreed, value: true %></div>
      <%= image_submit_tag("24px.png", alt: t('button.loan.agree'), title: t('button.loan.agree'), class: "icon-agree active") %>
    <% end %>
  <% end %>
</div>

24px.png は、横 24 ピクセルのサイズの正方形の透明な画像です。

そして、これが私の同意ボタンが行われる場所です:

<table class="table table-hover">
  <tbody>
    <tr>
      <th><%= t('product.borrower') %></th>
      <th><%= t('loan.created.since_the') %></th>
      <th><%= t('loan.validation') %></th>
    </tr>
    <% @pending_loans.each do |loan| %>
      <tr id="loan_<%= loan.id %>">
        <td>
          <%= link_to loan.seeker.name, loan.seeker %>
        </td>
        <td>
         <%= I18n.l loan.created_at, format: :only_date %>
        </td>
        <td class="validation">
          <%= render 'loans/buttons/agreed', loan: loan %>
          <%= render 'loans/buttons/refused', loan: loan %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

次に、ここに私のcssがあります：

.icon-agree {
  background: url("agree.png");
  display: block;
  width: 24px;

  height: 24px;
  &.enabled {
    background-position: 0 -24px;
  }
  &.disabled {
    background-position: 0 0;
  }
  &.active {
    text-indent: -9999px;
    &:hover {
      background-position: 0 -24px;
    }
    &:active {
      background-position: 0 -48px;
    }
  }
}

アプリを開発環境で使用すると、必要なものが正確にレンダリングされます。しかし、本番環境にプッシュすると、正方形の透明な画像が空白になり、スプライトの背景が非表示になります。

これを機能させ、さらに...良い習慣にするアイデアはありますか？

4

1 に答える 1

0

SASS/SCSS を使用しているようです。SCSS ファイルが本番環境で適切にコンパイルされていることを確認しましたか? スプライトを組み立てるために何か (コンパスなど) を使用していますか?

于 2013-07-04T13:35:50.047 に答える