5 - navigation bar

加上 navbar

#web/templates/layout/navbar.html.eex
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Shopping Site</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
          <%= link "Product" , to: admin_product_path(@conn, :index)%>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">

        <%= if !@conn.assigns.current_user do %>
          <li> <%= link "Log In" , to: session_path(@conn, :new) %></li>
          <li> <%= link "Register" , to: user_path(@conn, :new) %></li>
        <% else %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Hi!, <%= @conn.assigns.current_user.username %>
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= button "Log out", to: session_path(@conn, :delete, 
                     @conn.assigns.current_user), method: "delete"%></li>
            </ul>
          </li>
        <% end %>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

app.html.eex 加入 navbar

#web/templates/layout/app.html.eex
<body>
    <div class="container">
      <%= render "navbar.html", conn: @conn%>
      .....

這時候bootstrap dropdown沒有效果，要做一點修正

#brunch.js
exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.scss"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  ...
  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    },

    sass: {
      options: {
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"], 
      },
      precision: 8
    },
    copycat: {
      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] 
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": [
        //"bootstrap-sass",
        "web/static/js/app"
      ]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery"],
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap-sass' // require bootstrap-sass' JavaScript globally
    }
  }
};

web/static/css/app.css -> web/static/css/app.scss

修改 scss的內容

#web/static/css/app.scss
$icon-font-path: "/fonts/";
@import "bootstrap";

輸入指令：

npm install --save-dev babel-preset-es2015
rm -rf node_modules
npm install


最後 引進 bootstrap dropdown
(dropdwon要特別引入，因為 javascript的寫法的關係，沒特別研究)

#web/static/js/app.js
...
$(document).off('click.bs.dropdown.data-api', '.dropdown form');

另外這邊的 css 樣式也有點怪，尚未找到解法，上一篇是先用 button鑲嵌進 dropdwon menu，現在換回 link

#web/templates/layout/navbar.html.eex
<ul class="dropdown-menu">
  <li><%= link "Log out", to: session_path(@conn, :delete, @conn.assigns.current_user), method: :delete %></li>
</ul>

效果會是這樣

最後將 phoenix 的內建樣式拿掉

#web/templates/layout/app.html.eex
<body>
  <div class="container">
    <%= render "navbar.html", conn: @conn %>

    <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
    <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
    ...

還有把 web/templates/page/index.html.eex 全部 comment掉

results matching ""

    No results matching ""