Displaying articles with tag layout

Ruby on rails :: Layouts

Posted by PunNeng, Wed Aug 02 23:00:00 UTC 2006

มาต่อกันด้วยสิ่งสวยๆ งามๆ กันต่อ ผมชอบส่วนนี้มากครับ เพราะได้ทำ css เพลินมาก ทำไปเรื่อยๆ แป๊บเดียว จะตี 5 ละ เพลินจริงๆ

สำหรับหน้า layout นี้ มันจะถูกเก็บไว้ใน app/views/layouts/ ซึ่งตอนนี้ มันยังไม่มีอะไรเลย นอกจาก layout ที่ถูกสร้างมาจาก scaffold เรามาเริ่มสร้างฝั่ง front-end กันก่อนดีกว่า สร้าง post.rhtml ขึ้นมาเลย ตามนี้

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33

<html>
<head>
  <title>Admin: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'home' %>
</head>
<body>
<div id="header">

<span><%= link_to("My Simple Blog", :action => "index") %></span>
</div>

<div id="container">
  <div id="mainNav">
    <ul id="sidebar">
      <li><%= link_to "List", :action => 'index' %></li>
      <li><a href="#">page2</li>
      <li><a href="#">page3</li>
    </ul>
  </div>

  <div id="content">
    <% unless flash[:notice].nil? %>
      <div id="notice" >< %= flash[:notice] %></div>
    <% end %>
    <%= @content_for_layout %>
  </div>  
</div>

<div id="footer">
  Powered by Ruby on Rails
</div>
</body>
</html>

แล้วไปเพิ่ม <div> ให้กับ post แต่ละอันใน app/views/post/index.rhtml หน่อย ดังนี้

  1
  2
  3

<div class="post">
  <h1><%= link_to post.title, :action => "show", :id => post %></h1>
  <p><%= truncate(post.body, 200)%></p>

ยังขาด css อยู่หน่อย แต่ css ตัวนี้ ผม test บน firefox ของ ubuntu นะครับ ผมยังไม่แน่ใจว่าไปอยู่บน IE หรือ firefox ของ windows จะเป็นยังไงบ้าง ไปที่ public/stylesheets/ แล้วสร้าง home.css แล้วใส่ตามนี้เลย

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64

body{
  padding: 0;
  margin: 0;
}

a{
  color: #186F2B;
  text-decoration: none;
}

a:hover{
  color: #30A148;
}

h1, h2{
  color: #186F2B;
}

#header{
  text-align: center;
  background: #31BB4E;
  height: 70px;
  border-bottom: 2px solid;
  color: #282;
}

#header span{
  color: #fff;
  font-size: 40px;
}

#notice{
  padding: 2px;
  background-color: #D1DAD3;
  display: block;
  color: #186F2B;
}

#container{
  background: #D1DAD3;
}

#mainNav {
  float: right;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 7em;
  background: #D1DAD3;
}

#mainNav ul {
  list-style: none;
}

#content{ 
  padding: 2em;
  margin-right: 7em; 
  background: white;
}

#footer{
  text-align: center;
  font-size: .8em;
}

และอีกอันหนึ่ง สำหรับแสดง error messages ตอนที่ validate ไม่ผ่าน ซึ่งผมก็ไปเอามาจากใน scaffold.css นั่นแหละ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36

/* css for error messages */
.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

หน้าตาน่าจะได้แบบนี้

คลิกเพื่อดูขนาดจริง

คลิกเพื่อดูขนาดจริง

อ่าาา ต่อไปจะไปทำต่อที่ฝั่ง back-end ละกัน คราวนี้ไปแก้ใน app/views/layouts/admin.rhtml เลย

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36

<html>
<head>
  <title>Admin: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'admin', 'error_messages' %>
</head>
<body>
<div id="header">

<span><%= link_to("Admin Area", :action => "list")  %></span>

