Improve results button

Victor Costa
1 parent 11c05398
Showing 4 changed files with 18 additions and 7 deletions Show diff stats
images/result-dislike.png
images/result-like.png
index.html
sass/_proposal_detail.scss
@@ -173,7 +173,7 @@
         <a href="#" class="like dislike" data-vote-value="-1"></a>
         <a href="#" class="like" data-vote-value="1"></a>
         <a href="#" class="skip">Pular</a>
-        <a href="#" class="vote-result">Resultado</a>
+        <a href="#" class="vote-result">Resultados</a>
       </div>
     </script>
  
@@ -183,8 +183,8 @@
         <table>
           <tr class="header">
             <td class="abstract-text">Texto da Alternativa</td>
-            <td class="votes-for">Gostei</td>
-            <td class="votes-against">Não Gostei</td>
+            <td class="votes-for"></td>
+            <td class="votes-against"></td>
             <td class="score">Pontuação</td>
           </tr>
           {{#each articles}}
@@ -99,9 +99,7 @@
         font-weight: bolder;
         font-size: 12px;
         text-transform: uppercase;
-        background-color: gray;
-        color: white;
-        width: 4%;
+        color: gray;
         border: none;
         margin: 10px;
         border-radius: 6px;
@@ -137,6 +135,18 @@
         font-weight: bold;
         text-align: center;
         color: rgb(68, 68, 68);
+        .votes-for {
+          background-image: url(./images/result-like.png);
+          background-repeat: no-repeat;
+          display: inline-block;
+          background-position: center;
+        }
+        .votes-against {
+          background-image: url(./images/result-dislike.png);
+        }
+        .score {
+          background-image: none;
+        }
       }
  
       .truncate {
@@ -324,7 +334,8 @@
             display: block;
           }
           .vote-result {
-            @extend .skip
+            text-decoration: none;
+            color: $color;
           }
         }
       }
...	...	@@ -173,7 +173,7 @@
173	173	<a href="#" class="like dislike" data-vote-value="-1"></a>
174	174	<a href="#" class="like" data-vote-value="1"></a>
175	175	<a href="#" class="skip">Pular</a>
176		- <a href="#" class="vote-result">Resultado</a>
	176	+ <a href="#" class="vote-result">Resultados</a>
177	177	</div>
178	178	</script>
179	179
...	...	@@ -183,8 +183,8 @@
183	183	<table>
184	184	<tr class="header">
185	185	<td class="abstract-text">Texto da Alternativa</td>
186		- <td class="votes-for">Gostei</td>
187		- <td class="votes-against">Não Gostei</td>
	186	+ <td class="votes-for"></td>
	187	+ <td class="votes-against"></td>
188	188	<td class="score">Pontuação</td>
189	189	</tr>
190	190	{{#each articles}}
...	...
...	...	@@ -99,9 +99,7 @@
99	99	font-weight: bolder;
100	100	font-size: 12px;
101	101	text-transform: uppercase;
102		- background-color: gray;
103		- color: white;
104		- width: 4%;
	102	+ color: gray;
105	103	border: none;
106	104	margin: 10px;
107	105	border-radius: 6px;
...	...	@@ -137,6 +135,18 @@
137	135	font-weight: bold;
138	136	text-align: center;
139	137	color: rgb(68, 68, 68);
	138	+ .votes-for {
	139	+ background-image: url(./images/result-like.png);
	140	+ background-repeat: no-repeat;
	141	+ display: inline-block;
	142	+ background-position: center;
	143	+ }
	144	+ .votes-against {
	145	+ background-image: url(./images/result-dislike.png);
	146	+ }
	147	+ .score {
	148	+ background-image: none;
	149	+ }
140	150	}
141	151
142	152	.truncate {
...	...	@@ -324,7 +334,8 @@
324	334	display: block;
325	335	}
326	336	.vote-result {
327		- @extend .skip
	337	+ text-decoration: none;
	338	+ color: $color;
328	339	}
329	340	}
330	341	}
...	...