pairwise: css added and fix text labels

Victor Costa
1 parent c584cf3a
Showing 3 changed files with 203 additions and 38 deletions Show diff stats
plugins/pairwise/public/style.css
plugins/pairwise/views/content_viewer/_prompt_body.html.erb
plugins/pairwise/views/pairwise_plugin_profile/_suggestion_form.html.erb
+.action-home-index div.pairwise_main .spinner {
+  width: 94%;
+}
+
+.pairwise-plugin_pairwise-content #article-header .title {
+  display: none;
+}
+
+#pairwise_main {
+	text-align: center;
+	width: auto;
+}
+
+#pairwise_main ul.pairwise_menu {
+	background-color: white;
+	color: #ECF2E7;
+	text-align: right;
+}
+
+#pairwise_main ul.pairwise_menu li {
+	display: inline;
+}
+
+#pairwise_main ul.pairwise_menu li a {
+    color: #b3c4a6;
+    font-size: 14px;
+    padding: 1em;
+    text-decoration: none;
+}
+
+#pairwise_main ul.pairwise_menu li a:hover{
+	color: #497B16;
+	background-color: #ECF2E7;
+	border-radius: 10px 10px 0 0;
+	border: 1px solid #b3c4a6;
+	border-bottom: 0px;
+	margin: -1px;
+}
+
+#pairwise_main ul.pairwise_menu li a.active{
+    color: #497B16;
+    background-color: #ECF2E7;
+    border-radius: 10px 10px 0 0;
+    border: 1px solid #b3c4a6;
+    border-bottom: 0px;
+}
+
+#pairwise_main .pairwise_content {
+    background-color: #ECF2E7;
+    padding: 1em;
+    overflow: hidden;
+}
+
+#pairwise_main .pairwise_body {
+    background-color: white;
+    border-radius: 7px 7px 7px 7px;
+    display: block;
+    font-size: 22px;
+    margin: 0 0 0.5em;
+    padding: 1em;
+}
+
+#pairwise_main .pairwise_call_for_action {
+    color: #4B7421;
+    font-size: 14px;
+	 line-height: 1.5em;
+}
+
+#pairwise_main .prompt {
+	background: url("images/prompt_bg_normal.png") no-repeat center top #cfe1bf;
+	border-width: 0px;
+  max-width: 369px;
+  height: 170px !important;
+  padding: 10px 0;
+	border-width: 0 !important;
+	border-radius: 10px;
+}
+
+#pairwise_main .prompt:hover {
+	background: url("images/prompt_bg_hover.png") no-repeat 50% top #548A1C;
+}
+
+#pairwise_main .prompt.left{
+	background-position: 51% top;
+	float: left;
+}
+
+#pairwise_main .prompt.right{
+	background-position: 50% top;
+	float: right;
+}
+
+#pairwise_main .prompt a{
+	color: #2a2d28 !important;
+	font-size: 12px;
+	display: block;
+	max-width: 349px;
+	padding: 10px;
+  height: 100%;
+}
+
+#pairwise_main .separator {
+    background-color: #CCCCCC;
+    display: inline-block;
+    float: none;
+    height: 170px;
+    margin-top: 8px;
+    width: 1px;
+}
+
+
+#pairwise_main .skip_vote {
+	width: 200px !important;
+	text-align: center;
+	padding: 0;
+	border-width: 0px;
+	background-color: transparent !important;
+}
+
+#pairwise_main .skip_vote a {
+	 display: inline-block;
+   height: 1px;
+   line-height: 0;
+   padding: 1em 0;
+   text-decoration: none;
+   width: 200px;
+}
+
+#pairwise_main .skip_vote_reasons {background-color: #7D8874;padding-top: 0 !important;}
+
+#pairwise_main .skip_vote_reasons ul {margin: 0; padding: 1em;}
+
+#pairwise_main .skip_vote_reasons ul li {color: white; padding: 0.5em 0.5em 0.5em 2em; text-align: left;}
+
+#pairwise_main .skip_vote_reasons ul li:hover{background-color:#666;}
+
+#pairwise_main .skip_vote_reasons ul li a {color: white;text-decoration: none;font-size: 14px;}
+
+#pairwise_main #suggestions_box {
+	display: block !important;
+   margin-top: 15px;
+   padding: 10px;
+	text-align: left;
+}
+
+#pairwise_main #suggestions_box span {
+    color: #4B7421;
+    font-size: 15px;
+    font-weight: bold;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+#pairwise_main .suggestion_form {}
+
+#pairwise_main #suggestion_box_fields {}
+
+#pairwise_main .div_text_input_container {width: 100%;}
+
+#pairwise_main .div_text_input_container .div_text_input {
+    display: inline-block;
+    width: 80%;
+}
+
+#pairwise_main .div_text_input_container .div_text_input textarea {
+	 border: 1px solid #CCCCCC;
+    border-radius: 0 0 0 0 !important;
+}
+
+#pairwise_main .div_text_input_container .div_text_input .jqEasyCounterMsg {color: #7D8874 !important;font-size: 13px;}
+
+#pairwise_main .div_text_input_container .suggest_idea_btn {
+    display: inline-block;
+    margin-left: 5%;
+    vertical-align: top;
+    width: 14%;
+}
+
+#pairwise_main .div_text_input_container .suggest_idea_btn input#new_idea_button{
+    background: url("images/botao-enviar-pairwise.png") no-repeat top center transparent;
+    border-radius: 0px;
+    cursor: pointer;
+    display: block;
+    min-height: 71px;
+    padding: 5px 10px;
+    width: 93px;
+    border-width: 0;
+}
+
+div.pairwise_group_list_container .arrow span.active {
+	background-position: center top;
+}
+/* */
+
+
 div#pairwise_form_fields textarea {
 	width: 100%;
 	margin-top: 5px;
