[FIX] *: fix ribbons position and size
This commit fixes the ribbons used in `kanban` and `form` views. The SCSS uses the square root of the parent `div.ribbon` to calculate its diagonal width and applies that width to the child `span`. After changing the ribbon's transform-origin, we calculate the ribbon's position based on CSS variables of the view's top padding,the height of the ribbon and the shadow's size (to avoid it being cropped by overflow-hidden). By changing the values of a few of these variables in the kanban view, we were able to remove all the specific SCSS related to ribbons in the modules. Other changes were applied inside some of the modules to make this work: - `event`: padding corrections on the kanban's cards; - `hr_holidays: replaced `margin:0` in the SCSS with negative margin utility classes on the element to achieve the same visual result; - `discuss`: moved the ribbon to the parent element; - this was also done to `discuss`, `survey` and `helpdesk`; - `crm_team_view` in `sales_team`: the ribbon's height made it overflow from the kanban's card. We fixed this by changing the value of one of the CSS variables in the view's SCSS file; - the same thing was done in `survey` and `appointment`; - `website_event_exhibitor` had some SCSS that wasn't being used because it uses `.o_ribbon` instead of `.ribbon` task-2818586 Part-of: odoo/odoo#116641
This commit is contained in:
Elisabeth Dickinson
committed by
Pierre Paridans
Pierre Paridans
parent
c4fc4af7c0
commit
80098df3dd
@@ -7,27 +7,6 @@
|
||||
}
|
||||
|
||||
.o_opportunity_kanban .o_kanban_renderer {
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-top-right {
|
||||
margin-top: -9px;
|
||||
span {
|
||||
left: 12px;
|
||||
right: 30px;
|
||||
height: 25px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.oe_kanban_card_ribbon {
|
||||
min-height: 105px;
|
||||
.o_kanban_record_title {
|
||||
|
||||
@@ -24,26 +24,6 @@
|
||||
}
|
||||
}
|
||||
.oe_kanban_card_ribbon {
|
||||
min-height: 95px;
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -1px;
|
||||
span {
|
||||
left: 7px;
|
||||
right: 30px;
|
||||
height: 25px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
// Used for "Group By"
|
||||
div.row {
|
||||
min-height: 95px;
|
||||
|
||||
@@ -141,14 +141,14 @@
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="kanban-box">
|
||||
<div t-attf-class="#{!record.active.raw_value ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click o_event_registration_kanban container-fluid p-0">
|
||||
<div t-attf-class="#{!record.active.raw_value ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click o_event_registration_kanban container-fluid">
|
||||
<div t-if="!record.active.raw_value" class="ribbon ribbon-top-right">
|
||||
<span class="text-bg-danger">Archived</span>
|
||||
</div>
|
||||
<div class="row h-100">
|
||||
<div class="col-9 pe-0">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-9">
|
||||
<div class="oe_kanban_content h-100">
|
||||
<div class="o_kanban_record_body pt-1 ps-2 h-100 d-flex flex-column">
|
||||
<div class="o_kanban_record_body h-100 d-flex flex-column">
|
||||
<b class="o_kanban_record_title"><field name="name"/></b>
|
||||
<field class="o_text_overflow" name="event_id" invisible="context.get('default_event_id')" />
|
||||
<span class="o_text_overflow" attrs="{'invisible': [('partner_id', '=', False)]}">Booked by <field name="partner_id" /></span>
|
||||
@@ -162,7 +162,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="event_attendees_kanban_icons" class="col-3 ps-0">
|
||||
<div id="event_attendees_kanban_icons" class="col-3">
|
||||
<t t-call="event_attendees_kanban_icons_desktop"/>
|
||||
<t t-call="event_attendees_kanban_icons_mobile"/>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
.o_hr_leave_form {
|
||||
.o_form_sheet {
|
||||
padding: 0!important;
|
||||
overflow: hidden;
|
||||
.ribbon-top-right {
|
||||
top: 16px;
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
.o_hr_leave_content {
|
||||
margin: 0;
|
||||
.o_group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
<field name="tz_mismatch" invisible="1"/>
|
||||
<field name="holiday_type" invisible="1"/>
|
||||
<field name="leave_type_request_unit" invisible="1"/>
|
||||
<div class="o_hr_leave_content row">
|
||||
<div class="o_hr_leave_content row my-n4 me-n4">
|
||||
<div class="o_hr_leave_column col_left col-md-6 col-12">
|
||||
<div name="title" class="o_hr_leave_title" invisible="1">
|
||||
<field name="employee_id" readonly="1" force_save="1" invisible="1"/>
|
||||
|
||||
@@ -7,27 +7,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -$o-kanban-dashboard-vpadding;
|
||||
|
||||
span {
|
||||
left: 0px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.text_top_padding{
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
@@ -62,31 +41,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_kanban_applicant {
|
||||
.o_kanban_renderer {
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: x-small;
|
||||
z-index: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -$o-kanban-dashboard-vpadding;
|
||||
|
||||
span {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_kanban_view {
|
||||
.oe_kanban_card {
|
||||
.o_kanban_state_with_padding {
|
||||
|
||||
@@ -331,7 +331,7 @@
|
||||
<t t-name="kanban-box">
|
||||
<div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click oe_applicant_kanban oe_semantic_html_override">
|
||||
<field name="date_closed" invisible="1"/>
|
||||
<div class="ribbon ribbon-top-right pe-none" attrs="{'invisible': [('date_closed', '=', False)]}">
|
||||
<div class="ribbon ribbon-top-right" attrs="{'invisible': [('date_closed', '=', False)]}">
|
||||
<span class="text-bg-success">Hired</span>
|
||||
</div>
|
||||
<span class="badge rounded-pill text-bg-danger float-end me-4" attrs="{'invisible': [('application_status', '!=', 'refused')]}">Refused</span>
|
||||
|
||||
@@ -4,26 +4,6 @@ $o-kanban-attachement-image-size: 80px;
|
||||
.o_module_desc_short {
|
||||
max-width: 90%;
|
||||
}
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: x-small;
|
||||
z-index: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: 54px;
|
||||
|
||||
span {
|
||||
top: 15px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_kanban_renderer {
|
||||
|
||||
@@ -20,18 +20,20 @@
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="kanban-box">
|
||||
<div class="o_discuss_channel_kanban oe_module_vignette oe_kanban_global_click d-flex align-items-center">
|
||||
<div class="o_discuss_channel_kanban oe_module_vignette oe_kanban_global_click">
|
||||
<div class="ribbon ribbon-top-right o_small" attrs="{'invisible': [('active', '=', True)]}">
|
||||
<span class="text-bg-danger">Archived</span>
|
||||
</div>
|
||||
<img t-att-src="kanban_image('discuss.channel', 'avatar_128', record.id.raw_value)" class="oe_module_icon" alt="Channel"/>
|
||||
<div class="oe_module_desc">
|
||||
<h4 class="o_kanban_record_title">#<field name="name"/></h4>
|
||||
<p class="oe_module_name" t-att-class="!record.active.raw_value ? 'o_module_desc_short': ''">
|
||||
<field name="description"/>
|
||||
</p>
|
||||
<button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-end" name="channel_join">Join</button>
|
||||
<button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-end" name="action_unfollow">Leave</button>
|
||||
<div class="d-flex align-items-center">
|
||||
<img t-att-src="kanban_image('discuss.channel', 'avatar_128', record.id.raw_value)" class="oe_module_icon" alt="Channel"/>
|
||||
<div class="oe_module_desc">
|
||||
<h4 class="o_kanban_record_title">#<field name="name"/></h4>
|
||||
<p class="oe_module_name" t-att-class="!record.active.raw_value ? 'o_module_desc_short': ''">
|
||||
<field name="description"/>
|
||||
</p>
|
||||
<button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-end" name="channel_join">Join</button>
|
||||
<button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-end" name="action_unfollow">Leave</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -14,22 +14,6 @@
|
||||
}
|
||||
}
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -$o-kanban-dashboard-vpadding;
|
||||
|
||||
span {
|
||||
left: 0px;
|
||||
right: 30px;
|
||||
}
|
||||
--Ribbon-wrapper-width: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
.o_survey_kanban_card {
|
||||
border-top: 0px !important;
|
||||
}
|
||||
@@ -81,54 +81,10 @@
|
||||
// Ungrouped specific
|
||||
.o_survey_kanban_card_ungrouped {
|
||||
.ribbon {
|
||||
// Desktop: finishes on next kanban card line
|
||||
height: 77px;
|
||||
width: 130px;
|
||||
--Ribbon-wrapper-width: 6rem;
|
||||
|
||||
// Mobile: is in a corner, takes more place
|
||||
@include media-breakpoint-down(md) {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
&-top-right {
|
||||
margin-top: -$o-kanban-inside-vgutter;
|
||||
right: 0;
|
||||
|
||||
& span {
|
||||
left: -8px;
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
& span {
|
||||
font-size: 1rem;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grouped specific
|
||||
.o_survey_kanban_card_grouped {
|
||||
.ribbon {
|
||||
height: 90px;
|
||||
width: 98px;
|
||||
|
||||
&-top-right {
|
||||
margin-top: -$o-kanban-inside-vgutter;
|
||||
right: 0;
|
||||
|
||||
& span {
|
||||
left: -8px;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
& span {
|
||||
font-size: 1rem;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
--Ribbon-wrapper-width: 6.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -140,7 +96,7 @@
|
||||
background-color: var(--SurveyForm__section-background-color, #DDD);
|
||||
border-top: 1px solid #BBB;
|
||||
border-bottom: 1px solid #BBB;
|
||||
|
||||
|
||||
> td {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -241,6 +241,9 @@
|
||||
o_survey_kanban_card #{record.certification.raw_value ? 'o_survey_kanban_card_certification' : ''}">
|
||||
<!-- displayed in ungrouped mode -->
|
||||
<div class="o_survey_kanban_card_ungrouped row mx-0">
|
||||
<widget name="web_ribbon" title="Archived"
|
||||
bg_color="text-bg-danger"
|
||||
attrs="{'invisible': [('active', '=', True)]}"/>
|
||||
<div class="col-lg-2 col-sm-8 py-0 my-2 my-lg-0 col-12">
|
||||
<div class="d-flex flex-grow-1 flex-column my-0 my-lg-2">
|
||||
<span class="fw-bold"><field name="title"/></span>
|
||||
@@ -324,9 +327,6 @@
|
||||
End Live Session
|
||||
</button>
|
||||
</div>
|
||||
<widget name="web_ribbon" title="Archived"
|
||||
bg_color="text-bg-danger"
|
||||
attrs="{'invisible': [('active', '=', True)]}"/>
|
||||
</div>
|
||||
<!-- displayed in grouped mode -->
|
||||
<div class="o_survey_kanban_card_grouped">
|
||||
@@ -356,7 +356,7 @@
|
||||
<a name="action_survey_user_input_certified" type="object" class="d-flex flex-column align-items-center">
|
||||
<span class="fw-bold"> <t t-esc="Math.round(record.success_ratio.raw_value)"></t> %</span>
|
||||
<span class="text-muted" >Success</span>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,17 @@
|
||||
--KanbanColumn__highlight-border: #{$o-action};
|
||||
|
||||
--o-view-nocontent-zindex: 1;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Inner components contextual adaptations
|
||||
|
||||
--Ribbon-font-size: #{$font-size-sm};
|
||||
--Ribbon-gap-top: calc(var(--KanbanRecord-padding-v) * -1 - #{$border-width});
|
||||
--Ribbon-gap-right: 0;
|
||||
--Ribbon-wrapper-width: 6.5rem;
|
||||
--Ribbon-height: calc(var(--Ribbon-font-size) * 2);
|
||||
--Ribbon-z-index: 0;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
border-top: $border-width solid var(--Kanban-background);
|
||||
|
||||
@@ -1,50 +1,57 @@
|
||||
.ribbon {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
--Ribbon-wrapper-width-default: 10rem;
|
||||
--Ribbon-wrapper-height: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
|
||||
|
||||
width: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
|
||||
height: var(--Ribbon-wrapper-height);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
& span {
|
||||
z-index: 1;
|
||||
--Ribbon-font-size-default: #{$font-size-lg};
|
||||
--Ribbon-height-default: calc(var(--Ribbon-font-size, var(--Ribbon-font-size-default)) * 2.5);
|
||||
--Ribbon-shadow-distance: .25rem;
|
||||
--Ribbon-shadow-blur: .5rem;
|
||||
--Ribbon-z-index: 1;
|
||||
|
||||
z-index: var( --Ribbon-z-index);
|
||||
position: absolute;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 225px;
|
||||
height: 48px;
|
||||
padding: 0 44px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
|
||||
color: #fff;
|
||||
font: 700 18px/1 'Lato', sans-serif;
|
||||
width: 141.421%; //Square root of 2 to get the diagonal of the parent
|
||||
height: var(--Ribbon-height, var(--Ribbon-height-default));
|
||||
box-shadow: 0 var(--Ribbon-shadow-distance) var(--Ribbon-shadow-blur) rgba(0, 0, 0, .1);
|
||||
color: $white;
|
||||
font-size: var(--Ribbon-font-size, var(--Ribbon-font-size-default));
|
||||
line-height: var(--Ribbon-height, var(--Ribbon-height-default));
|
||||
font-weight: $font-weight-bolder;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
transform-origin: left bottom;
|
||||
pointer-events: none;
|
||||
&.o_small {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-sm
|
||||
}
|
||||
&.o_medium {
|
||||
font-size: 15px;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-top-right {
|
||||
margin-top: -$o-sheet-vpadding;
|
||||
right: 0;
|
||||
--Ribbon-gap-top-default: calc(var(--formView-sheet-padding-y, 0) * -1 - #{$border-width});
|
||||
--Ribbon-gap-right-default: -#{$border-width};
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
margin-top: var(--Ribbon-gap-top, var(--Ribbon-gap-top-default));
|
||||
right: var(--Ribbon-gap-right, var(--Ribbon-gap-right-default));
|
||||
|
||||
& span {
|
||||
left: -15px;
|
||||
top: 30px;
|
||||
--Ribbon-top-position-default: calc((var(--Ribbon-height-default) * -1));
|
||||
--Ribbon-left-position-default: calc(var(--Ribbon-shadow-distance) + var(--Ribbon-shadow-blur));
|
||||
|
||||
left: var(--Ribbon-left-position, var(--Ribbon-left-position-default));
|
||||
top: var(--Ribbon-top-position, var(--Ribbon-top-position-default));
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,34 +57,6 @@
|
||||
margin: 0 -1px -1px 0;
|
||||
cursor: pointer;
|
||||
|
||||
.ribbon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
font: bold 10px Sans-Serif;
|
||||
padding: 2px 0;
|
||||
top: 10px;
|
||||
width: 70px;
|
||||
background-image: none; // not needed if colors for ribbons (Gold,Silver,Bronze) is removed in website_event_track.css
|
||||
|
||||
&.ribbon_Gold {
|
||||
background-color: #e3aa24;
|
||||
color:$white;
|
||||
}
|
||||
|
||||
&.ribbon_Silver {
|
||||
background-color: #adb5bd;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.ribbon_Bronze {
|
||||
background-color: #c7632a;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
@@ -17,27 +17,3 @@ table.o_section_list_view tr.o_data_row.o_is_section {
|
||||
border-top: 1px solid #BBB;
|
||||
border-bottom: 1px solid #BBB;
|
||||
}
|
||||
|
||||
// Ribbon specific style for channel and attendee kanban
|
||||
.o_slide_channel_kanban .o_kanban_renderer {
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: small;
|
||||
z-index: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -$o-kanban-dashboard-vpadding;
|
||||
|
||||
span {
|
||||
left: 0px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,4 @@
|
||||
.o_kanban_view .o_res_partner_kanban {
|
||||
|
||||
.ribbon {
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px;
|
||||
font-size: x-small;
|
||||
z-index: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.ribbon-top-right {
|
||||
margin-top: -$o-kanban-dashboard-vpadding;
|
||||
|
||||
span {
|
||||
top: 15px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.oe_kanban_action_a:hover > .badge {
|
||||
background-color: $o-brand-primary;
|
||||
color: white;
|
||||
|
||||
@@ -873,7 +873,7 @@ stepUtils.mobileModifier(stepUtils.autoExpandMoreButtons('.o_control_panel .brea
|
||||
}, {
|
||||
edition: "community",
|
||||
content: "wait for payment registration to succeed",
|
||||
trigger: "span.bg-success:contains('Paid')",
|
||||
trigger: "span.text-bg-success:contains('Paid')",
|
||||
auto: true,
|
||||
run() {}
|
||||
},{
|
||||
|
||||
Reference in New Issue
Block a user