Liz's Blog

12 in 12 Challenges #11:如何用Rails4做出Notebook

| Comments

Mackenzie Child
Youtube:How to build a notebook app in Rails 4
Github:notenote

這週影片和作者原Github差比較多,可以參考我的練習Github

【開啟新專案notenote】
1.終端機:rails new notenote
2.終端機:cd notenote
3.用另一視窗開啟終端機:rails s
4.瀏覽器:localhost:3000
5.終端機:git init
6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Initial Commit"

【welcome controller & view】
1.終端機:rails g controller welcome index
2.

config/routes.rb
....
root "welcome#index"
....

3.終端機:git status
4.終端機:git add .
5.終端機:git commit -am "Add welcome controller & view"

【安裝gems】
1.安裝hamlsimple_formdevise

Gemfile
....
gem 'haml', '~> 5.0', '>= 5.0.1'
gem 'simple_form', '~> 3.5'
gem 'devise', '~> 4.3'
....

2.終端機:bundle install
3.

app/views/welocme/index.html.haml
%h1 This is the welcome placeholder

4.終端機:rails g simple_form:install
5.另一視窗重啟終端機:rails s
6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Add application Gems & Edit Welcome Index View"

【產生Note資料庫欄位】
1.終端機:rails g model note title:string content:text
2.終端機:rake db:migrate
3.終端機:git status
4.終端機:git add .
5.終端機:git commit -am "Generate Note Model"

【產生notes controller & 增加routes】
1.終端機:rails g controller Notes
2.

app/controllers/notes_controller.rb
....
    def index
    end

    def show
    end

    def new
        @note = Note.new
    end

    def create
        @note = Note.new(note_params)
    end

    def edit
    end

    def update
    end

    def destroy
    end

    private

    def find_note
    end

    def note_params
        params.require(:note).permit(:title, :content)
    end
....

3.

config/routes.rb
....
  resources :notes
end

4.終端機:git status
5.終端機:git add .
6.終端機:git commit -am "Generate notes controller & added routes"

【增加note views】
1.新增new.html.haml檔案。

app/views/notes/new.html.haml
%h1 Add a New Note

2.新增_form.html.haml檔案。

app/views/notes/_form.html.haml
= simple_form_for @note do |f|
    = f.input :title
    = f.input :content
    = f.submit

3.

app/views/notes/new.html.haml
....
= render 'form'

4.

app/controllers/notes_controller.rb
....
    def new
        @note = Note.new
    end

    def create
        @note = Note.new(note_params)
    
    if @note.save
            redirect_to @note
        else
            render 'new'
        end
    end
....
    def note_params
        params.require(:note).permit(:title, :content)
    end
....

5.新增show.html.haml檔案。

app/views/notes/show.html.haml
%h1= @note.title
%p= @note.content

6.

app/controllers/notes_controller.rb
....
before_action :find_note, only: [:show, :edit, :update, :destroy]
....
def find_note
  @note = Note.find(params[:id])
end
....

7.

app/views/notes/show.html.haml
....
= link_to "All Notes", notes_path

8.新增index.html.haml檔案。

app/views/notes/index.html.haml
- @notes.each do |note|
  %h2= note.title
  %p= time_ago_in_words(note.created_at)

9.

app/controllers/notes_controller.rb
....
def index
  @notes = Note.all.order("created_at DESC")
end
....

10.

app/views/notes/index.html.haml
- @notes.each do |note|
  %h2= link_to note.title, note
  %p= time_ago_in_words(note.created_at)

11.終端機:git status
12.終端機:git add .
13.終端機:git commit -am "Add note views"

【增加修改及刪除notes功能】
1.

app/controllers/notes_controller.rb
....
    def update
        if @note.update(note_params)
            redirect_to @note
        else
            render 'edit'
        end
    end
  
  def destroy
        @note.destroy
        redirect_to notes_path
    end
....

2.

app/views/notes/show.html.haml
....
= link_to "Edit Note", edit_note_path(@note)
= link_to "Delete Note", note_path(@note), method: :delete, data: { confirm: "Are you sure?" }

3.

app/views/notes/edit.html.haml
%h1 Edit Note

= render 'form'

= link_to "Cancel", note_path

4.

app/views/notes/index.html.haml
....
= link_to "New Note", new_note_path

