Add support for show actions on result screen
2 files changed, 32 insertions(+), 10 deletions(-)

M src/lib/dom.js
M src/styles.css
M src/lib/dom.js +11 -3
@@ 32,7 32,7 @@ const AnswerTemplate = (index, total, qu
             <h2 class="answer__title">${question}</h2>
             <div class="answer__options">
                 ${answers.map(answer => `
-                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} ${answer['key']}" style="background-color: ${answer['background']}">
+                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} answer__option--${answer['key']}" style="background-color: ${answer['background']}">
                     <img class="answer__option__logo" src="${answer['logo']}" />
                     <p class="answer__option__content" style="color: ${answer['color']}">${answer['title']}</p>
                 </div>

          
@@ 47,11 47,11 @@ const AnswerTemplate = (index, total, qu
 const ResultTemplate = (questions, selected_answers, options) => `
     <table class="result">
         <tbody>
-            <tr class="logos">
+            <tr class="result__logos">
                 <td></td>
                 ${options.map(option => `
                 <td>
-                    <img src="${option['logo']}" />
+                    <img src="${option['logo']}" class="result__logo--${option['key']}" />
                 </td>
                 `).join('')}
             </tr>

          
@@ 76,6 76,14 @@ const ResultTemplate = (questions, selec
                     return `<td>${icon}</td>`;
                 }).join('')}
             </tr>`).join('')}
+            <tr class="result__actions">
+                <td></td>
+                ${options.map(option => `
+                <td>
+                    <a href="${option['result_action']}" class="result__action result__action--${option['key']}">${option['result_text']}</a>
+                </td>
+                `).join('')}
+            </tr>
         </tbody>
     </table>
 `;

          
M src/styles.css +21 -7
@@ 24,18 24,32 @@ 
 }
 
 .question__action,
+.answer__action,
+.result__action {
+  border: none;
+  border-radius: 25px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: #3c689b;
+  cursor: pointer;
+}
+.question__action,
 .answer__action {
   margin-top: 2rem;
-  border: none;
   height: 50px;
-  border-radius: 25px;
   font-size: 20px;
   padding: 0 2rem;
-  color: #fff;
-  background-color: #3c689b;
-  border: 1px solid #3c689b;
-  cursor: pointer;
+
 }
+.result__action {
+  height: 40px;
+  font-size: 16px;
+  padding: 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
 .question__action:first-child {
   margin-right: 0.5rem;
 }

          
@@ 118,7 132,7 @@ 
   width: 100%;
   border-collapse: collapse;
 }
-.result img {
+.result__logos img {
   max-width: 130px;
   padding-left: 0.3rem;
   padding-right: 0.3rem;