[IMP] design using display table

bzr revid: mat@openerp.com-20130426155242-1do1w4mrch23lhbm

1 files changed, 73 insertions, 95 deletions

diff --git a/addons/gamification/static/src/css/gamification.css b/addons/gamification/static/src/css/gamification.css
index 6a8869dd466..15a6daa48d2 100644
--- a/addons/gamification/static/src/css/gamification.css
+++ b/addons/gamification/static/src/css/gamification.css
@@ -71,14 +71,19 @@
     display: inline-block;
     vertical-align: top;
     width: 280px;
-    background-color: #f8f8f8;
-    background-color: #EDEDF6;
-    /*border: solid 1px rgba(0,0,0,0.03);*/
     border-radius: 2px;
 }
-
+.openerp .oe_mail_wall .oe_mail_wall_aside > .oe_gamification_goal {
+    background-color: #EDEDF6;
+}
+.openerp .oe_mail_wall_aside .oe_gamification_suggestion {
+    background-color: rgb(211, 222, 241);
+}
+.openerp .oe_mail_wall_aside .oe_gamification_suggestion ul {
+    padding-left: 15px;
+}
 .openerp .oe_mail_wall_aside > div {
-    border-bottom: solid 3px white;
+    border-bottom: solid 5px white;
     border-radius: 2px;
 }
 .openerp .oe_mail_wall_aside .oe_goal {
@@ -86,138 +91,101 @@
 }
 .openerp .oe_mail_wall_aside h3 {
     font-size: 1.3em;
-    /*font-variant: small-caps;
-    text-transform: capitalize;*/
     line-height: 1em;
 }
 .openerp .oe_mail_wall_aside .oe_goal {
-    padding: 5px 5px 0 15px;
+    /*padding: 5px 5px 0 15px;*/
+    padding: 5px 10px;
 }
-.openerp .oe_mail_wall_aside .oe_goal h4 {
-    font-size: 110%;
-}
-/*.openerp .oe_mail_wall_aside .oe_goal a {
-    color: #4c4c4c;;
-}*/
-.openerp .oe_mail_wall_aside .oe_goals_list {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: 5px;
-    margin-bottom: 10px;
-}
-.openerp .oe_mail_wall_aside table.oe_goals_list {
-    width: 95%;
-    /*border: 1px dotted rgb(221, 221, 221);
-    border-color: rgba(133, 133, 133, 0.3);*/
-    /*border: solid 1px rgba(0,0,0,0.05);*/
-}
-.openerp .oe_mail_wall_aside .oe_goals_list > li {
-    padding-bottom: 8px;
-    vertical-align: middle;
+.openerp .oe_mail_wall_aside .oe_goal h4,
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goals_list .oe_thead {
+    text-align: center;
+    padding-bottom: 15px;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list > li.oe_no_progress {
-    padding-bottom: 2px;
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_no_progress div {
+    display: inline-block;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list > li::before {
-    content: "\0BB \020";
-    font-size: 175%;
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_no_progress::before {
+    content: "•";
+    padding-right: 4px;
+    /*font-size: 175%;*/
 }
-.openerp .oe_mail_wall_aside .oe_goals_list > li.oe_goal_reached::before {
-    color: rgb(27, 70, 7);
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_no_progress.oe_goal_reached::before {
+    /*color: rgb(27, 70, 7);*/
     content: "✓";
-    margin-right: -4px;
+    padding-right: 0;
+    margin-left: -2px;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list li .oe_goal_current {
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_cell.oe_goal_current {
     font-size: 150%;
     font-weight: bold;
+    min-width: 20px;
+    padding: 0 5px;
 }
-.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached .oe_goal_inner_box {
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_no_progress.oe_goal_reached .oe_cell {
     text-decoration: line-through;
 }
 
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_outer_box {
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_outer_box {
     display: inline-block;
     position: relative;
-    height: 100%;
-    width: 80%;
     z-index: 0;
     vertical-align: middle;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside table .oe_goal_outer_box {
     width: 100%;
+    border: solid 1px rgba(0,0,0,0.03);
+    border-radius: 2px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_outer_box.oe_no_progress {
+    border: none;
 }
-/*.openerp .oe_mail_wall .oe_mail_wall_aside li .oe_goal_outer_box {
-    border: 1px dotted rgb(221, 221, 221);
-    border-color: rgba(133, 133, 133, 0.3);
-}*/
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_progress_background {
-    /*background-color: rgb(231, 190, 190);*/
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_progress_background {
     background-color: white;
     position: absolute;
-    height: 3px;
+    height: 100%;
     width: 100%;
     z-index: -2;
     top: 0; left: 0;
 }
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_progress {
-    /*background: rgb(183, 231, 179);*/
-    /*background: rgba(183, 231, 179, 0.5);*/
-    background-color: rgb(88, 155, 91);
-    background-color: #7c7bad;
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_progress {
+    background-color: rgb(212, 233, 222);
+    /*background-color: #7c7bad;*/
     position: absolute;
-    height: 3px;
+    height: 100%;
     width: 0;
     z-index: -1;
     top: 0; left: 0;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box {
-    display: inline-block;
-    height: 100%;
-    margin-top: 6px;
-    line-height: 1em;
-}
-.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box.oe_no_progress {
-    margin-top: 0;
-}
-.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box strong {
-    padding-left: 5px;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goals_list thead {
-    font-weight: normal;
-    background: none;
+
+.openerp .oe_mail_wall_aside .oe_goals_list {
+    padding-left: 0;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 95%;
 }
-.openerp .oe_mail_wall_aside td,
-.openerp .oe_mail_wall_aside th {
-    vertical-align: middle;
-    /*border: none;*/
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_row {
+    margin-bottom: 10px;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list thead th {
+
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_thead {
     font-weight: normal;
     padding: 5px;
+    text-align: center;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list tbody tr {
-    height: 24px;
-}
-/*.oe_mail_wall_aside .oe_goals_list tbody tr:nth-child(even) {
-    background-color: #fff;
-}
-*/
-.openerp .oe_mail_wall_aside .oe_goals_list tbody td {
-    padding-bottom: 5px;
-}
-.openerp .oe_mail_wall_aside .oe_goals_list tbody th {
-    padding-left: 5px;
-    height: 24px;
+
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_cell {
+    padding: 3px 0;
 }
-.openerp .oe_mail_wall_aside table.oe_goals_list .col0 {
+.openerp .oe_mail_wall_aside .oe_table.oe_goals_list .col0 {
     font-size: 200%;
     font-weight: bold;
+    width: 25px;
+    text-align: center;
 }
-.openerp .oe_mail_wall_aside table.oe_goals_list .col1 {
+.openerp .oe_mail_wall_aside .oe_table.oe_goals_list .col1 {
     padding: 0 5px;
 }
-.openerp .oe_mail_wall_aside table.oe_goals_list .col2 {
-    width: 100%;
+.openerp .oe_mail_wall_aside .oe_table.oe_goals_list .col2 {
+    width: auto;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_user_avatar {
     width: 24px;
@@ -228,7 +196,7 @@
     visibility: hidden;
     font-size: 25px;
     float: right;
-    margin-right: 15px;
+    /*margin-right: 15px;*/
     position: relative;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal div:hover > .oe_update_plan,
@@ -238,4 +206,14 @@
 }
 .openerp .oe_mail_wall .oe_mail {
     display: inline-block;
+}
+.openerp .oe_table {
+    display: table;
+}
+.openerp .oe_row {
+    display: table-row;
+}
+.openerp .oe_cell {
+    display: table-cell;
+    vertical-align: middle;
 }
\ No newline at end of file