@@ -42,13 +237,6 @@ div#pairwise_form_fields textarea {
 #pairwise_main div#suggestions_box {
-	/*border: 1px solid;
-	border-radius: 7px;
-    -webkit-border-radius: 7px;
-    -moz-border-radius: 7px;
-    border-color: #ccc;
-	border-width: 1px;
-	border-style: solid;*/
 	padding: 10px;
 	margin-top: 15px;
 }
@@ -77,12 +265,14 @@ div#pairwise_form_fields textarea {
 }
 #pairwise_main div#suggestions_box  #new_idea_button{
-	background-color: #01bb00;
+	background-color: #DDD;
 	padding: 5px 10px 5px 10px;
 	cursor: pointer;
 	border-radius: 5px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  font-size: 16pt;
+  color: rgb(133, 133, 151);
 }
 #pairwise_main div#suggestions_box  div.suggestion_header {
@@ -141,7 +331,6 @@ div#pairwise_form_fields textarea {
 #pairwise_main  div.skip_vote {
 	width: 150px;
 	float:none;
-	color:white;
 	min-height: 18px;
 	height:auto;
 	padding: 0.5em;
@@ -171,7 +360,6 @@ div#pairwise_form_fields textarea {
 	margin-bottom: 15px;
 	padding-left: 5px;
 	padding-right: 5px;
-	/*float:left;*/
 	float:left;
 	background-color:#ccc;
 	height: 3em;
@@ -187,12 +375,8 @@ div#pairwise_form_fields textarea {
 	border-color:#CCCCCC;
 }
-#pairwise_main div.skip_vote_reasons div:nth-child(even) {
-	/*margin-left: 10px;*/
-}
-
 #pairwise_main  div.skip_vote a{
-	color: white;
+	color: rgb(219, 162, 42);
 	text-decoration: none;
 	width: 100%;
 }
@@ -285,25 +469,6 @@ div.pairwise_group_list_container .arrow{
 	right: 20px;
 	margin-top: 10px;
 }
