[FIX] web_kanban + others: kanban record two columns layout

* Remove use of flex for kanban record layout (text overflow ellipsis
could not work in row wrap flex layout as flex would prefer to wrap its
elements than add an ellipsis inside its content)
* Fix xml templates (double use of o_kanban_image + non-existing class)
This commit is contained in:
qsm-odoo
2015-08-20 15:26:03 +02:00
parent b5621fb21b
commit 916187e0fb
8 changed files with 46 additions and 72 deletions
+1 -1
View File
@@ -351,7 +351,7 @@
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column_tags oe_kanban_global_click">
<div class="oe_kanban_global_click">
<div class="o_kanban_tags_section">
<field name="tag_ids"/>
</div>
+1 -1
View File
@@ -110,7 +110,7 @@
<field name="rule_max_number" />
<templates>
<t t-name="kanban-box">
<div t-attf-class="o_kanban_two_column oe_kanban_global_click #{record.stat_my.raw_value ? 'oe_kanban_color_5' : 'oe_kanban_color_white'}">
<div t-attf-class="oe_kanban_global_click #{record.stat_my.raw_value ? 'oe_kanban_color_5' : 'oe_kanban_color_white'}">
<div class="o_kanban_image">
<img t-att-src="kanban_image('gamification.badge', 'image', record.image.raw_value)" t-att-title="record.name.value"/>
</div>
+1 -1
View File
@@ -157,7 +157,7 @@
<field name="message_unread_counter"/>
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column oe_kanban_global_click">
<div class="oe_kanban_global_click">
<div class="o_kanban_image">
<img t-att-src="kanban_image('hr.employee', 'image_medium', record.id.value)"/>
<div class="o_employee_summary_icons">
+4
View File
@@ -14,4 +14,8 @@
}
}
}
.o_employee_summary_icons > span {
white-space: nowrap;
}
}
@@ -32,7 +32,7 @@
<field name="nbr_session"/>
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column oe_kanban_global_click">
<div class="oe_kanban_global_click">
<div class="o_kanban_image">
<img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.value)" class="img-responsive"/>
</div>
+4 -4
View File
@@ -341,9 +341,9 @@
<field name="product_variant_ids"/>
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column_tags oe_kanban_global_click">
<div class="oe_kanban_global_click">
<div class="o_kanban_image">
<img t-att-src="kanban_image('product.template', 'image_small', record.id.value)" class="o_kanban_image"/>
<img t-att-src="kanban_image('product.template', 'image_small', record.id.value)"/>
</div>
<div class="oe_kanban_details">
<strong>
@@ -473,12 +473,12 @@
<field name="lst_price"/>
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column_tags oe_kanban_global_click">
<div class="oe_kanban_global_click">
<div class="o_kanban_tags_section">
<field name="attribute_value_ids" groups="product.group_product_variant"/>
</div>
<div class="o_kanban_image">
<img t-att-src="kanban_image('product.product', 'image_small', record.id.value)" class="o_kanban_image"/>
<img t-att-src="kanban_image('product.product', 'image_small', record.id.value)"/>
</div>
<div class="oe_kanban_details">
<strong><field name="name"/></strong>
@@ -3,6 +3,10 @@
@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;
@o-kanban-image-width: 64px;
@o-kanban-inside-gutter: 8px;
// mixins
.o-kanban-icon() {
// Share the style of `.o_kanban_quick_add` and `o_kanban_config`.
@@ -16,55 +20,44 @@
cursor: pointer;
}
// LAYOUT
.o_kanban_view {
.o-flex-display();
.o-align-content(stretch);
overflow-x: visible;
overflow-x: visible;
@media (max-width: @screen-xs-max) {
overflow-x: auto;
padding: 0px;
}
.o_kanban_record {
.clearfix();
position: relative;
min-width: 150px;
margin: 4px;
&.o_kanban_two_column {
.o-flex-display();
.o_kanban_image {
float: left;
width: @o-kanban-image-width;
.oe_kanban_details {
position: relative;
display: inline-block;
.o-flex(1, 1, auto);
width: 0;
+ div {
padding-left: @o-kanban-image-width + @o-kanban-inside-gutter;
}
}
&.o_kanban_two_column_tags {
.o-flex-display();
.o-flex-flow(row, wrap);
.o_kanban_tags_section {
.o-flex(1, 1, 100%);
}
.o_kanban_image {
.o-flex(1, 1, 25%);
margin-right: 0;
}
.oe_kanban_details {
position: relative;
.o-flex(1, 1, 75%);
ul {
margin-bottom: 0;
}
.oe_kanban_details {
width: 100%;
> ul {
margin-bottom: 0;
}
}
.o_dropdown_kanban {
float: right;
@media (max-width: @screen-xs-max) {
visibility: visible;
}
// Open the dropdown a the left side of the dropdown toggle
> .dropdown-menu {
@@ -74,18 +67,11 @@
}
}
.o_dropdown_kanban {
@media (max-width: @screen-xs-max) {
visibility: visible;
}
}
.o_kanban_footer {
.o-flex-display();
.o-justify-content(space-between);
width: 100%;
> * {
flex: none;
.o-flex(0, 0, auto);
}
}
@@ -102,10 +88,9 @@
}
.o_kanban_tags {
margin-left: -8px;
height: 9px;
.o_tag{
.o_tag {
width: 50px;
height: 9px;
display: inline-block;
@@ -136,30 +121,28 @@
.o_kanban_header + .o_kanban_record {
margin-top: 0; // no margin top from the first card after kanban_header
}
}
&.o_kanban_ungrouped {
.o-flex-flow(row, wrap);
.o-justify-content(flex-start);
padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
@media (max-width: @screen-xs-max) {
padding: 0;
}
.o_kanban_record {
.o-flex(1, 1, auto);
width: @o-kanban-default-record-width;
.o-flex(1, 1, @o-kanban-default-record-width);
@media (max-width: @screen-xs-max) {
margin: 0 0 1px 0;
width: 100vw;
width: 100%;
box-shadow: none;
}
&.o_kanban_ghost {
height: 0;
min-height: 0 !important; // to prevent view writers to override this height
min-height: 0!important; // to prevent view writers to override this height
visibility: hidden;
margin-top: 0;
margin-bottom: 0;
@@ -197,7 +180,6 @@
}
}
.o_column_quick_create {
.o-flex(0, 0, auto);
margin: 0;
@@ -209,7 +191,6 @@
width: 180px;
}
}
}
// STYLE
@@ -218,12 +199,10 @@
.o_kanban_record {
background-color: white;
box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
padding: 8px;
padding: @o-kanban-inside-gutter;
&:hover {
.o_dropdown_kanban {
visibility: visible;
}
&:hover .o_dropdown_kanban {
visibility: visible;
}
&.oe_kanban_global_click, &.oe_kanban_global_click_edit {
@@ -236,10 +215,8 @@
}
&.o_kanban_two_column_tags {
.o_kanban_image {
> img {
box-shadow: none;
}
.o_kanban_image > img {
box-shadow: none;
}
}
@@ -254,13 +231,10 @@
}
.o_kanban_image {
.o-flex(0, 0, auto);
margin-right: 8px;
text-align: center;
img {
width: 64px;
height: 64px;
max-width: 100%;
box-shadow: none;
}
}
@@ -269,9 +243,7 @@
margin-top: 15px;
> button, > a {
position: absolute;
bottom: 0;
right: 0;
.o-position-absolute(@right: @o-kanban-inside-gutter, @bottom: @o-kanban-inside-gutter);
}
}
@@ -304,15 +276,14 @@
}
}
.o_progressbar {
.o-flex-display();
.o_progressbar_title {
.o-flex(0, 0, auto);
}
.o_progress {
margin-top: 3px;
.o-flex(1, 1, auto);
margin-top: 3px;
}
.o_progressbar_value {
.o-flex(0, 0, auto);
@@ -339,7 +310,6 @@
.o_dropdown_kanban {
visibility: hidden;
}
}
.o_kanban_group {
+1 -1
View File
@@ -397,7 +397,7 @@
<field name="type"/>
<templates>
<t t-name="kanban-box">
<div class="o_kanban_two_column_tags oe_kanban_global_click o_res_partner_kanban">
<div class="oe_kanban_global_click o_res_partner_kanban">
<div class="o_kanban_tags_section oe_kanban_partner_categories"/>
<div class="o_kanban_image">
<t t-if="record.image.raw_value">