[IMP] more consistent display of challenges

bzr revid: mat@openerp.com-20130422093236-y76ad91yoyemejxa

2 files changed, 86 insertions, 68 deletions

diff --git a/addons/gamification/static/src/css/goal.css b/addons/gamification/static/src/css/goal.css
index e481a800c79..c113ac6ad2e 100644
--- a/addons/gamification/static/src/css/goal.css
+++ b/addons/gamification/static/src/css/goal.css
@@ -71,23 +71,49 @@
     background: #EDEDF6;
     padding: 5px 5px 0 15px;
 }
-.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached,
+.openerp .oe_mail_wall_aside h3 {
+    font-size: 1.3em;
+    margin-left: -7px;
+    font-variant: small-caps;
+    text-transform: capitalize;
+    line-height: 1em;
+}
+/* mark goal as completed */
+.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached {
+    /*text-decoration: line-through;*/
+    color: rgb(17, 95, 17);
+}
 .openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_failed {
-    text-decoration: line-through;
+    color: rgb(95, 17, 17);
 }
 
-.openerp .oe_mail_wall .oe_mail_wall_aside ul {
+.openerp .oe_mail_wall_aside .oe_goals_list {
     list-style-type: none; 
-    padding-left: 20px;
+    padding-left: 15px;
     margin-bottom: 15px;
+    width: 200px;
 }
-.openerp .oe_mail_wall .oe_mail_wall_aside li {
-    margin-bottom: 15px;
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_outer_box {
+    background: rgb(173, 219, 178);
+    min-height: 32px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box {
+    display: inline-block;
+    width: 200px;
+    min-height: 32px;
+    vertical-align: middle;
+    border: solid 1px white;
+}
+.openerp .oe_mail_wall_aside table.oe_goals_list .oe_goal_inner_box {
+    border: none;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box strong {
+    padding-left: 5px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside table {
     margin: 10px 0;
 }
-.oe_mail_wall_aside .oe_list_content tbody tr:nth-child(even) {
+.oe_mail_wall_aside .oe_goals_list tbody tr:nth-child(even) {
     background-color: #fff;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside td,
@@ -95,41 +121,33 @@
     vertical-align: middle;
     border: none;
 }
-.openerp .oe_mail_wall_aside .oe_list_content tbody th {
+.openerp .oe_mail_wall_aside .oe_goals_list thead th {
+    padding: 5px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list tbody tr {
+    height: 32px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list tbody th {
     padding-left: 5px;
+    height: 32px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside table .col0 {
-    font-size: 150%;
+    font-size: 160%;
     font-weight: bold;
+    width: 24px;
 }
-.openerp .oe_mail_wall .oe_mail_wall_aside table td.col0 { width: 25px; }
-.openerp .oe_mail_wall .oe_mail_wall_aside table td.col1 { width: 32px; }
-
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_user_avatar { width: 32px; }
-
-/* background progress bar */
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_progress {
-    background: rgb(173, 219, 178);
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside table progress,.oe_form_field_progressbar {
-    width: 100%;
-    display: inline-block;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside li progress,.oe_form_field_progressbar {
-    width: 80%;
-    display: inline-block;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside li p {
-    margin:5px 0;
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_user_avatar {
+    width: 32px;
+    padding-right: 5px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal .oe_update_plan,
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal .oe_goal_action {
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_inner_box .oe_goal_action {
     visibility: hidden;
     display: block;
     float: right;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal:hover > .oe_update_plan,
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal:hover .oe_goal_action {
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_inner_box:hover .oe_goal_action {
     visibility: visible;
 }
 .openerp .oe_mail_wall .oe_mail {
diff --git a/addons/gamification/static/src/xml/gamification.xml b/addons/gamification/static/src/xml/gamification.xml
index 428342e08b6..e3782a7d22b 100644
--- a/addons/gamification/static/src/xml/gamification.xml
+++ b/addons/gamification/static/src/xml/gamification.xml
@@ -4,42 +4,41 @@
         <div class="oe_gamification_goal"><em>Your goal list is empty</em></div>
     </t>
     <t t-name="gamification.goal_list_to_do">
+        <h3>Challenges</h3>
         <div t-foreach="widget.goals_info.info" t-as="plan" class="oe_goal">
             <a class="oe_update_plan oe_e" rol="button" t-attf-id="{plan.id}">e</a>
-            <h3><t t-esc="plan.name" /></h3>
+            <h4><t t-esc="plan.name" /></h4>
 
             <t t-if="plan.visibility_mode == 'progressbar'">
-                <ul class="oe_goals_list" style="width:200px;">
-                <li t-foreach="plan.goals" t-as="goal" t-attf-style="width: #{goal.completeness}%;" class="oe_goal_progress">
-                    <div style="width:200px;">
-                    <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
-                    <strong t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : goal.state == 'failed' ? 'oe_goal_failed' : ''}" t-att-title="goal.type_description"><t t-esc="goal.type_name" /></strong>
-                    <t t-if="goal.computation_mode == 'manually' or goal.type_action">
-                        <a class="oe_goal_action oe_e" t-att-id="goal.id">&amp;</a>
-                    </t>
-                    <t t-if="goal.type_display == 'progress'">
-                        <t t-if="goal.type_condition == 'higher'">
-                            <p>
-                                <t t-esc="goal.current" />/<span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
-                                <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
-                            </p>
-                            <!-- <p><progress class="oe_goal_progress" t-att-value="goal.completeness" max="100"/></p> -->
+                <div class="oe_goals_list">
+                    <div class="oe_goal_outer_box" t-foreach="plan.goals" t-as="goal" t-attf-style="width: #{goal.completeness}%;">
+                    <div class="oe_goal_inner_box">
+                        <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
+                        <strong t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : goal.state == 'failed' ? 'oe_goal_failed' : ''}" t-att-title="goal.type_description"><t t-esc="goal.type_name" /></strong>
+                        <t t-if="goal.computation_mode == 'manually' or goal.type_action">
+                            <a class="oe_goal_action oe_e" t-att-id="goal.id">&amp;</a>
                         </t>
-                        <t t-if="goal.type_condition == 'lower'">
-                            <p>
-                                <t t-esc="goal.current" /> (less than 
-                                    <span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
+
+                        <t t-if="goal.type_display == 'progress'">
+                            <t t-if="goal.type_condition == 'higher'">
+                                    <t t-esc="goal.current" />/<span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
                                     <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
-                                )
-                            </p>
+                            </t>
+                            <t t-if="goal.type_condition == 'lower'">
+                                
+                                    <t t-esc="goal.current" /> (less than 
+                                        <span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
+                                        <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
+                                    )
+                                
+                            </t>
                         </t>
-                    </t>
                     </div>
-                </li>
-                </ul>
+                    </div>
+                </div>
             </t>
             <t t-if="plan.visibility_mode == 'board'">
-                <table width="100%" border="1" t-foreach="plan.planlines" t-as="planline" class="oe_list_content">
+                <table width="100%" border="1" t-foreach="plan.planlines" t-as="planline" class="oe_goals_list">
                     <thead>
                     <tr>
                         <th colspan="4" t-attf-title="#{planline.type_description ? planline.type_description : ''}">
@@ -55,14 +54,14 @@
                     <tr t-foreach="planline.goals" t-as="goal" t-attf-class="#{goal.id == planline.own_goal_id ? 'oe_bold' : ''}">
                         <div style="background: #fff;">
                             <th class="col0"><t t-esc="goal.rank" /></th>
-                            <td class="col1"><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></td>
-                            <td class="col2" style="width:150px;">
-                                <div class="oe_goal_progress" t-attf-style="width: #{goal.completeness}%;">
-                                    <div style="width:150px;">
+                            <td><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></td>
+                            <td class="col1" style="width:200px;">
+                                <div class="oe_goal_outer_box" t-attf-style="width: #{goal.completeness}%;">
+                                <div class="oe_goal_inner_box">
                                     <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
-                                    <t t-esc="goal.user_name"/><br/>
+                                    <t t-esc="goal.user_name"/>
                                     <span t-attf-class="#{planline.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.current" /></span><t t-if="planline.type_unit"> <t t-esc="planline.type_unit"/></t>
-                                    </div>
+                                </div>
                                 </div>
                             </td>
                         </div>
@@ -74,12 +73,13 @@
     </t>
 
     <t t-name="gamification.challenge_suggestions">
-        <h3>Suggested challenges</h3>
-        <div t-foreach="widget.challenge_suggestions.info" t-as="challenge" class="oe_challenge">
-            <p>
-                <strong><t t-esc="challenge.name"/></strong> <a class="oe_challenge_reply" t-attf-title="#{challenge.description.value ? challenge.description.value : ''}" t-attf-id="{challenge.id}">reply</a>
-            </p>
-        </div>
+        <h3>Suggestions</h3>
+        <em>You have been invited to the following challenges:</em>
+        <ul t-foreach="widget.challenge_suggestions.info" t-as="challenge" class="oe_challenge">
+            <li>
+                <strong><t t-esc="challenge.name"/></strong> <a class="oe_challenge_reply" t-attf-title="#{challenge.description.value ? challenge.description.value : ''}" t-attf-id="{challenge.id}">accept?</a>
+            </li>
+        </ul>
     </t>
 
 </templates>