[IMP] design using display table
bzr revid: mat@openerp.com-20130426155242-1do1w4mrch23lhbm
This commit is contained in:
Martin Trigaux
@@ -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 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_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 .oe_goals_list .oe_no_progress div {
|
||||
display: inline-block;
|
||||
}
|
||||
.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 .oe_no_progress::before {
|
||||
content: "•";
|
||||
padding-right: 4px;
|
||||
/*font-size: 175%;*/
|
||||
}
|
||||
.openerp .oe_mail_wall_aside .oe_goals_list > li {
|
||||
padding-bottom: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.openerp .oe_mail_wall_aside .oe_goals_list > li.oe_no_progress {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.openerp .oe_mail_wall_aside .oe_goals_list > li::before {
|
||||
content: "\0BB \020";
|
||||
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 .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_outer_box.oe_no_progress {
|
||||
border: none;
|
||||
}
|
||||
.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 {
|
||||
padding-left: 0;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
width: 95%;
|
||||
}
|
||||
.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_row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.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 td,
|
||||
.openerp .oe_mail_wall_aside th {
|
||||
vertical-align: middle;
|
||||
/*border: none;*/
|
||||
}
|
||||
.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;
|
||||
|
||||
.openerp .oe_mail_wall_aside .oe_goals_list .oe_cell {
|
||||
padding: 3px 0;
|
||||
}
|
||||
/*.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 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;
|
||||
}
|
||||
@@ -6,75 +6,72 @@
|
||||
<t t-name="gamification.goal_list_to_do">
|
||||
<div t-foreach="widget.goals_info.info" t-as="plan" class="oe_goal">
|
||||
<div>
|
||||
<h4 style="display:inline-block;"><t t-esc="plan.name" /></h4>
|
||||
<a class="oe_update_plan oe_e" rol="button" t-attf-id="{plan.id}">e</a>
|
||||
<h4><t t-esc="plan.name" /></h4>
|
||||
</div>
|
||||
|
||||
<t t-if="plan.visibility_mode == 'progressbar'">
|
||||
<ul class="oe_goals_list">
|
||||
<li t-foreach="plan.goals" t-as="goal" t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : ''} #{goal.type_display != 'progress' ? 'oe_no_progress' : ''}">
|
||||
<t t-if="goal.type_display == 'progress'"><span class="oe_goal_current"><t t-esc="goal.current" /></span></t>
|
||||
<div class="oe_goal_outer_box">
|
||||
<div class="oe_table oe_goals_list">
|
||||
<div t-foreach="plan.goals" t-as="goal" t-attf-class="oe_row oe_goal_outer_box #{goal.state == 'reached' ? 'oe_goal_reached' : ''} #{goal.type_display != 'progress' ? 'oe_no_progress' : ''}">
|
||||
<t t-if="goal.type_display == 'progress'">
|
||||
<div class="oe_goal_progress_background"></div>
|
||||
<div class="oe_goal_progress" t-attf-style="#{goal.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : 'width:0;'}"></div>
|
||||
</t>
|
||||
<div t-attf-class="oe_goal_inner_box #{goal.type_display != 'progress' ? 'oe_no_progress' : ''}">
|
||||
<t t-if="goal.computation_mode != 'manually' and !goal.type_action">
|
||||
<span t-att-title="goal.type_description"><t t-esc="goal.type_name" /></span>
|
||||
</t>
|
||||
<t t-if="goal.type_action or goal.computation_mode == 'manually'">
|
||||
<span t-att-title="goal.type_description"><a class="oe_goal_action" t-att-id="goal.id"><t t-esc="goal.type_name" /></a></span>
|
||||
</t>
|
||||
<div t-attf-class="oe_goal_inner_box">
|
||||
<t t-if="goal.type_display == 'progress'">
|
||||
<t t-if="goal.type_condition == 'higher'">
|
||||
(target:
|
||||
</t>
|
||||
<t t-if="goal.type_condition == 'lower'">
|
||||
(target less than:
|
||||
</t>
|
||||
<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>)
|
||||
<div class="oe_cell oe_goal_current"><t t-esc="goal.current" /></div>
|
||||
</t>
|
||||
<div class="oe_cell">
|
||||
<t t-if="goal.computation_mode != 'manually' and !goal.type_action">
|
||||
<span t-att-title="goal.type_description"><t t-esc="goal.type_name" /></span>
|
||||
</t>
|
||||
<t t-if="goal.type_action or goal.computation_mode == 'manually'">
|
||||
<span t-att-title="goal.type_description"><a class="oe_goal_action" t-att-id="goal.id"><t t-esc="goal.type_name" /></a></span>
|
||||
</t>
|
||||
<t t-if="goal.type_display == 'progress'">
|
||||
<t t-if="goal.type_condition == 'higher'">
|
||||
(target:
|
||||
</t>
|
||||
<t t-if="goal.type_condition == 'lower'">
|
||||
(target less than:
|
||||
</t>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-if="plan.visibility_mode == 'board'">
|
||||
<table t-foreach="plan.planlines" t-as="planline" class="oe_goals_list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3" t-attf-title="#{planline.type_description ? planline.type_description : ''}">
|
||||
<div t-foreach="plan.planlines" t-as="planline" class="oe_goals_list oe_table">
|
||||
<div class="oe_row">
|
||||
<div class="oe_cell oe_thead" colspan="3" t-attf-title="#{planline.type_description ? planline.type_description : ''}">
|
||||
<strong><t t-esc="planline.type_name"/></strong>
|
||||
|
||||
<t t-if="planline.computation_mode == 'manually' and !planline.type_action">
|
||||
<strong><t t-esc="planline.type_name"/></strong>
|
||||
<a class="oe_goal_action oe_e" t-att-id="planline.own_goal_id">&</a>
|
||||
<br/>
|
||||
<div class="oe_grey">
|
||||
<t t-if="planline.type_condition == 'higher'">
|
||||
Target:
|
||||
</t>
|
||||
<t t-if="planline.type_condition == 'lower'">
|
||||
Target (less than):
|
||||
</t>
|
||||
<span t-attf-class="#{planline.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="planline.target_goal" /></span><t t-if="planline.type_unit"> <t t-esc="planline.type_unit"/></t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div t-foreach="planline.goals" t-as="goal" t-attf-class="#{goal.id == planline.own_goal_id ? 'oe_bold' : ''}">
|
||||
<div class="oe_row oe_goal_outer_box">
|
||||
<t t-if="planline.type_display == 'progress'">
|
||||
<div class="oe_goal_progress_background"></div>
|
||||
<div class="oe_goal_progress" t-attf-style="#{planline.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : 'width:0;'}"></div>
|
||||
</t>
|
||||
<t t-if="planline.type_condition == 'higher'">
|
||||
Target:
|
||||
</t>
|
||||
<t t-if="planline.type_condition == 'lower'">
|
||||
Target (less than):
|
||||
</t>
|
||||
<span t-attf-class="#{planline.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="planline.target_goal" /></span><t t-if="planline.type_unit"> <t t-esc="planline.type_unit"/></t>)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr t-foreach="planline.goals" t-as="goal" t-attf-class="#{goal.id == planline.own_goal_id ? 'oe_bold' : ''}">
|
||||
<div>
|
||||
<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">
|
||||
<div class="oe_goal_outer_box">
|
||||
<t t-if="planline.type_display == 'progress'">
|
||||
<div class="oe_goal_progress_background"></div>
|
||||
<div class="oe_goal_progress" t-attf-style="#{planline.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : 'width:0;'}"></div>
|
||||
</t>
|
||||
<div class="oe_goal_inner_box">
|
||||
<div class="oe_goal_inner_box">
|
||||
<div class="oe_cell col0"><t t-esc="goal.rank" /></div>
|
||||
<div class="oe_cell col1"><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></div>
|
||||
<div class="oe_cell col2">
|
||||
|
||||
<t t-esc="goal.user_name"/><br/>
|
||||
<t t-if="goal.id != planline.own_goal_id or (planline.computation_mode != 'manually' and !planline.type_action)">
|
||||
<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>
|
||||
@@ -84,20 +81,18 @@
|
||||
<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>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="gamification.challenge_suggestions">
|
||||
<div class="oe_goal">
|
||||
<h3>Suggestions</h3>
|
||||
<h4>Proposed Challenges</h4>
|
||||
<ul t-foreach="widget.challenge_suggestions.info" t-as="challenge" class="oe_goals_list">
|
||||
<li>
|
||||
<strong><a class="oe_challenge_reply" t-attf-title="#{challenge.description.value ? challenge.description.value : ''}" t-attf-id="{challenge.id}" title="more details..."><t t-esc="challenge.name"/></a></strong>
|
||||
|
||||
Reference in New Issue
Block a user