-/*
-div.pairwise_group_list_container .arrow{
-	display: inline-block;
-    position: absolute;
-	right: 20px;
-	margin-top: 10px;
-	height: 22px;
-	width:23px;
-	color: #2F5707;
-	background: url('/designs/themes/participa-theme/images/arrow_right.jpg') no-repeat center;
-}
-
-div.pairwise_group_list_container .arrow.active{
-	height: 18px;
-    margin-top: 10px;
-    right: 20px;
-    width: 22px;
-	background: url('/designs/themes/participa-theme/images/arrow_down.jpg') no-repeat center;
-}*/
 div.pairwise_group_list_container .row.secondary .arrow span {
 	background: url('/designs/themes/participa-theme/images/arrow_right.jpg') no-repeat center;
@@ -21,7 +21,7 @@
 	<% if pairwise_content.allow_new_ideas? %>
     <% if user %>
       <div id="suggestions_box">
-        <span>Gostaria de sugerir uma ideia?</span>
+        <span><%= _('Would you like to suggest an idea?') %> </span>
         <div class="suggestion_form">
         <%= render :partial => "pairwise_plugin_profile/suggestion_form",
             :locals => {:pairwise_content => pairwise_content, :embeded => embeded, :source => source} %>
@@ -12,7 +12,7 @@
 			    <%= text_area :idea, :text, :maxlenght => 160, :rows => 4, :placeholder => _('Type your idea here') %>
 	    	</div> 
 	    	<div class="suggest_idea_btn">
-			    <%= submit_button('', '', :id => 'new_idea_button', :class => user ? '':'require-login-popup') %>
+			    <%= submit_button('', _("Send"), :id => 'new_idea_button', :class => user ? '':'require-login-popup') %>
 			</div>
 		</div>
 	  </div>
		1	+.action-home-index div.pairwise_main .spinner {
		2	+ width: 94%;
		3	+}
		4	+
		5	+.pairwise-plugin_pairwise-content #article-header .title {
		6	+ display: none;
		7	+}
		8	+
		9	+#pairwise_main {
		10	+ text-align: center;
		11	+ width: auto;
		12	+}
		13	+
		14	+#pairwise_main ul.pairwise_menu {
		15	+ background-color: white;
		16	+ color: #ECF2E7;
		17	+ text-align: right;
		18	+}
		19	+
		20	+#pairwise_main ul.pairwise_menu li {
		21	+ display: inline;
		22	+}
		23	+
		24	+#pairwise_main ul.pairwise_menu li a {
		25	+ color: #b3c4a6;
		26	+ font-size: 14px;
		27	+ padding: 1em;
		28	+ text-decoration: none;
		29	+}
		30	+
		31	+#pairwise_main ul.pairwise_menu li a:hover{
		32	+ color: #497B16;
		33	+ background-color: #ECF2E7;
		34	+ border-radius: 10px 10px 0 0;
		35	+ border: 1px solid #b3c4a6;
		36	+ border-bottom: 0px;
		37	+ margin: -1px;
		38	+}
		39	+
		40	+#pairwise_main ul.pairwise_menu li a.active{
		41	+ color: #497B16;
		42	+ background-color: #ECF2E7;
		43	+ border-radius: 10px 10px 0 0;
		44	+ border: 1px solid #b3c4a6;
		45	+ border-bottom: 0px;
		46	+}
		47	+
		48	+#pairwise_main .pairwise_content {
		49	+ background-color: #ECF2E7;
		50	+ padding: 1em;
		51	+ overflow: hidden;
		52	+}
		53	+
		54	+#pairwise_main .pairwise_body {
		55	+ background-color: white;
		56	+ border-radius: 7px 7px 7px 7px;
		57	+ display: block;
		58	+ font-size: 22px;
		59	+ margin: 0 0 0.5em;
		60	+ padding: 1em;
		61	+}
		62	+
		63	+#pairwise_main .pairwise_call_for_action {
		64	+ color: #4B7421;
		65	+ font-size: 14px;
		66	+ line-height: 1.5em;
		67	+}
		68	+
		69	+#pairwise_main .prompt {
		70	+ background: url("images/prompt_bg_normal.png") no-repeat center top #cfe1bf;
		71	+ border-width: 0px;
		72	+ max-width: 369px;
		73	+ height: 170px !important;
		74	+ padding: 10px 0;
		75	+ border-width: 0 !important;
		76	+ border-radius: 10px;
		77	+}
		78	+
		79	+#pairwise_main .prompt:hover {
		80	+ background: url("images/prompt_bg_hover.png") no-repeat 50% top #548A1C;
		81	+}
		82	+
		83	+#pairwise_main .prompt.left{
		84	+ background-position: 51% top;
		85	+ float: left;
		86	+}
		87	+
		88	+#pairwise_main .prompt.right{
		89	+ background-position: 50% top;
		90	+ float: right;
		91	+}
		92	+
		93	+#pairwise_main .prompt a{
		94	+ color: #2a2d28 !important;
		95	+ font-size: 12px;
		96	+ display: block;
		97	+ max-width: 349px;
		98	+ padding: 10px;
		99	+ height: 100%;
		100	+}
		101	+
		102	+#pairwise_main .separator {
		103	+ background-color: #CCCCCC;
		104	+ display: inline-block;
		105	+ float: none;
		106	+ height: 170px;
		107	+ margin-top: 8px;
		108	+ width: 1px;
		109	+}
		110	+
		111	+
		112	+#pairwise_main .skip_vote {
		113	+ width: 200px !important;
		114	+ text-align: center;
		115	+ padding: 0;
		116	+ border-width: 0px;
		117	+ background-color: transparent !important;
		118	+}
		119	+
		120	+#pairwise_main .skip_vote a {
		121	+ display: inline-block;
		122	+ height: 1px;
		123	+ line-height: 0;
		124	+ padding: 1em 0;
		125	+ text-decoration: none;
		126	+ width: 200px;
		127	+}
		128	+
		129	+#pairwise_main .skip_vote_reasons {background-color: #7D8874;padding-top: 0 !important;}
		130	+
		131	+#pairwise_main .skip_vote_reasons ul {margin: 0; padding: 1em;}
		132	+
		133	+#pairwise_main .skip_vote_reasons ul li {color: white; padding: 0.5em 0.5em 0.5em 2em; text-align: left;}
		134	+
		135	+#pairwise_main .skip_vote_reasons ul li:hover{background-color:#666;}
		136	+
		137	+#pairwise_main .skip_vote_reasons ul li a {color: white;text-decoration: none;font-size: 14px;}
		138	+
		139	+#pairwise_main #suggestions_box {
		140	+ display: block !important;
		141	+ margin-top: 15px;
		142	+ padding: 10px;
		143	+ text-align: left;
		144	+}
		145	+
		146	+#pairwise_main #suggestions_box span {
		147	+ color: #4B7421;
		148	+ font-size: 15px;
		149	+ font-weight: bold;
		150	+ text-align: left;
		151	+ text-transform: uppercase;
		152	+}
		153	+
		154	+#pairwise_main .suggestion_form {}
		155	+
		156	+#pairwise_main #suggestion_box_fields {}
		157	+
		158	+#pairwise_main .div_text_input_container {width: 100%;}
		159	+
		160	+#pairwise_main .div_text_input_container .div_text_input {
		161	+ display: inline-block;
		162	+ width: 80%;
		163	+}
		164	+
		165	+#pairwise_main .div_text_input_container .div_text_input textarea {
		166	+ border: 1px solid #CCCCCC;
		167	+ border-radius: 0 0 0 0 !important;
		168	+}
		169	+
		170	+#pairwise_main .div_text_input_container .div_text_input .jqEasyCounterMsg {color: #7D8874 !important;font-size: 13px;}
		171	+
		172	+#pairwise_main .div_text_input_container .suggest_idea_btn {
		173	+ display: inline-block;
		174	+ margin-left: 5%;
		175	+ vertical-align: top;
		176	+ width: 14%;
		177	+}
		178	+
		179	+#pairwise_main .div_text_input_container .suggest_idea_btn input#new_idea_button{
		180	+ background: url("images/botao-enviar-pairwise.png") no-repeat top center transparent;
		181	+ border-radius: 0px;
		182	+ cursor: pointer;
		183	+ display: block;
		184	+ min-height: 71px;
		185	+ padding: 5px 10px;
		186	+ width: 93px;
		187	+ border-width: 0;
		188	+}
		189	+
		190	+div.pairwise_group_list_container .arrow span.active {
		191	+ background-position: center top;
		192	+}
		193	+/* */
		194	+
		195	+
1	div#pairwise_form_fields textarea {	196	div#pairwise_form_fields textarea {
2	width: 100%;	197	width: 100%;
3	margin-top: 5px;	198	margin-top: 5px;
	@@ -42,13 +237,6 @@ div#pairwise_form_fields textarea {		@@ -42,13 +237,6 @@ div#pairwise_form_fields textarea {
42		237
43		238
44	#pairwise_main div#suggestions_box {	239	#pairwise_main div#suggestions_box {
45	- /*border: 1px solid;
46	- border-radius: 7px;
47	- -webkit-border-radius: 7px;
48	- -moz-border-radius: 7px;
49	- border-color: #ccc;
50	- border-width: 1px;
51	- border-style: solid;*/
52	padding: 10px;	240	padding: 10px;
53	margin-top: 15px;	241	margin-top: 15px;
54	}	242	}
	@@ -77,12 +265,14 @@ div#pairwise_form_fields textarea {		@@ -77,12 +265,14 @@ div#pairwise_form_fields textarea {
77	}	265	}
78		266
79	#pairwise_main div#suggestions_box #new_idea_button{	267	#pairwise_main div#suggestions_box #new_idea_button{
80	- background-color: #01bb00;	268	+ background-color: #DDD;
81	padding: 5px 10px 5px 10px;	269	padding: 5px 10px 5px 10px;
82	cursor: pointer;	270	cursor: pointer;
83	border-radius: 5px;	271	border-radius: 5px;
84	- -webkit-border-radius: 5px;
85	- -moz-border-radius: 5px;	272	+ -webkit-border-radius: 5px;
		273	+ -moz-border-radius: 5px;
		274	+ font-size: 16pt;
		275	+ color: rgb(133, 133, 151);
86	}	276	}
87		277
88	#pairwise_main div#suggestions_box div.suggestion_header {	278	#pairwise_main div#suggestions_box div.suggestion_header {
	@@ -141,7 +331,6 @@ div#pairwise_form_fields textarea {		@@ -141,7 +331,6 @@ div#pairwise_form_fields textarea {
