personal-journal/app/views/admin/journal_papers/setting.html.erb

<style type="text/css">
  .element{
    background: #FFF;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #DDD;
  }
  .detail{
    padding: 10px;
    min-height: 250px;
  }
  .totle{
    margin-bottom: 25px;
  }
  .totle span{
    font-size: 18px;
  }
</style>

<div class="row">
  <div class="element span4">
    <div class="detail w-a h-a">
      <p class="totle">
        <a class="btn btn-small btn-primary pull-right" href="<%= new_admin_journal_paper_type_path %>#paper_type_modal" data-toggle="modal" data-remote="true"><i class="icon-plus"></i> <%= t('add')%></a>
        <span><%= t("personal_journal.paper_type") %></span>                        
      </p>
      <div class="detal-list my_scroll">
        <div class="scrollbar">
          <div class="track">
            <div class="thumb">
              <div class="end"></div>
            </div>
          </div>
        </div>
        <div class="viewport">
          <div class="overview">
            <table id="paper_types" class="table table-striped">
              <tbody>
                <%= render :partial => 'list_paper_type', :collection => @paper_types %>
              </tbody>
            </table>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="element span4">
    <div class="detail w-a h-a">
      <p class="totle">
        <a class="btn btn-small btn-primary pull-right" href="<%= new_admin_journal_level_path %>#paper_level_modal" data-toggle="modal" data-remote="true"><i class="icon-plus"></i> <%= t('add')%></a>
        <span><%= t("personal_journal.level_type") %></span>                        
      </p>
      <div class="detal-list my_scroll">
        <div class="scrollbar">
          <div class="track">
            <div class="thumb">
              <div class="end"></div>
            </div>
          </div>
        </div>
        <div class="viewport">
          <div class="overview">
            <table id="paper_levels" class="table table-striped">
              <tbody>
                <%= render :partial => 'list_level_type', :collection => @journal_levels %>
              </tbody>
            </table>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="element span4">
    <div class="detail w-a h-a">
      <p class="totle">          
        <a class="btn btn-small btn-primary pull-right" href="<%= new_admin_journal_paper_author_type_path %>#author_type_modal" data-toggle="modal" data-remote="true"><i class="icon-plus"></i> <%= t('add')%></a>
        <span><%= t("personal_journal.author_type") %></span>
      </p>
      <div class="detal-list my_scroll">
        <div class="scrollbar">
          <div class="track">
            <div class="thumb">
              <div class="end"></div>
            </div>
          </div>
        </div>
        <div class="viewport">
          <div class="overview">
          <table id="author_types" class="table table-striped">
            <tbody>
              <%= render :partial => 'list_author_type', :collection => @author_types %>
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="element span4">
    <div class="detail w-a h-a">
      <p class="totle">          
        <a class="btn btn-small btn-primary pull-right" href="<%= new_admin_journal_type_path %>#journal_type_modal" data-toggle="modal" data-remote="true"><i class="icon-plus"></i> <%= t('add')%></a>
        <span><%= t("personal_journal.journal_type") %></span>
      </p>
      <div class="detal-list my_scroll">
        <div class="scrollbar">
          <div class="track">
            <div class="thumb">
              <div class="end"></div>
            </div>
          </div>
        </div>
        <div class="viewport">
          <div class="overview">
          <table id="journal_types" class="table table-striped">
            <tbody>
              <%= render :partial => 'list_journal_type', :collection => @journal_types %>
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="paper_type_qe">
  <div style="display:none;" class="modal" id="paper_type_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  </div>
</div>

<div id="paper_level_qe">
  <div style="display:none;" class="modal" id="paper_level_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  </div>
</div>

<div id="author_type_qe">
  <div style="display:none;" class="modal" id="author_type_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  </div>
</div>


<div id="journal_type_qe">
  <div style="display:none;" class="modal" id="journal_type_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  </div>
</div>