Question

我想创建两个精灵按钮来验证（或不验证）某些请求。

所以这是我的约定的按钮：

<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是24px边尺寸方形透明图像。

这是我的同意按钮发生的地方：

<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;
    }
  }
}

当我在开发环境中使用我的应用程序时，它会呈现我想要的内容。但是，如果我将其推向生产，方形透明图像将变为空白并隐藏精灵背景。

你是否有想法使这项工作，并使其更多......良好的做法？

Answer 1

看起来您正在使用SASS / SCSS。您是否已验证您的SCSS文件是否已在生产中正确编译？你在使用任何东西（例如指南针）来组装你的精灵吗？

使用表格中的提交按钮制作精灵

1 个答案: