(5)Railsで簡単なメモアプリを作ってみる

.notification {
 .notice {
   background-color:blue;
   color: white;
   text-align: center;
 }

 .alert {
   background-color: orange;
   color: white;
   text-align: center;
 }
 
 .delete {
   background-color: red;
   color: white;
   text-align: center;
 }
}

@mixin flash($color) {
 background-color: $color;
 color: white;
 text-align: center;
}

.notification {
 .notice {
   @include flash(blue);
 }

 .alert {
   @include flash(orange);
 }
 
 .delete {
   @include flash(red);
 }
}

@import "mixin.scss";
@import "memo.scss";

<div class="header">
 <%= link_to 'Memo app', root_path %>
 <%= link_to '新規投稿', new_memo_path %>
</div>
<div class="messages">
 <% @posts.each do |post| %>
 <ul class="content">
     <li class="message">
       <%= post.content %>
       <ul>
         <li class="btn">
           <%= link_to "編集", edit_memo_path(post), class: "edit-btn" %>
         </li>
         <li class="btn">
           <%= link_to "削除", memo_path(post.id), class: "delete-btn", method: :delete %>
         </li>
       </ul>
     </li>
 </ul>
 <% end %>
</div>

/*!
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
   TODO will need to remove settings on HTML since we can't namespace it.
   TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
 color:#000;
 background:#FFF;
}
/*
 TODO remove settings on BODY since we can't namespace it.
*/
/*
 TODO test putting a class on HEAD.
     - Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
 margin:0;
 padding:0;
}
table {
 border-collapse:collapse;
 border-spacing:0;
}
fieldset,
img {
 border:0;
}
/*
 TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
 font-style:normal;
 font-weight:normal;
}

ol,
ul {
 list-style:none;
}

caption,
th {
 text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size:100%;
 font-weight:normal;
}
q:before,
q:after {
 content:'';
}
abbr,
acronym {
 border:0;
 font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
 vertical-align:text-top;
}
sub {
 vertical-align:text-bottom;
}
input,
textarea,
select {
 font-family:inherit;
 font-size:inherit;
 font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
 *font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
 color:#000;
}
/* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset { display: none; 

body {
 margin: 0;
 padding: 0;
}

a {
 text-decoration: none;
 color: black;
}

.header {
 display: inline-flex;
 justify-content: space-evenly;
 height: 50px;
 width: 100%;
 line-height: 50px;
 background-color: lavender;
 a:hover {
   color: red;
 }
}

.messages {
 margin: 20px auto;
 max-width: 500px;
 padding: 10px;
 text-align: center;
 height: 300px;
 background-color: aliceblue;
 overflow: scroll;
 .content {
   margin: 15px auto;
   width: 80%;
   height: 40px;
 }
 .message {
   line-height: 40px;
   border: 1px solid lightgray;
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
   overflow: auto;
   .btn {
     font-size: 12px;
     line-height: 20px;
     .edit-btn:hover {
       color: blue;
     }
     .delete-btn:hover {
       color: red;
     }
   }
 }
}

@import "reset";
@import "mixin.scss";
@import "memo.scss";
@import "memos/*";

<h1>投稿ページ</h1>
<%= form_tag('/memo', method: :post) do %> 
  <input type="text" name="content" maxlength='20'> 
  <input type="submit" value="投稿する">
<% end %>

<h1>編集ページ</h1>
<%= @post.content %>
<%= form_tag("/memo/#{@post.id}", method: :patch) do %> 
  <input type="text" name="content" maxlength='20'> 
  <input type="submit" value="更新">
<% end %>