5.終端機:git status
6.終端機:git add .
7.終端機:git commit -am "Edit & Destroy Notes"

【設定devise】
1.終端機:rails g devise:install
2.

config/environments/development.rb
....
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end

3.

app/views/layouts/application.html.haml
....
<body>

    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <%= yield %>

</body>
....

4.終端機:rails g devise:views
5.終端機:rails g devise User
6.終端機:rake db:migrate
7.終端機:git status
8.終端機:git add .
9.終端機:git commit -am "Installed Devise"

【設定使用者和notes關聯性】
1.終端機:rails g migration add_user_id_to_notes user_id:integer
2.終端機:rake db:migrate
3.終端機:rails c
4.終端機:@note = Note.first
5.

app/models/user.rb
....
  has_many :notes
....

6.

app/models/note.rb
....
  belongs_to :user
....

7.

app/controllers/notes_controller.rb
....
    def new
        @note = current_user.notes.build
    end

    def create
        @note = current_user.notes.build(note_params)

        if @note.save
            redirect_to @note
        else
            render 'new'
        end
    end
....

8.終端機:@note = Note.last
9.ctrl+D
10.終端機:git status
11.終端機:git add .
12.終端機:git commit -am "Added an association between User & Notes"

【使用者只能看到自己的notes】
1.

app/controllers/notes_controller.rb
....
  before_action :authenticate_user!
....
  def index
        @user = current_user
        @notes = Note.where(user_id: current_user)
    end
....

2.終端機:rails c
3.終端機:@note = Note.first
4.終端機:@note.user_id = 1
5.終端機:@note.save
6.ctrl+D
7.終端機:git status
8.終端機:git add .
9.終端機:git commit -am "Change index to show only current users notes"

【如果使用者登入則導入notes#index】
1.

config/routes.rb
....
deviser_for :users
get 'welcome/index'
resources :notes

authenticated :user do
  root 'notes#index', as: "authenticated_root"
end

root "welcome#index"
....

2.終端機:git status
3.終端機:git add .
4.終端機:git commit -am "Change root based on if user_signed_in?"

【修改版型】
1.

app/assets/stylesheets/application.css.scss
/*
 *= require_self
 */

@import 'normalize.css.scss';
@import 'global.css.scss';
@import 'welcome.scss';
@import 'notes.scss';

2.

app/assets/stylesheets/normalize.css.scss
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

3.

app/assets/stylesheets/global.css.scss
$dark_gray: #2B2E2E;
$light_gray: #C0C1C1;
$green: #33CD99;

@mixin bold_font {
    font-family: "Brandon Grotesque","Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    padding-top: 4.5rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

.wrapper_with_padding {
    width: 80%;
    margin: 0 auto;
    padding: 3.5rem 0;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

button, .button {
    border: none;
    outline: none;
    background: $green;
    padding: 1rem 3.5rem;
    border-radius: 2rem;
    a {
        color: white;
        text-decoration: none;
    }
}

.button {
    color: white;
    margin: 2rem 0;
}

a {
    color: $green;
    text-decoration: none;
    &:hover {
        color: $dark_gray;
    }
}

header {
    background: $dark_gray;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.75rem 0;
    border-bottom: 7px solid $green;
    .header_inner {
        width: 90%;
        margin: 0 auto;
        #logo {
            display: inline-block;
            width: 10rem;
            float: left;
        }
        nav {
            float: right;
            a {
                text-decoration: none;
                color: white;
                font-size: 1.1rem;
                line-height: 1.5;
                margin-left: 1rem;
                &:hover {
                    color: $green;
                }
            }
        }
    }
}

footer {
    background: $dark_gray;
    width: 100%;
    padding: 2rem 0;
    color: white;
    text-align: center;
    @include bold_font;
    p {
        margin: 0;
        font-size: .85rem;
    }
}

input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid $light_gray;
    border-radius: .4rem;
}

input[type="text"], input[type="email"], input[type="password"] {
    height: 40px;
}

textarea {
    min-height: 200px;
}

4.

