Nicer design using Twitter Bootstrap

sebnozzi · Aug 26, 2013 · a2d35e6 · a2d35e6
1 parent 0dd21c7
commit a2d35e6
Show file tree

Hide file tree

Showing 17 changed files with 9,634 additions and 27 deletions.
diff --git a/app/views/login.scala.html b/app/views/login.scala.html
@@ -5,7 +5,7 @@ <h1>Log In</h1>
 
   @helper.form(action = routes.Application.logIn){
     @if(userForm("username").hasErrors){
-      <div><span class="error">@userForm("username").error.get.message</span></div>
+      <div class="alert alert-error">@userForm("username").error.get.message</div>
     }
     <div>
       <input type="text" name="username" value="@userForm("username").value"/>

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -3,14 +3,18 @@
 <!DOCTYPE html>
 
 <html>
-    <head>
-        <title>@title</title>
-        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
-        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
-        <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
-    </head>
-    <body>
-        @menu(loggedInUser)
-        @content
-    </body>
+  <head>
+      <title>@title</title>
+      <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
+      <link href="@routes.Assets.at("bootstrap/css/bootstrap.min.css")" rel="stylesheet" media="screen">
+      <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
+      <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
+      <script src="@routes.Assets.at("bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="container">
+      @menu(loggedInUser)
+      @content
+    </div>
+  </body>
 </html>
diff --git a/app/views/menu.scala.html b/app/views/menu.scala.html
@@ -1,11 +1,23 @@
 @(loggedInUser: Option[User])
 
-<ul>
+<ul class="nav nav-tabs">  
   @if(loggedInUser.isDefined) {
-    <li>logged in as <strong>@loggedInUser.get.username</strong></li>
-    <li><a href="@routes.Application.doLogOut()">log out</a></li>
+    <li>
+      <a href="@routes.UserActions.posts(loggedInUser.get.id)">
+        [ <strong>@loggedInUser.get.username</strong> ]
+      </a>
+    </li>
+  }
+
+  <li><a href="@routes.UserActions.index()">Users</a></li>
+
+  @if(loggedInUser.isDefined) {
+    <li>
+      <a href="@routes.Application.doLogOut()">
+       Log out
+      </a>
+    </li>
   } else {
-    <li><a href="@routes.Application.logIn()">log in</a></li>
+    <li><a href="@routes.Application.logIn()">Log in</a></li>
   }
-  <li><a href="@routes.UserActions.index()">users</a></li>
 </ul>
diff --git a/app/views/users/index.scala.html b/app/views/users/index.scala.html
@@ -3,7 +3,7 @@
 @main("Users", loggedInUser) {
 
     <h1>Users</h1>
-    <ul>
+    <ul class="nav nav-tabs nav-stacked">
       @for(u <- users){
         <li><a href="@routes.UserActions.posts(u.id)">@u.username</a></li>
       }

diff --git a/app/views/users/posts.scala.html b/app/views/users/posts.scala.html
@@ -9,7 +9,7 @@ <h1>Posts of @user.username</h1>
       @helper.form(action = routes.UserActions.addPost(user.id) ) {
         <div>
             @if(postForm("post").hasErrors){
-              <div><span class="error">@postForm("post").error.get.message</span></div>
+              <div class="alert alert-error">@postForm("post").error.get.message</div>
             }
           <textarea name="post" cols="40" rows="3"></textarea>
         </div>
@@ -21,7 +21,11 @@ <h1>Posts of @user.username</h1>
 
     <ul class="posts">
       @for(p <- posts){
-        <li class="post">@p.prettyTime &mdash; @p.text</li>
+        <li class="post">
+          <div class="well">
+            <p>@p.text</p>
+            <p class="timestamp">&mdash; @p.prettyTime</p></div>
+        </li>
       }
     </ul>