update show.html template

2 files changed, 52 insertions, 32 deletions

diff --git a/static/main.css b/static/main.css
index 341018a..5dfa186 100644
--- a/static/main.css
+++ b/static/main.css
@@ -7,4 +7,12 @@ body {
     border: none !important;
 }
 
+.comment + .comment{
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 1em;
+}
 
+.date {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/templates/news/show.html b/templates/news/show.html
index 4084450..54a8645 100644
--- a/templates/news/show.html
+++ b/templates/news/show.html
@@ -1,42 +1,54 @@
 {% extends 'layout.html' %}
 
 {% block content %}
-<div class="quickview"/>
-<h2>Détails</h2>
-<ul>
-    <li>Auteur : <a href="{{url_for('view_user', user_id=news.user_id)}}">{{news.user_name}}</a></li>
-    <li>Date : {{news.date|format_date}} </li>
-    <li><a href="#comments">{{"Commentaire"|pluralize(comments|count)}}</a></li>
-</div>
 
-<div class="news"/>
-<h1>{{news.title}}</h1>
+<div class="row">
+  <div class="col-md-8">
+    <h2>{{news.title}}</h2>
+    <p class="new_content">
+      {{news.content_cache|safe}}
+    </p>
+    <hr/>
 
-<div class="news_content">
-{{news.content_cache|safe}}
-</div>
+    <h3 id="comments">Commentaires</h3>
+    {% if not comments %}
+    Pas de commentaires pour l'instant.
+    {% endif %}
+    {% for comment in comments %}
+    <div class="media comment" style="width:100%">
+      <a class="media-left" href="#">
+        <img src="{{ url_for('static', filename='gfx/photo.jpg') }}" alt="pomme">
+      </a>
+      <div class="media-body" style="width:100%">
+        <h4 class="media-heading"><p class="pull-right date">{{comment.date|format_date}}</p>
+        <a href="{{url_for('view_user', user_id=comment.user_id)}}">{{comment.user_name}}</a></h4>
+        {{comment.content_cache|safe}}
+      </div>
+    </div>
+    {% endfor %}
 
-<hr/>
-<h2 id="comments">Commentaires</h2>
-{% if not comments %}
-Pas de commentaires pour l'instant.
-{% endif %}
-{% for comment in comments %}
-<h3 class="comment">
-    Posté par <a href="{{url_for('view_user', user_id=comment.user_id)}}">{{comment.user_name}}</a> le {{comment.date|format_date}}
-</h3>
-<div class="comment_content"/>
-{{comment.content_cache|safe}}
-</div>
-{% endfor %}
 
-<h2 id="add">Ajouter un commentaire</h2>
+    <h3 id="add">Ajouter un commentaire</h3>
 
-<form class="comment_add" method="post" action="{{url_for('show_news', news_id=news.id)}}">
-<textarea name="content" cols="90" rows="10">
-</textarea>
+    <form class="comment_add" role="form" method="post" action="{{url_for('show_news', news_id=news.id)}}">
+      <div class="form-group">
+        <textarea name="content" class="form-control" cols="90" rows="10"></textarea>
+      </div>
+      <button type="submit" class="btn btn-primary">Ajouter</button>
+    </form>
+  </div>
+
+  <div class="col-md-4">
+    <div class="panel panel-default">
+      <div class="panel-heading">Détails</div>
+      <div class="panel-body">
+        <ul class="list-unstyled">
+          <li>Auteur : <a href="{{url_for('view_user', user_id=news.user_id)}}">{{news.user_name}}</a></li>
+          <li>Date : {{news.date|format_date}}</li>
+          <li><a href="#comments">{{"Commentaire"|pluralize(comments|count)}}</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 
-<p class="submit"><input type="submit" value="Ajouter"/></p>
-</div>
-<div style="clear:both"/>
 {% endblock %}