app/assets/stylesheets/welcome.scss
#banner {
    background-image: url(image_path("welcome_banner_image.jpg"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    min-height: 500px;
    display: table;
    .banner_content {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        h1 {
            @include bold_font;
            color: white;
            font-size: 3.5rem;
            margin: 0;
        }
        p {
            font-size: 1.5rem;
            margin: 0 0 2.5rem 0;
            color: rgba(250, 250, 250, 0.5);
        }
    }
}

#testimonial {
    text-align: center;
    font-size: 1.5rem;
    color: #afb0b0;
    padding: 3.5rem 0;
    .quote {
        margin: 0 0 .5rem 0;
    }
    .name {
        @include bold_font;
        color: $dark_gray;
        margin: 0;
        font-size: .85rem;
    }
}

#callouts {
    background-image: url(image_path("callout_background.jpg"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    min-height: 400px;
    display: table;
    .callout_inner {
        display: table-cell;
        vertical-align: middle;
    }
    .callout {
        text-align: center;
        width: 33.3333%;
        padding: 1.5rem 2.5%;
        float: left;
        h2 {
            @include bold_font;
            color: white;
            margin-bottom: 0;
        }
        p {
            color: rgba(250, 250, 250, 0.4);
        }
    }
}

#bottom_cta {
    text-align: center;
    padding: 7.5rem 0;
    h2 {
        @include bold_font;
        color: $dark_gray;
        font-size: 3rem;
        margin: 0;
    }
    p {
            font-size: 1.25rem;
            margin: 0 0 2.5rem 0;
            color: #a7a8a8;
        }
}

6.

app/assets/stylesheets/notes.scss
#notes {
    .note {
        background: $dark_gray;
        width: 30%;
        min-height: 150px;
        margin: 1rem 1%;
        padding: 1.5rem 2.5%;
        float: left;
        border-radius: .4rem;
        position: relative;
        .title {
            @include bold_font;
            color: white;
            margin: 0;
            letter-spacing: 1px;
        }
        .date {
            position: absolute;
            bottom: .25rem;
            left: 8.5%;
            color: $green;
            font-size: .85rem;
        }
    }
}

#note_show {
    .title {
        @include bold_font;
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #E9E9E9;
    }
    p {
        font-size: 1.375rem;
        line-height: 1.75;
    }
    .buttons {
        margin-top: 3rem;
        a.button {
            padding: .5rem 2rem;
            border-radius: 2rem;
            text-decoration: none;
            color: $green;
            border: 5px solid #E9E9E9;
            @include bold_font;
            background: transparent;
        }
    }
}

6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Add Scss Sytling to Application"

【修改歡迎頁】
1.

app/views/layouts/application.html.haml
!!!
%html
%head
    %title NoteNote | Online Notebook Application
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
%body
    %header
        .header_inner
            = link_to image_tag( 'logo.svg'), root_path, id: "logo"
            %nav
                - if user_signed_in?
                    = link_to "New Note", new_note_path
                - else
                    = link_to "Log In", new_user_session_path
    %p.notice= notice
    %p.alert= alert

    = yield

2.下載以下圖片檔
logo.svg
callout_background.jpg
welcome_banner_image.jpg
3.

app/views/welcome/index.html.haml
#banner
    .banner_content
        %h1 NoteNote
        %p Your online notebook. Never forget an idea again.
        %button= link_to "Sign Up", new_user_registration_path
#testimonial
    .wrapper
        %p.quote "The greatest notebook application. Period."
        %p.name - Mackenzie Child
#callouts
    .callout_inner
        .wrapper
            .callout
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.

            .callout
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.

            .callout
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.
#bottom_cta
    .wrapper
        %h2 For Realz!
        %p I want you to sign up... If you don’t. I will find you!
        %button= link_to "Click Meee!!!", new_user_registration_path
    
%footer
    %p &copy; Liz

4.終端機:git status
5.終端機:git add .
6.終端機:git commit -am "Add content to welcome index"

【修改Notes Index版型】
1.

app/views/notes/index.html.haml
.wrapper_with_padding
    #notes.clearfix
        - unless @notes.blank?
            - @notes.each do |note|
                %a{ href: (url_for [note])}
                    .note
                        %p.title= note.title
                        %p.date= time_ago_in_words(note.created_at)
        - else
            %h2 Add a Note
            %p It appears you haven't created any notes yet... Lets fix that. Why don't you go ahead and create a new note.
            %button= link_to "New Note", new_note_path

