[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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user