</div>
<div id="container">
  <div id="mainNav">    
    <div id="< %= controller.action_name %>">
      <ul id="topbar">
        <li class="list"><%= link_to "List", :action => "list" %></a>
        <li class="new"><%= link_to "Create", :action => "new" %></a>
        <li class="action3"><a href="#">action3</a>
        <li class="action4"><a href="#">action4</a>
        <li style="float: right;"><%= link_to "Logout", :controller => "login", :action => "logout" %></li> 
        <li style="float: right;"><%= link_to "View Site" , :controller => "post", :action => "index" %></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <% unless flash[:notice].nil? %>
      <p id="notice" >< %= flash[:notice] %></p>
    <% end %>
    <%= @content_for_layout %>
  </div>
</div>
<div id="footer" >
    Powered by Ruby on Rails
</div>
</body>
</html>

จากนั้นก็ไปสร้าง css ต่อใน public/stylesheets/admin.css ตามนี้

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91

body{
  padding: 0;
  margin: 0;
}

a{
  color: #5991AE;
  text-decoration: none;
}

a:hover{
  color: #83B1C8;
  background: #fff;
}

#header{
  text-align: center;
  background: #accdde;
  height: 70px;
  border-bottom: 2px solid;
  color: #5991AE;
}

#header span{
  color: #fff;
  font-size: 40px;
}

#mainNav ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  background: #D1DAD3
}

#mainNav ul li { 
  float: left;
}

#mainNav ul a {
  display: block;
  padding: 0 1em;
  line-height: 2.1em;
  text-decoration: none;
}

#index #topBar .list a,
#list #topBar .list a,
#new #topBar .new a ,
#lnk3 #topBar .link3 a,
#link4 #topBar .link4 a{
  background: #fff;
  cursor: default;
}

#content{ 
  padding: 2em;
  background: white;
}

#footer{
  clear: both;
  text-align: center;\
  font-size: .8em;
}

/* for content */
.headTable{
  background: #accdde;
}

.listTitle {
  color:       #244;
  font-weight: bold;
  font-size:   larger;
}

.listActions {
  font-size:    small;
  text-align:   center;
  padding-left: 1em;
}

.listLine0 {
  background: #dce7ed;
}

.listLine1 {
  background: #eeeeee;
}

ตามรูปเลย

คลิกเพื่อดูขนาดจริง

คลิกเพื่อดูขนาดจริง

post.rhtml และ admin.rhtml ลองสังเกตดูมะนจะมีจุดที่เหมือนๆ กันอยู่ หลักๆ ก็มีการ import css จะใช้

  1

<%= stylesheet_link_tag 'admin', 'error_messages' %>

ก็ทำการ import ชื่อ file เท่านั้น ส่วนต่อไปจะอยู่ที่การแสดง flash[:notice] 

  1
  2
  3

<% unless flash[:notice].nil? %>
  <p id="notice" ><%= flash[:notice] %></p>
<% end %>

ถ้า flash[:notice] ไม่เป็น nil ก็จะทำการแสดงผลตัว flash[:notice] เมื่อแสดงแล้วมันจะถูกเคลียร์ค่าทันที ส่วนต่อไป จะเป็น

  1

<%= @content_for_layout %>

ตรงนี้นี่แหละ จะเป็นส่วนที่ทำการดึงหน้ามาแสดง ที่เราสร้างๆ เอาไว้

ส่วนที่เหลือ จะเป็น Erb เล็กๆ น้อยๆ คิดว่าเคยอธิบายไปแล้ว แต่ส่วนของ css อันนี้มันเยอะจัด ไม่ขออธิบายละกัน ไว้ว่างๆ จะมาลงกับ css กันต่อ

อ้อ ยังขาดเรื่อง authentication ไว้คราวหน้าละกันครับ

แก้ไขล่าสุด วันที่ 10 กรกฏาคม 2550 เวลา 22.38 น.

0 comments | Filed Under: Ruby on Rails | Tags: layout

About this site

Worst view in IE.

Pages

Categories

Top Tags

More

codegent: we're hiring