在表中创建带有提交按钮的sprite

问题描述

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

I want to create two sprite buttons to validate (or not) some requests.

这是我的同意按钮 p>

So here is my agreed button :

<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像素大小的正方形透明图片。

Where 24px.png is a 24px side size square transparent image.

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

And here is where my agree button takes place :

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

一个开发环境，它正好呈现我想要的。但是如果我把它推向生产，正方形的透明图像变为空白并隐藏精灵背景。

When I using my app in a development environment, it renders exactly what I want. But if I push it to production, the square transparent image becomes blank and hide the sprite background.

你有一个想法，使这个作品，并使它更多。好的做法？

Do you have an idea to make this works, and make it more... good practice ?

推荐答案

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

It looks like you're using SASS/SCSS. Have you verified that your SCSS files are properly compiled in production? Are you using anything (e.g., Compass) to assemble your sprites?

这篇关于在表中创建带有提交按钮的sprite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！