feat(blog): use bootstrap CSS styles

jaguililla · May 7, 2015 · 915cfb7 · 915cfb7
1 parent f25caaa
commit 915cfb7
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 51 deletions.
diff --git a/blog/src/main/resources/blog_template.ftl b/blog/src/main/resources/blog_template.ftl
@@ -1,9 +1,20 @@
 <!DOCTYPE html>
-<html>
+
+<html lang="en" class="no-js">
 <head>
-    <title>My Blog</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+
+  <title>My Blog</title>
 </head>
+
 <body>
+<div class="container">
 
 <#if username??>
     Welcome ${username} <a href="/logout">Logout</a> | <a href="/newpost">New Post</a>
@@ -38,6 +49,10 @@
 
     <p>
 </#list>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
 </html>
 
diff --git a/blog/src/main/resources/entry_template.ftl b/blog/src/main/resources/entry_template.ftl
@@ -1,11 +1,19 @@
-<!doctype HTML>
-<html
+<!DOCTYPE html>
+
+<html lang="en" class="no-js">
 <head>
-    <title>
-        Blog Post
-    </title>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+  <title>Blog Post</title>
 </head>
+
 <body>
+<div class="container">
 <#if username??>
     Welcome ${username} <a href="/logout">Logout</a> | <a href="/newpost">New Post</a>
 
@@ -54,6 +62,10 @@ ${post["body"]}
         <input type="submit" value="Submit">
     </form>
 </ul>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
 </html>
 

diff --git a/blog/src/main/resources/error_template.ftl b/blog/src/main/resources/error_template.ftl
@@ -1,12 +1,25 @@
-<!doctype HTML>
-<html>
+<!DOCTYPE html>
+
+<html lang="en" class="no-js">
 <head>
-<title>Internal Error</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+  <title>Internal Error</title>
 </head>
-<body>
 
+<body>
+<div class="container">
 Oops..<br>
 ${error}
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
 </html>
 
diff --git a/blog/src/main/resources/login.ftl b/blog/src/main/resources/login.ftl
@@ -1,16 +1,25 @@
 <!DOCTYPE html>
 
-<html>
-  <head>
-    <title>Login</title>
-    <style type="text/css">
-      .label {text-align: right}
-      .error {color: red}
-    </style>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
-  </head>
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+
+  <title>Login</title>
+
+  <style type="text/css">
+    .label {text-align: right}
+    .error {color: red}
+  </style>
+</head>
 
   <body>
+    <div class="container">
     Need to Create an account? <a href="/signup">Signup</a><p>
     <h2>Login</h2>
     <form method="post">
@@ -35,14 +44,18 @@
           </td>
           <td class="error">
 	    ${login_error}
-            
+
           </td>
         </tr>
 
       </table>
 
       <input type="submit">
     </form>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
   </body>
 
 </html>
diff --git a/blog/src/main/resources/newpost_template.ftl b/blog/src/main/resources/newpost_template.ftl
@@ -1,9 +1,19 @@
-<!doctype HTML>
-<html>
+<!DOCTYPE html>
+
+<html lang="en" class="no-js">
 <head>
-    <title>Create a new post</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+  <title>Create a new post</title>
 </head>
+
 <body>
+<div class="container">
 <#if username??>
     Welcome ${username} <a href="/logout">Logout</a> | <a href="/">Blog Home</a>
 
@@ -24,7 +34,10 @@
 
             <p>
                 <input type="submit" value="Submit">
+</div>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
 </html>
 
diff --git a/blog/src/main/resources/post_not_found.ftl b/blog/src/main/resources/post_not_found.ftl
@@ -1,13 +1,24 @@
-<!doctype HTML>
-<html
+<!DOCTYPE html>
+
+<html lang="en" class="no-js">
 <head>
-<title>
-Post not found
-</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+  <title>Post not found</title>
 </head>
+
 <body>
+<div class="container">
 Sorry, post not found
+</div>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
 </body>
 </html>
 

diff --git a/blog/src/main/resources/signup.ftl b/blog/src/main/resources/signup.ftl
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 
-<html>
-  <head>
-    <title>Sign Up</title>
-    <style type="text/css">
-      .label {text-align: right}
-      .error {color: red}
-    </style>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
-  </head>
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
+
+  <title>Sign Up</title>
+  <style type="text/css">
+    .label {text-align: right}
+    .error {color: red}
+  </style>
+</head>
 
   <body>
+    <div class="container">
     Already a user? <a href="/login">Login</a><p>
     <h2>Signup</h2>
     <form method="post">
@@ -24,7 +32,7 @@
           </td>
           <td class="error">
 	    ${username_error!""}
-            
+
           </td>
         </tr>
 
@@ -37,7 +45,7 @@
           </td>
           <td class="error">
 	    ${password_error!""}
-            
+
           </td>
         </tr>
 
@@ -50,7 +58,7 @@
           </td>
           <td class="error">
 	    ${verify_error!""}
-            
+
           </td>
         </tr>
 
@@ -63,13 +71,17 @@
           </td>
           <td class="error">
 	    ${email_error!""}
-            
+
           </td>
         </tr>
       </table>
 
       <input type="submit">
     </form>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
   </body>
 
 </html>
diff --git a/blog/src/main/resources/welcome.ftl b/blog/src/main/resources/welcome.ftl
@@ -1,17 +1,25 @@
 <!DOCTYPE html>
 
-<html>
-  <head>
-    <title>Welcome</title>
-    <style type="text/css">
-      .label {text-align: right}
-      .error {color: red}
-    </style>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
-  </head>
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"
+    rel="stylesheet" />
 
-  <body>
-    Welcome ${username}
+  <title>Welcome</title>
+  <style type="text/css">
+    .label {text-align: right}
+    .error {color: red}
+  </style>
+</head>
+
+<body>
+  <div class="container">
+  Welcome ${username}
 <p>
 <ul>
 <li><a href="/">Goto Blog Home</a></li>
@@ -21,8 +29,10 @@
 <li>
 <a href="/newpost">Create a New Post</a>
 </li>
+</div>
 
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
   </body>
 
 </html>