2.終端機:git status
3.終端機:git add .
4.終端機:git commit -am "Styling Notes Index"

【修改Show Page版型】
1.

app/views/notes/show.html.haml
.wrapper_with_padding
    #note_show
        %h1.title= @note.title
        %p= simple_format(@note.content)

        .buttons
            = link_to "Edit", edit_note_path(@note), class: "button"
            = link_to "Delete", note_path(@note), method: :delete, data: { confirm: "Are you sure?" }, class: "button"

2.終端機:git status
3.終端機:git add .
4.終端機:git commit -am "Style Show Page"

【修改表格版型】
1.

app/views/notes/new.html.haml
.wrapper_with_padding
    %h1 Add A Note

    = render 'form'

2.

app/views/notes/edit.html.haml
.wrapper_with_padding
    %h1 Edit Your Note

    = render 'form'
  = link_to "Cancel", note_path

3.

app/views/notes/_form.html.haml
= simple_form_for @note do |f|
    = f.input :title
    = f.input :content
    = f.button :submit

4.

app/views/devise/registrations/new.html.erb
<div class="wrapper_with_padding">
    <h2>Sign up</h2>

    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= f.error_notification %>

      <div class="form-inputs">
        <%= f.input :email, required: true, autofocus: true %>
        <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @validatable) %>
        <%= f.input :password_confirmation, required: true %>
      </div>

      <div class="form-actions">
        <%= f.button :submit, "Sign up" %>
      </div>
    <% end %>

</div>

5.

app/views/devise/sessions/new.html.erb
<div class="wrapper_with_padding">
    <h2>Log in</h2>

    <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <div class="form-inputs">
        <%= f.input :email, required: false, autofocus: true %>
        <%= f.input :password, required: false %>
        <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
      </div>

      <div class="form-actions">
        <%= f.button :submit, "Log in" %>
      </div>
    <% end %>

    <%= render "devise/shared/links" %>
</div>

6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Sytled Forms"

【增加font awesome】
1.

app/views/layouts/application.html.haml
....
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    %link{:rel => "Stylesheet", :href => "//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"}/
    = csrf_meta_tags
....

2.

app/views/welcomes/index.html.haml
....
#callouts
    .callout_inner
        .wrapper
            .callout
                %i.fa.fa-pencil
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.
        
      .callout
                %i.fa.fa-rocket
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.

            .callout
                %i.fa.fa-bell
                %h2 Notes
                %p Viral Echo Park Intelligentsia tattooed, craft beer organic authentic polaroid tousled mlkshk church-key. Fanny pack Banksy vegan  authentic Helvetica.
....

3.

app/assets/stylesheets/welcome.scss
....
#callouts {
    background-image: url(image_path("callout_background.jpg"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    min-height: 400px;
    display: table;
    .callout_inner {
        display: table-cell;
        vertical-align: middle;
    }
    .callout {
        text-align: center;
        width: 33.3333%;
        padding: 1.5rem 2.5%;
        float: left;
    i {
      font-size: 2.5rem;
      color: $green;
    }
        h2 {
            @include bold_font;
            color: white;
            margin-bottom: 0;
        }
        p {
            color: rgba(250, 250, 250, 0.4);
        }
    }
}
....

4.終端機:git status
5.終端機:git add .
6.終端機:git commit -am "Add font awesome to welcome page"

【延伸閱讀】
1.12 in 12 Challenges #1:如何利用Rails4打造出Reddit或Hacker News類型的網站
2.12 in 12 Challenges #2:如何用Rails4做出部落格
3.12 in 12 challenges #3:如何用Rails4打造一個食譜網站
4.12 in 12 challenges #4:如何用Rails4打造Pinterest
5.12 in 12 challenges #5:如何用Rails4打造電影評論網
6.12 in 12 challenges #6:如何用Rails4打造待做清單
7.12 in 12 Challenges #7:如何利用Rails4打造出求職網站
8.12 in 12 Challenges #8:如何用Rails4做出健身紀錄
9.12 in 12 Challenges #9:如何用Rails4做出維基百科
10.12 in 12 Challenges #10:如何用Rails4做出論壇
11.12 in 12 Challenges #11:如何用Rails4做出Notebook
12.12 in 12 Challenges #12:如何用Rails4做出Dribbble

Comments

comments powered by Disqus