スポンサーリンク

2015年9月1日

[Rails Tutorial for Phoenix]Modification of the design

Goal

Phoenix Tutorialのデザインを改善する。

Dev-Environment

OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.5
Phoenix Framework: v1.0.0
PostgreSQL: postgres (PostgreSQL) 9.4.4
Safetybox: v0.1.2
Scrivener: v1.0.0
Bootstrap: v3.3.5

Wait a minute

デザインの改善ができたので、記事にします。
ドロップダウンが動かなかったので、
結局、Bootstrap3を入れてしまった。
この記事は、ソースコードのみ記述します。
態々、説明するような部分もないので。

Index

Rails Tutorial for Phoenix
|> Place the Bootstrap
|> Custom CSS
|> Layout
|> Templates
|> Extra

Place the Bootstrap

Bootstrapを配置します。
ダウンロードは以下のリンク先です。
ダウンロード: Bootstrap download
以下のようにファイルを配置します。
  • css/bootstrap.css → priv/static/css/bootstrap.css
  • css/bootstrap.css.map → priv/static/css/bootstrap.css.map
  • fonts/* → priv/static/*
  • js/bootstrap.js → priv/static/js/bootstrap.js

ファイル: web/templates/layout/app.html.eex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sample App!!</title>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/bootstrap.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/custom.css") %>">

    <%= render "shim.html" %>
  </head>

  <body>
    <%= render "header.html", conn: @conn %>

    <div class="container">
      <%= @inner %>

      <%= render "footer.html", conn: @conn %>
    </div>

    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="<%= static_path(@conn, "/js/bootstrap.js") %>"></script>
  </body>
</html>

Caution:

jqueryも読み込んでいます。

Custom CSS

カスタムCSSを修正します。

ファイル: priv/static/css/custom.css

修正前:
@import url("app.css");
修正後:
@import "boostrap.css";

Layout

レイアウトのヘッダーとフッターを修正します。

ファイル: web/templates/layout/header.html.eex

<header class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="logo" href="<%= page_path(@conn, :index) %>"></a>
      <nav>
        <ul class="nav nav-pills pull-right">
          <li><%= link "Home", to: static_pages_path(@conn, :home) %></li>
        <%= if current_user(@conn) do %>
          <li class="dropdown">
            <!-- Dropdown Menu -->
            <a href="#" class="dropdown-toggle" id="account" data-toggle="dropdown">
              User Menu
              <span class="caret"></span>
            </a>
            <!-- Dropdown List -->
            <ul class="dropdown-menu" aria-labelledby="account">
              <li><%= link "All Users", to: user_path(@conn, :index) %><li>
              <li><%= link "Profile", to: user_path(@conn, :show, current_user(@conn)) %><li>
              <li><%= link "Help", to: static_pages_path(@conn, :help) %></li>
              <li class="divider"></li>
              <li><%= link "Sign-out", to: session_path(@conn, :delete) %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link "Sign-in", to: session_path(@conn, :new) %></li>
        <% end %>
      </ul>
      </nav>
    </div> <!-- container -->
  </div> <!-- navbar-inner -->
</header>
<h2>
  <p class="alert alert-info" role="alert" style="text-align: center;"><%= get_flash(@conn, :info) %></p>
  <p class="alert alert-danger" role="alert" style="text-align: center;"><%= get_flash(@conn, :error) %></p>
</h2>

ファイル: web/templates/layout/footer.html.eex

<footer class="footer">
  <nav>
    <ul>
      <li><%= link "About", to: static_pages_path(@conn, :about) %></li>
      <li><%= link "Contact", to: static_pages_path(@conn, :contact) %></li>
      <li><a href="http://www.phoenixframework.org/docs">Phoenix Get Started</a></li>
    </ul>
  </nav>
</footer>

Templates

幾つかのテンプレートを修正します。

ファイル: web/templates/user/show.html.eex

span4、span8だとグリッドが適応されないので、指定方法を修正しました。
<h2>User profile</h2>

<div class="row">
  <aside class="col-md-4">
    <section>
      <%= render SampleApp.SharedView, "user_info.html", conn: @conn, user: @user %>
    </section>
    <section>
      <%= render SampleApp.SharedView, "stats.html", conn: @conn, user: @user %>
    </section>
    <%= if current_user?(@conn, @user) do %>
      <section>
        <%= link "Edit", to: user_path(@conn, :edit, @user), class: "btn btn-default btn-xs" %>
        <%= link "Delete", to: user_path(@conn, :delete, @user), method: :delete, class: "btn btn-danger btn-xs" %>
      </section>
    <% end %>
    <section>
      <%= render "micropost_form.html", conn: @conn, changeset: @changeset, user: @user %>
    </section>
  </aside>

  <div class="col-md-8">
    <%= render "follow_form.html", conn: @conn, user: @user %>

    <%= unless is_empty_list?(@posts) do %>
      <h3>Microposts</h3>
      <%= render SampleApp.SharedView, "microposts.html", conn: @conn, posts: @posts, user: @user %>

      <%= render SampleApp.PaginationView, "pagination.html",
               action: user_path(@conn, :show, @user),
               current_page: @current_page,
               page_list: @page_list,
               total_pages: @total_pages %>
    <% end %>
  </div>
</div>

ファイル: web/templates/user/

span4、span8だとグリッドが適応されないので、指定方法を修正しました。
<div class="row">
  <aside class="col-md-4">
    <section>
      <%= render SampleApp.SharedView, "user_info.html", conn: @conn, user: @user %>
    </section>
    <section>
      <%= render SampleApp.SharedView, "stats.html", conn: @conn, user: @user %>
      <%= if @users do %>
        <div class="user_avatars">
          <%= for follow_user <- @users do %>
            <a href="<%= user_path(@conn, :show, follow_user) %>">
              <img src="<%= get_gravatar_url(follow_user) %>" class="gravatar">
            </a>
          <% end %>
        </div>
      <% end %>
    </section>
  </aside>

  <div class="col-md-8">
    <h3>Users</h3>
    <%= if @users do %>
      <ul class="users">
        <%= for follow_user <- @users do %>
          <%= render "user.html", conn: @conn, user: follow_user %>
        <% end %>
      </ul>

      <%= render SampleApp.PaginationView, "pagination.html",
               action: @action,
               current_page: @current_page,
               page_list: @page_list,
               total_pages: @total_pages %>
    <% end %>
  </div>
</div>

Extra

やらなくても問題はない。
パスワードとEmailの入力エリアを修正しました。

ファイル: web/templates/user/user_form.html.eex

<%= form_for @changeset, @action, fn f -> %>
  <%= if f.errors != [] do %>
    <div class="alert alert-danger">
      <p>Oops, something went wrong! Please check the errors below:</p>
      <ul>
        <%= for {attr, message} <- f.errors do %>
          <li><%= humanize(attr) %> <%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <label>Name</label>
    <%= text_input f, :name, class: "form-control" %>
  </div>

  <div class="form-group">
    <label>Email</label>
    <%= email_input f, :email, class: "form-control" %>
  </div>

  <div class="form-group">
    <label>Password</label>
    <%= password_input f, :password, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= submit "Sign-up!", class: "btn btn-primary" %>
  </div>
<% end %>

ファイル: web/templates/user/signin_form.html.eex

<h1>Sign in!!</h1>

<%= form_for @conn, session_path(@conn, :create), [name: :signin_params], fn f -> %>
  <%= if f.errors != [] do %>
    <div class="alert alert-danger">
      <p>Oops, something went wrong! Please check the errors below:</p>
      <ul>
        <%= for {attr, message} <- f.errors do %>
          <li><%= humanize(attr) %> <%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <label>Email</label>
    <%= email_input f, :email, class: "form-control" %>
  </div>

  <div class="form-group">
    <label>Password</label>
    <%= password_input f, :password, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= submit "Sign-in!", class: "btn btn-primary" %>
  </div>
<% end %>

Speaking to oneself

これで、少しはましなデザインになりました。
follow / unfollowのボタンが大きいのは少し気になるが・・・まぁいいや。
これで記事の書き直しに集中できる。

Bibliography

なし。
​
ラベル: , , ,

人気の投稿

  • [Elixir]Proxy環境下でElixirを無理やり動かす！
    Proxy環境下でElixirを動かすまでにやったこと 社内の環境だとProxyがあるためうまく動かないことはわかっていた。 時間ができたので、突貫でElixirの仮環境を作成しました。 突貫で作業したので、内容に不備があるかもしれません。 もし問題が発生しましたら、...
  • Rubyのエンコーディングについて
    タイトル：Rubyのエンコーディングについて 目的：Rubyのエンコーディングについての備忘録を作成すること 以下の環境により実施 OS：Windows8.1 Ruby：v2.2.2 x64 ディレクトリ構造： 作業ディレクトリ |-encoding-test....
  • [Elixir]Timexを使って日時のフォーマット変換を行う
    Goal TimexのDateFormatを使う。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.4 Timex: v0.19.5 Con...
  • [Elixir+Phoenix]Ectoでpreloadする対象にorder_byしたい
    Goal Ectoでpreloadする対象にorder_byを行う。 Dev-Environment OS: Windows8.1 Erlang: Eshell V7.1, OTP-Version 18.1 Elixir: v1.1.1 Phoenix Frame...
  • Sinatraで掲示板を作ってみた！！
    タイトル：Sinatraで掲示板を作ってみた！！ 目的：Sinatraを使って掲示板を作成してみる。 実施環境： OS：Windows8.1 Ruby：v2.2.2 Sinatra：v1.4.6 Haml：v4.0.6 ディレクトリ構造： 作業ディレクトリ ...
  • [Elixir+Phoenix]Phoenixでもページネーションがしたい！！(その2)
    Goal Github - drewolson/scrivener を動作検証する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.4 Phoen...
  • [Elixir]Streamの使い方を習得する
    Goal Streamの使い方を習得する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minute 今回はStr...
  • Markdown Hereをインストールしたのでテスト
    目的 私が利用頻度の高そうなものを練習がてら記述する。 始める前に Markdown Here： Chromeの拡張機能 目次 ヘッダー 協調と打消し線 リスト リンク 画像 コードとシンタックスのハイライト テーブル ブロック ...
  • Using gen_udp module in elixir
    Goal gen_udpの簡単なサンプルを実装する Dev-Environment OS: Windows8.1 Erlang: Eshell V7.3, OTP-Version 18.3 Elixir: v1.2.3 Using gen_udp ...
  • [Elixir]GenServerの基本を習得する
    Goal GenServerの基本を習得する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minute プロセス...