[CSS] 實作CSS工作列表

修改工作列表顯示方式

架構
layout/admin.html.erb

<body>
  <div class="container-fluid">
    <%= render "common/navbar" %>
    <%= render "common/flashes" %>
    <div class="row">
        <div class="col-md-2">
        管理員介面按鈕
        </div>
      <div class="col-md-offset-1 col-md-6">
          <%= yield %>
      </div>
  <div class="col-md-2 md-offset-1">
        推薦工作
      </div>
          </div>
    <%= render "common/footer" %>
  </div>
</body>

yield的部分就是admin/jobs/index.html

index.html.erb

<div class="job-page">     <!-- 100% 父節點-->
    <% @jobs.each do |job| %>
    <div class="job-info"> <!-- 50% left-->
  </div>
  <div class="job-pix"> <!-- 50% right-->
  </div>
  <% end %>
</div>

<!--頁底選頁 -->
<div class="text-center">
  <%= will_paginate @jobs, renderer: BootstrapPagination::Rails %>
</div>

CSS

//job description
.job-page {
  width: 100%;
}

.job-info {
  width: 50%; /*50%*/
  height: 300px;
  float: left;
}

.job-pix {
  width: 50%;
  height: 300px;
  float: left;
}

效果:
紅框是layout
黃框是yield
兩個路徑不一樣,一開始有點搞混

這邊因為
<% @jobs.each do |job| %>
會重複生成job,然後 <% end %> 是結束
之前因為抄來的代碼太多,所以<% end %>的位置沒放對
所以框架就跑得亂七八糟

一行一行檢查後,還好有修好

comments powered by Disqus