141	#pairwise_main div.skip_vote {	331	#pairwise_main div.skip_vote {
142	width: 150px;	332	width: 150px;
143	float:none;	333	float:none;
144	- color:white;
145	min-height: 18px;	334	min-height: 18px;
146	height:auto;	335	height:auto;
147	padding: 0.5em;	336	padding: 0.5em;
	@@ -171,7 +360,6 @@ div#pairwise_form_fields textarea {		@@ -171,7 +360,6 @@ div#pairwise_form_fields textarea {
171	margin-bottom: 15px;	360	margin-bottom: 15px;
172	padding-left: 5px;	361	padding-left: 5px;
173	padding-right: 5px;	362	padding-right: 5px;
174	- /float:left;/
175	float:left;	363	float:left;
176	background-color:#ccc;	364	background-color:#ccc;
177	height: 3em;	365	height: 3em;
	@@ -187,12 +375,8 @@ div#pairwise_form_fields textarea {		@@ -187,12 +375,8 @@ div#pairwise_form_fields textarea {
187	border-color:#CCCCCC;	375	border-color:#CCCCCC;
188	}	376	}
189		377
190	-#pairwise_main div.skip_vote_reasons div:nth-child(even) {
191	- /margin-left: 10px;/
192	-}
193	-
194	#pairwise_main div.skip_vote a{	378	#pairwise_main div.skip_vote a{
195	- color: white;	379	+ color: rgb(219, 162, 42);
196	text-decoration: none;	380	text-decoration: none;
197	width: 100%;	381	width: 100%;
198	}	382	}
	@@ -285,25 +469,6 @@ div.pairwise_group_list_container .arrow{		@@ -285,25 +469,6 @@ div.pairwise_group_list_container .arrow{
285	right: 20px;	469	right: 20px;
286	margin-top: 10px;	470	margin-top: 10px;
287	}	471	}
288	-/*
289	-div.pairwise_group_list_container .arrow{
290	- display: inline-block;
291	- position: absolute;
292	- right: 20px;
293	- margin-top: 10px;
294	- height: 22px;
295	- width:23px;
296	- color: #2F5707;
297	- background: url('/designs/themes/participa-theme/images/arrow_right.jpg') no-repeat center;
298	-}
299	-
300	-div.pairwise_group_list_container .arrow.active{
301	- height: 18px;
302	- margin-top: 10px;
303	- right: 20px;
304	- width: 22px;
305	- background: url('/designs/themes/participa-theme/images/arrow_down.jpg') no-repeat center;
306	-}*/
307		472
308	div.pairwise_group_list_container .row.secondary .arrow span {	473	div.pairwise_group_list_container .row.secondary .arrow span {
309	background: url('/designs/themes/participa-theme/images/arrow_right.jpg') no-repeat center;	474	background: url('/designs/themes/participa-theme/images/arrow_right.jpg') no-repeat center;
	@@ -21,7 +21,7 @@		@@ -21,7 +21,7 @@
21	<% if pairwise_content.allow_new_ideas? %>	21	<% if pairwise_content.allow_new_ideas? %>
22	<% if user %>	22	<% if user %>
23	<div id="suggestions_box">	23	<div id="suggestions_box">
24	- <span>Gostaria de sugerir uma ideia?</span>	24	+ <span><%= _('Would you like to suggest an idea?') %> </span>
25	<div class="suggestion_form">	25	<div class="suggestion_form">
26	<%= render :partial => "pairwise_plugin_profile/suggestion_form",	26	<%= render :partial => "pairwise_plugin_profile/suggestion_form",
27	:locals => {:pairwise_content => pairwise_content, :embeded => embeded, :source => source} %>	27	:locals => {:pairwise_content => pairwise_content, :embeded => embeded, :source => source} %>
	@@ -12,7 +12,7 @@		@@ -12,7 +12,7 @@
12	<%= text_area :idea, :text, :maxlenght => 160, :rows => 4, :placeholder => _('Type your idea here') %>	12	<%= text_area :idea, :text, :maxlenght => 160, :rows => 4, :placeholder => _('Type your idea here') %>
13	</div>	13	</div>
14	<div class="suggest_idea_btn">	14	<div class="suggest_idea_btn">
15	- <%= submit_button('', '', :id => 'new_idea_button', :class => user ? '':'require-login-popup') %>	15	+ <%= submit_button('', _("Send"), :id => 'new_idea_button', :class => user ? '':'require-login-popup') %>
16	</div>	16	</div>
17	</div>	17	</div>
18	</div>	18	</div>