Working face gallery app with server rendered page.
This commit is contained in:
James Harton
parent
7ec94ec686
commit
4a3670f676
7 changed files with 3637 additions and 125 deletions
3
assets/.eslintrc.js
Normal file
3
assets/.eslintrc.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
"extends": "standard"
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,12 +7,19 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"phoenix": "file:../deps/phoenix",
|
||||
"phoenix_html": "file:../deps/phoenix_html"
|
||||
"phoenix_html": "file:../deps/phoenix_html",
|
||||
"yarn": "^1.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-brunch": "6.1.1",
|
||||
"brunch": "2.10.9",
|
||||
"clean-css-brunch": "2.10.0",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-plugin-import": "^2.10.0",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"uglify-js-brunch": "2.10.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3603
assets/yarn.lock
Normal file
3603
assets/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,8 @@
|
|||
defmodule FacesWeb.PageController do
|
||||
use FacesWeb, :controller
|
||||
alias Faces.Gallery
|
||||
|
||||
def index(conn, _params) do
|
||||
render conn, "index.html"
|
||||
render(conn, "index.html", people: Gallery.list_people())
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -9,27 +9,19 @@
|
|||
|
||||
<title>Hello Faces!</title>
|
||||
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<nav role="navigation">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<span class="logo"></span>
|
||||
</header>
|
||||
|
||||
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
|
||||
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
|
||||
|
||||
<main role="main">
|
||||
<%= render @view_module, @view_template, assigns %>
|
||||
</main>
|
||||
|
||||
</div> <!-- /container -->
|
||||
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,19 @@
|
|||
<div class="jumbotron">
|
||||
<h2><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h2>
|
||||
<p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-6">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://phoenixframework.org/docs/overview">Guides</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://hexdocs.pm/phoenix">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/phoenixframework/phoenix">Source</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h4>Help</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h1>Face Gallery</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="face-gallery">
|
||||
<%= for person <- @people do %>
|
||||
<div class="col-sm-3 m-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="<%= person.avatar_url %>" alt="<%= person.name %>">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><%= person.name %></h5>
|
||||
<p class="card-text"><%= person.location %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue