fixed problem with small screens

Evandro Jr
1 parent 89cdcf2b
Showing 2 changed files with 82 additions and 54 deletions Show diff stats
plugins/comment_paragraph/public/style.css
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -81,8 +81,6 @@ div.article-comments-list-more{
 .side-comment .comment_title{display: none;}
 .side-comment label[for="comment_title"] {display: none;}
-
-
 div[class^='comments_list_toggle_paragraph_'] {
  border-style: solid;
  border-width: 1px;
@@ -93,9 +91,10 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
 }
 div[class^='comment-paragraph-loading-'] {
- background-color: whitesmoke;
+ position: relative;
+ left: 470px;
+ background-color: pink;
  z-index: 99;
- right: -230px;
 }
 #content .side-comment .comment-balloon div[class^='comment-wrapper-']{
@@ -146,9 +145,6 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 .comment-replies .comment-from-owner.comment-content {background: none;}
-
-
-
 .side-comment .comment-balloon-content {
   margin: 0;
 }
@@ -210,4 +206,40 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 .side-comment .comment-count {
   bg-color: #b3b2d4;
+}
+
+.comment-paragraph-rowset{
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  justify-content: space-around;
+
+}
+
+.comment_paragraph{
+  position: relative;
+  left: -20px;
+  width: 450px;
+  font-weight: bold;
+  text-align: justify;
+}
+
+.comment-paragraph-comments{
+  background: lightblue;
+  padding: 5px;
+  width: 150px;
+  margin-top: 10px;
+  line-height: 30px;
+  color: white;
+  font-weight: bold;
+  font-size: 1em;
+  text-align: center;
 }
 \ No newline at end of file
-<div class="comments">
-  <table border="0">
-    <tr>
-      <td width="90%">
-        <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
-          <%= inner_html %>
-        </div>
-      </td>
-      <td>
-        <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-          <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-            <%= count %>
-          </span>
-        </div>
-      </td>
-      <td valign="top">
-        <div align="center">
-          <%=
-            url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
-            link_to_remote(
-            '',
-            {
-              :url => url,
-              :method => :post,
-              :condition => "!toggleParagraph(#{paragraph_id})",
-              :complete => "loadCompleted(#{paragraph_id})"
-            },
-            {
-              :id => "link_to_ajax_comments_#{paragraph_id}",
-              :'data-url' => url_for(url)  
-            }
-          )%>
-        </div>
-          <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
-            <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
-              <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
-                <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
-                <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
-                <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
-                  <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
-                </div>
-              </div>
-            </div>
-          </div>  
-      </td>
-    </tr>
-  </table>
+<ul class="comments comment-paragraph-rowset">
+  <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
+    <%= inner_html %>
+  </li>
+
+  <li  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
+    <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+      <%= count %>
+    </span>
+  </li>
+  
+  <div align="center">
+     <%=
+       url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
+       link_to_remote(
+       '',
+       {
+         :url => url,
+         :method => :post,
+         :condition => "!toggleParagraph(#{paragraph_id})",
+         :complete => "loadCompleted(#{paragraph_id})"
+       },
+       {
+         :id => "link_to_ajax_comments_#{paragraph_id}",
+         :'data-url' => url_for(url)
+       }
+     )%>
+   </div>
+  
+   <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
+     <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
+       <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
+         <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
+         <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
+         <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
+           <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
+         </div>
+       </div>
+     </div>
+   </div>
+ </ul>
+
+
	@@ -81,8 +81,6 @@ div.article-comments-list-more{		@@ -81,8 +81,6 @@ div.article-comments-list-more{
81	.side-comment .comment_title{display: none;}	81	.side-comment .comment_title{display: none;}
82	.side-comment label[for="comment_title"] {display: none;}	82	.side-comment label[for="comment_title"] {display: none;}
83		83
84	-
85	-
86	div[class^='comments_list_toggle_paragraph_'] {	84	div[class^='comments_list_toggle_paragraph_'] {
87	border-style: solid;	85	border-style: solid;
88	border-width: 1px;	86	border-width: 1px;
	@@ -93,9 +91,10 @@ div[class^='comments_list_toggle_paragraph_'] {		@@ -93,9 +91,10 @@ div[class^='comments_list_toggle_paragraph_'] {
93	}	91	}
94		92
95	div[class^='comment-paragraph-loading-'] {	93	div[class^='comment-paragraph-loading-'] {
96	- background-color: whitesmoke;	94	+ position: relative;
		95	+ left: 470px;
		96	+ background-color: pink;
97	z-index: 99;	97	z-index: 99;
98	- right: -230px;
99	}	98	}
100		99
101	#content .side-comment .comment-balloon div[class^='comment-wrapper-']{	100	#content .side-comment .comment-balloon div[class^='comment-wrapper-']{
	@@ -146,9 +145,6 @@ div[class^='comment-paragraph-loading-'] {		@@ -146,9 +145,6 @@ div[class^='comment-paragraph-loading-'] {
146		145
147	.comment-replies .comment-from-owner.comment-content {background: none;}	146	.comment-replies .comment-from-owner.comment-content {background: none;}
148		147
149	-
150	-
151	-
152	.side-comment .comment-balloon-content {	148	.side-comment .comment-balloon-content {
153	margin: 0;	149	margin: 0;
154	}	150	}
	@@ -210,4 +206,40 @@ div[class^='comment-paragraph-loading-'] {		@@ -210,4 +206,40 @@ div[class^='comment-paragraph-loading-'] {
210		206
211	.side-comment .comment-count {	207	.side-comment .comment-count {
212	bg-color: #b3b2d4;	208	bg-color: #b3b2d4;
		209	+}
		210	+
		211	+.comment-paragraph-rowset{
		212	+ padding: 0;
		213	+ margin: 0;
		214	+ list-style: none;
		215	+
		216	+ display: -webkit-box;
		217	+ display: -moz-box;
		218	+ display: -ms-flexbox;
		219	+ display: -webkit-flex;
		220	+ display: flex;
		221	+
		222	+ -webkit-flex-flow: row wrap;
		223	+ justify-content: space-around;
		224	+
		225	+}
		226	+
		227	+.comment_paragraph{
		228	+ position: relative;
		229	+ left: -20px;
		230	+ width: 450px;
		231	+ font-weight: bold;
		232	+ text-align: justify;
		233	+}
		234	+
		235	+.comment-paragraph-comments{
		236	+ background: lightblue;
		237	+ padding: 5px;
		238	+ width: 150px;
		239	+ margin-top: 10px;
		240	+ line-height: 30px;
		241	+ color: white;
		242	+ font-weight: bold;
		243	+ font-size: 1em;
		244	+ text-align: center;
213	}	245	}
214	\ No newline at end of file	246	\ No newline at end of file
1	-<div class="comments">
2	- <table border="0">
3	- <tr>
4	- <td width="90%">
5	- <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
6	- <%= inner_html %>
7	- </div>
8	- </td>
9	- <td>
10	- <div align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
11	- <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
12	- <%= count %>
13	- </span>
14	- </div>
15	- </td>
16	- <td valign="top">
17	- <div align="center">
18	- <%=
19	- url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
20	- link_to_remote(
21	- '',
22	- {
23	- :url => url,
24	- :method => :post,
25	- :condition => "!toggleParagraph(#{paragraph_id})",
26	- :complete => "loadCompleted(#{paragraph_id})"
27	- },
28	- {
29	- :id => "link_to_ajax_comments_#{paragraph_id}",
30	- :'data-url' => url_for(url)
31	- }
32	- )%>
33	- </div>
34	- <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
35	- <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
36	- <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
37	- <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
38	- <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
39	- <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
40	- <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
41	- </div>
42	- </div>
43	- </div>
44	- </div>
45	- </td>
46	- </tr>
47	- </table>	1	+<ul class="comments comment-paragraph-rowset">
		2	+ <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
		3	+ <%= inner_html %>
		4	+ </li>
		5	+
		6	+ <li align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
		7	+ <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
		8	+ <%= count %>
		9	+ </span>
		10	+ </li>
		11	+
		12	+ <div align="center">
		13	+ <%=
		14	+ url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
		15	+ link_to_remote(
		16	+ '',
		17	+ {
		18	+ :url => url,
		19	+ :method => :post,
		20	+ :condition => "!toggleParagraph(#{paragraph_id})",
		21	+ :complete => "loadCompleted(#{paragraph_id})"
		22	+ },
		23	+ {
		24	+ :id => "link_to_ajax_comments_#{paragraph_id}",
		25	+ :'data-url' => url_for(url)
		26	+ }
		27	+ )%>
		28	+ </div>
		29	+
		30	+ <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
		31	+ <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
		32	+ <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
		33	+ <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
		34	+ <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
		35	+ <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
		36	+ <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
		37	+ </div>
		38	+ </div>
		39	+ </div>
		40	+ </div>
		41	+ </ul>
		42	+
		43	+