留言页面显示改进

app/views/words/_journal_reply.html.erb

@@ -1,6 +1,6 @@
 
 <% id = "journal_reply_ul_" + journal.id.to_s%>
-<ul class="messages-for_user-reply" id = <%= id %> >
+<ul class="messages-for-user-reply" id = <%= id %> >
            <% fetch_user_leaveWord_reply(journal).each do |reply|%>
              <%= render :partial => "words/journal_reply_items", :locals => {:reply => reply, :journal => journal, :m_reply_id => reply.id} %>
 			<% end %>

app/views/words/_journal_reply_items.html.erb

@@ -1,15 +1,14 @@
-<li style="display: block; padding-bottom: 4px;">
+<li>
 	<span class="portrait">
 		<%= image_tag url_to_avatar(reply.user), :class => "avatar-3" %>
 	</span>
 	<div class="body">
 		    <% id = 'project_respond_form_'+ reply.id.to_s %>
-	    <span style="color: green;"><%= link_to reply.user.name, user_path(reply.user) %>:&nbsp;</span>
+	    <span><%= link_to reply.user.name, user_path(reply.user) %>:&nbsp;</span>
-	    <span style="max-width: 80%; word-wrap: break-word;"> <%= reply.notes %></span>
+	    <span class="message-notes"> <%= reply.notes %></span>
 	        <% ids = 'project_respond_form_'+ journal.id.to_s%>
-		
+	    <p style="margin-top: 4px; font-size: 9pt;">
-	    <p style="margin-top: 4px;">
+	    	<span class="time"><%= format_time reply.created_on %></span>
-	    	<span style="color: rgb(172, 174, 177)"><%= format_time reply.created_on %></span>
 	    	<span style="float: right;">
 	    		<%#= toggle_link l(:label_projects_feedback_respond), id, {:focus => 'project_respond'} %>
 	    		<%= link_to l(:label_projects_feedback_respond),'',

app/views/words/_message.html.erb

@@ -1,47 +1,9 @@
-<!-- fq -->
-<style>
-ul.message-for-user {
-	list-style-type: none;
-	margin: 0px;
-    padding: 0px;
-    font-family: 微软雅黑,Verdana,sans-serif,宋体;
-    text-align: left;
-    font-size: 10pt;
-    width: 100%;
 
-}
-
-ul.message-for-user li {
-	margin-left: 20px;
-	border-bottom: 1px dashed rgb(204, 204, 204);
-	margin-bottom: 10px;
-    margin-top: 10px;
-}
-
-.portrait{
-    float: left;
-    width: 40px;
-    padding-top: 3px;
-    margin: 0px;
-    padding: 0px;
-    display: block;
-  }
-.body{
-    float: left;
-    width: 80%;
-    overflow: hidden;
-    font-size: 9pt;
-    margin: 0px 10px;
-    padding: 0px;
-    display: block;
-    margin-left: 20px;
-  }
-</style>
 <% if jour.size >0 %>
 <% remove_allowed = (User.current.id == jour.first.user_id) %>
 <ul class="message-for-user">
 <% for journal in jour%>
-    <li>
+    <li class="outer-message-for-user">
 	    <span class="portrait"><%= image_tag(url_to_avatar(journal.user), :class => "avatar") %></span>
 	    <span class="body">
             <span class="user"><%= link_to journal.user, user_path(journal.user)%></span>
@@ -62,7 +24,7 @@ ul.message-for-user li {
                 %>
 		</span>
 		<div style="clear: both;"></div>
-		<div id=<%= ids %> style="display: none; width: 80%; margin: auto;">
+		<div id=<%= ids %> class="respond-form">
             <%= render :partial => 'words/new_respond', :locals => {:journal => journal, :m_reply_id => journal.id} %>
         </div>
         <div>

public/themes/redpenny-master/stylesheets/application.css

@@ -310,7 +310,7 @@ ul.projects li.root
 	padding:5%; /*项目界面的宽度 */
 	height:25px;
 	background-color:#0ee; /* 项目界面 #eee*/
-	margin:0 0 10px;
+	margin:0 0 0 10px;
 	display:inline-block;
 	width:90%;
 	vertical-align:top;
@@ -2050,13 +2050,78 @@ div.avatar_user{
 	-o-text-overflow: ellipsis;
 }
 
-	.avatar-3{
+/*
-		width: 35px;
+ * *
-		height: 35px;
+ *Designed for message.
-	}
+ */
-	.inner-right{
+li {
-		float: left;
+	list-style-type: none;
-	}
+}
-	.messages-for_user-reply{
+.avatar-3{
-		margin-top: 10px;
+	width: 35px;
-	}
+	height: 35px;
+}
+.inner-right{
+	float: left;
+}
+.messages-for-user-reply{
+	margin-top: 10px;
+	padding-left: 60px;
+}
+
+ul.message-for-user {
+	list-style-type: none;
+	margin: 0px;
+    padding: 0px;
+    font-family: 微软雅黑,Verdana,sans-serif,宋体;
+    text-align: left;
+    font-size: 10pt;
+    width: 100%;
+
+}
+
+ul.message-for-user li.outer-message-for-user {
+	margin-left: 20px;
+	border-bottom: 1px solid  rgb(213, 222, 233);
+	margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.portrait{
+    float: left;
+    width: 40px;
+    padding-top: 3px;
+    margin: 0px;
+    padding: 0px;
+    display: block;
+  }
+  
+span.body{
+    float: left;
+    width: 80%;
+    overflow: hidden;
+    font-size: 9pt;
+    margin: 0px 10px;
+    padding: 0px;
+    display: block;
+    margin-left: 20px;
+  }
+ 
+ span.time{
+ 	color: rgb(172,174,174);
+ }
+ 
+ .message-notes{
+ 	max-width: 80%; 
+ 	word-wrap: break-word;
+ }
+ 
+ul.messages-for-user-reply li {
+	padding-bottom: 4px;
+}
+
+.respond-form{
+	display: none; 
+	width: 80%; 
+	margin: auto;
+}