update article page

gothack329 · Feb 26, 2018 · 5a76941 · 5a76941
1 parent d16073d
commit 5a76941
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 25 deletions.
diff --git a/article/__pycache__/views.cpython-36.pyc b/article/__pycache__/views.cpython-36.pyc
diff --git a/article/templates/article/.detail.html.swp b/article/templates/article/.detail.html.swp
diff --git a/article/templates/article/detail.html b/article/templates/article/detail.html
@@ -16,29 +16,31 @@ <h1>{% if art %}{{art.title}}{% endif %} </h1>
 
 
 {% block content %}
-<div class="card margintop">
+<div class="card margintop article-content">
 	<span class="fad">作者：<a href="#"><img src="/static/{{art.author_id.avatar}}" class="avatar-img">&nbsp;{{art.author}}</a> </span>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <span class="fad">发表于：{{art.publish_time}}</span>
 	<span class="sep margintop"></span>
-	<span class="ad1"> </span>
-    {{art.detail|safe}}
+	<div class="ad1"> <h3>广告位</h3> </div>
+    {{art.detail|safe|escape }}
 </div>
 
 <div class="card">
+		<p>评论</p>
 	<span class="sep"></span>
 	{% for i in comments %}
     <div class="comment row">
-        <div class="comment-avatar" style="margin-top:20px;background:url(/static/{{i.user.avatar}}) no-repeat;background-position:center;background-size:cover;">
-			<p>{{i.user.username}}</p>
+        <div class="comment-avatar" style="background:url(/static/{{i.user.avatar}}) no-repeat;background-position:10px 20px;background-size:60px 60px;">
+		{{i.user}}
         </div>
         <div class="comment-info">
-			<p></p>
-          	{{i.comment|safe}}
-          	<span class="glyphicon glyphicon-time fad"> </span>&nbsp;<span class="fad">{{i.publish_time}}</span>  
+          	<span class="glyphicon glyphicon-time fad"> </span>&nbsp;<span class="fad">{{i.comment_time}}</span>  
+			<span class="pull-right fad floor"> # {{forloop.counter}}</span>
           	<span class="pull-right">
-   		  		<a href="#"><span class="glyphicon glyphicon-reply fad"></span></a> &nbsp; <span class="fad">#{{forloop.counter}}</span>
+					<a href="#"><img style="inline-block" src="/static/image/reply.png" align="absmiddle" border="0" alt="Reply"></a>
           	</span>
+			<p></p>
+          	{{i.comment|safe|escape}}
        </div>
     </div>
 	<span class="sep"></span>
@@ -48,7 +50,7 @@ <h1>{% if art %}{{art.title}}{% endif %} </h1>
 <div class="card">
     <form method="post">
     	{% csrf_token %}
-    	{{ comment_form.as_p }}
+    	{{ comment_form.comment }}
     	<button class="btn btn-default pull-right" type="submit">发表</button>
     </form>
 

diff --git a/article/views.py b/article/views.py
@@ -25,7 +25,9 @@ def detail(request, article_id):
     else:
         comment_form = CommentForm(instance=None)
 
-    return render(request,'article/detail.html',{'art':art,'comments':comments,'comment_form':comment_form})
+    secs = Section.objects.all()
+
+    return render(request,'article/detail.html',{'art':art,'comments':comments,'comment_form':comment_form,'secs':secs})
     #return HttpResponse("You're looking at article %s." % article_id)
 
 

diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/static/bootstrap/css/style.css b/static/bootstrap/css/style.css
@@ -106,6 +106,10 @@ div.container-fluid {
 	height:130px;
 }
 
+.pull-right {
+	padding:0 10px 0 10px;
+}
+
 .fad {
 	color:gray;
 }
@@ -116,6 +120,61 @@ div.container-fluid {
 	border-bottom:1px solid #e2e2e2; 
 }
 
+.article-content {
+	padding-bottom:30px;
+}
+
+.card .comment {
+}
+
+.card .comment div {
+    display: inline-block;
+	margin:10px;
+	float:left;
+}
+
+.card .comment .comment-avatar {
+	margin:10px 0 0 20px;
+	width:80px;
+	height:100px;
+	text-align:center;
+}
+
+.card .comment .comment-info {
+	width:80%;
+	float:right;
+	padding-right:20px;
+}
+
+span.floor {
+	background-color:#f6f8fa;
+}
+
+.ad1 {
+	height:100px;
+	background-color:gray;
+	text-align:center;
+	padding-top:15px;
+	color: white;
+	margin:10px 0 20px 0;
+}
+
+.ad2 {
+	height:250px;
+	background-color:gray;
+	text-align:center;
+	padding-top:100px;
+	color: white;
+}
+
+
+
+
+
+
+
+
+
 
 
 

diff --git a/static/image/reply.png b/static/image/reply.png
diff --git a/templates/base.html b/templates/base.html
@@ -94,7 +94,7 @@ <h1>{% if title %}{{title}}{% endif %} </h1>
 
 					<div class="sidebar col-md-4">
 					{% block sidebar %}
-					
+
 					        <div class="card">
 					                <h4>分类</h4>
 					                <span class="sep"></span>
@@ -103,6 +103,10 @@ <h4>分类</h4>
 					                        <span class="sep"></span>
 					                {% endfor %}
 					        </div>
+
+					        <div class="card ad2">
+					                <h4>广告位</h4>
+					        </div>
 
 					{% endblock %}
 				</div>

diff --git a/templates/index.html b/templates/index.html
@@ -19,7 +19,8 @@ <h1>{% if title %}{{title}}{% endif %} </h1>
 			</div>
 			<div class="preview-info">
 				<h2>{{i.title}}</h2>
-				<p class="fad">{{i.detail|truncatewords:"30"|striptags}}</p>
+				<p class="fad">{{i.detail|striptags|truncatechars:140|safe}} </p>
+				<p></p>
 				<span class="glyphicon glyphicon-time fad"> </span>&nbsp;<span class="fad">{{i.publish_time}}</span>  
 				&nbsp;&nbsp;&nbsp;
 				<span class="glyphicon glyphicon-user fad"> </span>&nbsp;<span class="fad">{{i.author}}</span>
@@ -34,15 +35,3 @@ <h2>{{i.title}}</h2>
 
 {% endblock %}
 
-{% block sidebar %}
-
-	<div class="card">
-		<h4>分类</h4>
-		<span class="sep"></span>
-		{% for i in secs %}
-			<p><a href="/?catalog={{i.name}}">{{i.name}}</a></p>
-			<span class="sep"></span>
-		{% endfor %}
-	</div>
-
-{% endblock %}