nccu-news/app/views/admin/news/_index.html.erb

<script>
  if(document.querySelectorAll("#orbit-bar").length==0) location.reload();
</script>

<table class="table main-list">
  <thead>
    <tr class="sort-header">
      <% @table_fields.each do |f| %>
      <%= thead(f) %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% @news_bulletin.each do |b| %>
      <tr>
        <td>
          <%= b.status_for_table %>
        </td>
        <td><%= b.category.title rescue "" %></td>
        <td>
          <% if b.expired? %>
            <%= b.title %>  <span class='label'><%= t(:expired) %></span>
          <% elsif b.rejected %>
            <a href="<%=page_for_bulletin(b)%>" target="_blank"><%= b.title %></a> <span class='label'><%= t(:rejected) %> : <%= b.rejection_reason rescue "" %></span>
          <% elsif !b.approved? %>
            <a href="<%=page_for_news_bulletin(b)%>" target="_blank"><%= b.title %></a> <span class='label'><%= t(:pending) %></span>
          <% else %>
            <a href="<%=page_for_news_bulletin(b)%>" target="_blank"><%= b.title %></a>
          <% end %>
          <div class="quick-edit">
            <ul class="nav nav-pills">
              <li><a href="#" class="detail-row" onclick="$('#<%= "#{b.id.to_s}-detail" %>').slideToggle(300); return false;"><%= t(:detail) %></a></li>
              <% if can_edit_or_delete?(b) %>
                <li><a href="/admin/news/<%=b.id.to_s%>/edit"><%= t(:edit) %></a></li>
                <li><a href="#" class="delete text-error" rel="/admin/news/<%=b.id.to_s%>"><%= t(:delete_) %></a></li>
                <% if !b.approved && user_can_approve? %>
                  <li><a href="#" class="appoval_button" data-approve-link="<%= "/#{I18n.locale.to_s}/news/#{b.to_param}" %>"  data-id="<%= b.id.to_s %>"><%= t("news.approve") %></a></li>
                <% end %>
              <% end %>
            </ul>
          </div>
        </td>
        <td><%= format_value b.postdate %></td>
        <td class="<%= b.expired? ? "expired" : "" %>"><%= format_value b.deadline %></td>
        <td>
          <%= content_tag(:div, image_tag(b.image.file.blank? ? "/assets/news_alt.jpg" : b.image.url), {:class => "img-peview", :rel=>"popover", "data-content"=>"#{image_tag(b.image.file.blank? ? "/assets/news_alt.jpg" : b.image.url)}", "data-trigger"=>"hover", "data-placement"=>"left"}) %>
        </td>
        <td>
          <% Unit.where({:id => b.unit_id}).each do |u| %>
            <%= u.name %>
          <% end %>
          <% Department.where({:id => b.department}).each do |d| %>
            -<%= d.name %>
          <% end %>
        </td>
        <td><%= b.view_count %></td>
      </tr>
      <tr class="footable-row-detail">
        <td class="footable-cell-detail" colspan="6">
          <div id="<%= "#{b.id.to_s}-detail" %>" class="footable-row-detail-inner" style="display: none;">
            <div>
              <strong><%= t(:tags) %></strong> :
              <% b.tags.each do |tag| %>
                <span class="label label-warning"><%= tag.name %></span>
              <% end %>
            </div>
            <div>
              <strong><%= t("news.email_to") %></strong> :
              <% b.email_members.each do |member| %>
                <span class="label"><%= member.name %></span>
              <% end %>
              <% unless b.other_mailaddress.nil? %>
                <% b.other_mailaddress.split(',').each do |mailaddress| %>
                  <span class="label"><%= mailaddress %></span>
                <% end %>
              <% end %>
            </div>
          </div>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%=
  content_tag :div, class: "bottomnav clearfix" do
    content_tag :div, paginate(@news_bulletin), class: "pagination pagination-centered"
  end
%>

<% content_for :page_specific_css do %>
  <style>
  .img-peview {
    height: 50px;
    overflow: hidden;
  }
  td img{
    width: 100% !Important;
  }
  .popover{
    width: 310px;
    height: 140px;
    overflow: hidden;
  }
  .popover .arrow {
    border-bottom-color: #333;
    border-width: 0 10px 10px;
    display: none;
  }
  .popover img {
    width: 100%;
    height: auto;
  }
  .popover-inner {
    width: auto;
  }
  .popover-title {
    display: none;
    adding: 5px;
  }
  .popover-content {
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    height: 125px;
    overflow: hidden;
  }
  </style>
<% end %>
<% content_for :page_specific_javascript do %>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.img-peview').popover({
        html: true
      });
    });
  </script>
<% end %>