デザインの問題を改善

* bootstrap+jqueryを使用 * テンプレートのincludeを使用 * テンプレートの書き換えを実施
denzow · Sep 17, 2016 · 57a4133 · 57a4133
1 parent 24b42ef
commit 57a4133
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/todo.md b/todo.md
@@ -4,5 +4,5 @@
 * 他の人の発言取得にリロードが必要
 * ~~入室処理を行なっていないアクセスの排除~~
 * CSVファイルでの永続化がパフォーマンス等に課題
-* デザインがださい
+* ~~デザインがださい~~
 
diff --git a/views/chat_room.html b/views/chat_room.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>チャットルーム</title>
+     % include("library.html")
     <style>
         .chat_area {
             overflow:auto;
@@ -17,23 +18,27 @@
 </head>
 <body>
 
-<h2>ChatApp</h2>
+<div class="container">
+    <h2>ChatApp</h2>
 
-<div id="chart_area" class="chat_area">
-    % for talk in talk_list:
-        % if talk["username"] == username:
-            <div class="talk" style="text-align:right;" title='{{ talk["talk_time"] }}'>{{ talk["username"] }}:{{ talk["chat_data"] }}</div>
-        % else:
-            <div class="talk" title='{{ talk["talk_time"] }}'>{{ talk["username"] }}:{{ talk["chat_data"] }}</div>
+    <div id="chart_area" class="chat_area row col-md-12">
+        % for talk in talk_list:
+            <div class="row">
+            % if talk["username"] == username:
+                <div class="talk alert alert-info pull-right" title='{{ talk["talk_time"] }}'>{{ talk["username"] }}:{{ talk["chat_data"] }}</div>
+            % else:
+                <div class="talk alert alert-success pull-left" title='{{ talk["talk_time"] }}'>{{ talk["username"] }}:{{ talk["chat_data"] }}</div>
+            % end
+            </div>
         % end
-    % end
-</div>
-<div id="input_area">
-    <form method="POST" action="/talk">
-        {{ username }} <input type="text" name="chat" /><input type="submit" value="送信" />
-    </form>
-</div>
+    </div>
 
+    <div id="input_area" class="row col-md-12">
+        <form method="POST" action="/talk">
+            {{ username }} <input type="text" name="chat" /><input type="submit" value="送信" />
+        </form>
+    </div>
+</div>
 
 </body>
 </html>
diff --git a/views/index.html b/views/index.html
@@ -3,17 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <title>ChatApp</title>
+    % include("library.html")
 </head>
 <body>
+<div class="container">
+    <h1>Welcome to ChatApp</h1>
 
-<h1>Welcome to ChatApp</h1>
-
-
-<form name="login_form" method="POST" action="/enter">
-    <input type="text" name="username" placeholder="ユーザ名" required /><br/>
-    <input type="submit" value="入室" />
-</form>
 
+    <form name="login_form" method="POST" action="/enter">
+        <input type="text" name="username" placeholder="ユーザ名" required /><br/>
+        <input type="submit" value="入室" />
+    </form>
 
+</div>
 </body>
 </html>
diff --git a/views/library.html b/views/library.html
@@ -0,0 +1,11 @@
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+