Phoenix: added notejam layout and views for root /

komarserjio#60
williamn · Nov 24, 2015 · 00bda17 · 00bda17
1 parent af1108f
commit 00bda17
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 25 deletions.
diff --git a/phoenix/notejam/web/controllers/notes_controller.ex b/phoenix/notejam/web/controllers/notes_controller.ex
@@ -0,0 +1,7 @@
+defmodule Notejam.NotesController do
+  use Notejam.Web, :controller
+
+  def index(conn, _params) do
+    render conn, "index.html"
+  end
+end
diff --git a/phoenix/notejam/web/router.ex b/phoenix/notejam/web/router.ex
@@ -16,7 +16,7 @@ defmodule Notejam.Router do
   scope "/", Notejam do
     pipe_through :browser # Use the default browser stack
 
-    get "/", PageController, :index
+    get "/", NotesController, :index
   end
 
   # Other scopes may use custom stacks.

diff --git a/phoenix/notejam/web/templates/layout/app.html.eex b/phoenix/notejam/web/templates/layout/app.html.eex
@@ -1,31 +1,66 @@
 <!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="">
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
+<head>
 
-    <title>Hello Phoenix!</title>
-    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
-  </head>
+  <!-- Basic Page Needs
+  ================================================== -->
+  <meta charset="utf-8">
+  <title>Notejam</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
 
-  <body>
-    <div class="container" role="main">
-      <div class="header">
-        <ul class="nav nav-pills pull-right">
-          <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
-        </ul>
-        <span class="logo"></span>
-      </div>
+  <!-- Mobile Specific Metas
+  ================================================== -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <!-- CSS
+  ================================================== -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css">
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/skeleton.min.css">
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/layout.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="<%= static_path(@conn, "/css/style.css") %>">
 
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+</head>
+<body>
+  <div class="container">
+    <div class="sixteen columns">
+      <div class="sign-in-out-block">
+        komarserjio@gmail.com:&nbsp; <a href="#">Account settings</a>&nbsp;&nbsp;&nbsp;<a href="#">Sign out</a>
+      </div>
+    </div>
+    <div class="sixteen columns">
+      <h1 class="bold-header"><a href="#" class="header">note<span class="jam">jam: </span></a> <span>All notes (8)</span></h1>
+    </div>
+    <div class="three columns">
+      <h4 id="logo">My pads</h4>
+      <nav>
+      <ul>
+        <li><a href="#whatAndWhy">Business</a></li>
+        <li><a href="#grid">Personal</a></li>
+        <li><a href="#typography">Sport</a></li>
+        <li><a href="#buttons">Diary</a></li>
+        <li><a href="#forms">Drafts</a></li>
+      </ul>
+      <hr />
+      <a href="#">New pad</a>
+      </nav>
+    </div>
 
-      <%= @inner %>
+    <%= @inner %>
 
-    </div> <!-- /container -->
-    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
-  </body>
+    <hr class="footer" />
+    <div class="footer">
+      <div>Notejam: <strong>Phoenix</strong> application</div>
+      <div><a href="https://github.com/komarserjio/notejam">Github</a>, <a href="https://twitter.com/komarserjio">Twitter</a>, created by <a href="https://github.com/komarserjio/">Serhii Komar</a></div>
+    </div>
+  </div><!-- container -->
+  <a href="https://github.com/komarserjio/notejam"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+</body>
 </html>
diff --git a/phoenix/notejam/web/templates/notes/index.html.eex b/phoenix/notejam/web/templates/notes/index.html.eex
@@ -0,0 +1,50 @@
+<div class="thirteen columns content-area">
+  <table class="notes">
+    <tr>
+      <th class="note">Note <a href="#" class="sort_arrow" >&uarr;</a><a href="#" class="sort_arrow" >&darr;</a></th>
+      <th>Pad</th>
+      <th class="date">Last modified <a href="#" class="sort_arrow" >&uarr;</a><a href="#" class="sort_arrow" >&darr;</a></th>
+    </tr>
+    <tr>
+      <td><a href="#">My sport activites</a></td>
+      <td class="pad">No pad</td>
+      <td class="hidden-text date">Today at 10:51</td>
+    </tr>
+    <tr>
+      <td><a href="#">February reports</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">Yesterday</td>
+    </tr>
+    <tr>
+      <td><a href="#">Budget plan</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">2 days ago</td>
+    </tr>
+    <tr>
+      <td><a href="#">Visit Agenda for all customers</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">02 Feb. 2013</td>
+    </tr>
+    <tr>
+      <td><a href="#">Gifts</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">29 Jan. 2013</td>
+    </tr>
+    <tr>
+      <td><a href="#">Calendar events</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">29 Jan. 2013</td>
+    </tr>
+    <tr>
+      <td><a href="#">TV series</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">01 Dec. 2012</td>
+    </tr>
+    <tr>
+      <td><a href="#">Daily post</a></td>
+      <td class="pad"><a href="#">Pad</a></td>
+      <td class="hidden-text date">28 Nov. 2012</td>
+    </tr>
+  </table>
+  <a href="#" class="button">New note</a>
+</div>
diff --git a/phoenix/notejam/web/views/notes_view.ex b/phoenix/notejam/web/views/notes_view.ex
@@ -0,0 +1,3 @@
+defmodule Notejam.NotesView do
+  use Notejam.Web, :view
+end