使用表中的提交按鈕製作精靈

我想創建兩個精靈按鈕來驗證（或不是）一些請求。使用表中的提交按鈕製作精靈

因此，這裏是我的同意按鈕：

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

當我用我的應用程序在開發環境中，它呈現什麼我想要。但是如果我將它推到生產中，方形透明圖像將變爲空白並隱藏精靈背景。

您是否有想法使這項工作成爲可能，並使其更多......良好的做法？

來源

2013-07-04 Flo Rahl

看起來你正在使用SASS/SCSS。你是否證實你的SCSS文件在生產中正確編譯？你是否在使用任何東西（例如Compass）來組裝你的精靈？

來源

2013-07-04 13:35:50

是的，我正在使用SASS/SCSS。我如何驗證我的SCSS文件在生產中是否正確編譯？ –

查看輸出的CSS文件。你可以將這些文件與開發中的CSS文件區分開來，看看是否有任何明顯的問題。此外，請確保您瞭解運行時envinronments與[Rails的資產管道]（http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets） –

謝謝，但我不知道如何看待輸出的CSS文件。你能告訴我怎麼做嗎？ –

使用表中的提交按鈕製作精靈

回答

相關問題