Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[14.0][IMP] shopfloor_delivery_shipment_mobile: have long package name fit on one line #688

Merged
merged 2 commits into from
Nov 22, 2023
Merged

[14.0][IMP] shopfloor_delivery_shipment_mobile: have long package name fit on one line #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e73cd0f
sf_mobile_base: improve detail card title cusomization
TDu Jul 26, 2023
61fa0b1
sf_delivery_shipment_mobile: make package name smaller
TDu Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions shopfloor_delivery_shipment_mobile/static/wms/src/scenario/delivery_shipment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,8 @@ const DeliveryShipment = {
key_title: "name",
on_title_action: action,
title_action_icon: "mdi-upload",
// This helps having the transporter package fit in one line
title_class: "v-card__title-smaller",
};
},
pack_color: function (pack) {
Expand Down
2 changes: 1 addition & 1 deletion shopfloor_mobile_base/static/wms/src/components/detail/detail_card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Vue.component("item-detail-card", {
template: `
<div :class="wrapper_klass">
<v-card :color="card_color" tile :class="{'theme--dark': opts.theme_dark, 'main': opts.main, 'no-outline': opts.no_outline}" v-if="!_.isEmpty(record)">
<v-card-title v-if="!opts.no_title">
<v-card-title v-if="!opts.no_title" :class="opts.title_class">
<slot name="title">
<v-icon v-if="opts.title_icon" v-text="opts.title_icon" class="mr-2" />
<span v-text="_.result(record, opts.key_title)" />
Expand Down
4 changes: 4 additions & 0 deletions shopfloor_mobile_base/static/wms/src/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,10 @@ main.v-content > .v-content__wrap > .header .container {
line-height: 1.1rem;
}

.v-card .v-card__title-smaller {
font-size: 0.9rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this does not ensure the name fits... no?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No but it is more likely. Maybe the name of the pr should be changed ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TDu Can you try with something similar to this exemple: https://jsfiddle.net/hymbof7o/

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know about the vw unit. It stands for View Width (1vw is 1% of the width of the viewport). That will not help.
As for the whitespace: nowrap; it will not wrap the text to the next line, but it will not dynamically resize the content to fit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have we considered @container?
https://developer.mozilla.org/en-US/docs/Web/CSS/@container

}

/* TODO: likely to be applied to all */
.list .v-list-item {
border-bottom: 1px solid #ccc;
Expand Down
Loading