pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website, *: use BS mixin to have responsive font sizes

Browse Source 
*: auth_totp_portal, event, portal_rating, web, web_tour, website_blog,
   website_event, website_event_booth, website_event_sale,
   website_event_track, website_event_track_quiz, website_payment,
   website_sale, website_sale_comparison, website_slides,
   website_twitter

This commit allows to have responsive font sizes on all the Odoo
frontend. It is based on the Bootstrap mixin `font-size` which
calculates the font size based on the viewport width.

task-1958098

closes odoo/odoo#129469

Related: odoo/design-themes#673
Related: odoo/enterprise#44578
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-10-08 22:12:13 +00:00
committed by qsm-odoo
parent d464ba7c7e
commit b3a1d0f9d0
39 changed files with 78 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/auth_totp_portal/static/src/scss/auth_totp_portal.scss
+1 -1
View File
@@ -9,7 +9,7 @@
width: 100% !important;
border-radius: 5px;
border: 1px solid $primary;
font-size: $font-size-sm;
@include font-size($font-size-sm);
text-transform: uppercase;
color: $o-brand-primary;
font-weight: $badge-font-weight;
addons/event/static/src/scss/event_foldable_badge_report.scss
+2 -2
View File
@@ -8,7 +8,7 @@
}
.o_event_foldable_badge_font_small {
font-size: .8rem;
@include font-size(.8rem);
}
.o_event_foldable_badge_bottom.o_event_foldable_badge_left {
@@ -33,7 +33,7 @@
border: solid 1px #939393;
margin: 0px 8px;
padding: 10px 3px;
font-size: 1.2rem;
@include font-size(1.2rem);
box-shadow: -3px 3px 9px 0px rgba(0,0,0,0.51);
.o_event_foldable_badge_ticket_wrapper_top {
addons/event/static/src/scss/event_full_page_ticket_report.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.o_event_full_page_ticket_footer {
.o_event_full_page_ticket_powered_by {
font-size: .8rem;
@include font-size(.8rem);
line-height: 1rem;
}
}
addons/portal_rating/static/src/scss/portal_rating.scss
+1 -1
View File
@@ -33,7 +33,7 @@ $o-w-rating-star-color: #FACC2E;
.o_website_rating_table_percent {
text-align: right;
padding-left: 5px;
font-size: $font-size-sm;
@include font-size($font-size-sm);
}
.o_website_rating_table_reset {
.o_website_rating_selection_reset {
addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
+3 -3
View File
@@ -52,13 +52,13 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
thead tr:nth-child(2) th, td.cw {
background-color: var(--datepicker__thead-bg);
font-size: $font-size-sm;
@include font-size($font-size-sm);
font-weight: $font-weight-bold;
color: $o-main-text-color;
}
td {
font-size: ($font-size-base + $font-size-sm) * .5;
@include font-size(($font-size-base + $font-size-sm) * .5);
&.today:not(.active):before {
border-bottom-color: $o-brand-primary;
@@ -73,7 +73,7 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
.bootstrap-datetimepicker-widget {
.picker-switch {
font-size: $font-size-lg;
@include font-size($font-size-lg);
}
.accordion-toggle {
addons/web_tour/static/src/tour_pointer/tour_pointer.scss
+1 -1
View File
@@ -99,7 +99,7 @@ $o-tour-pointer-size-delay-in: $o-tour-pointer-duration-in - $o-tour-pointer-siz
// Force style so that it does not depend on where the tooltip is attached
line-height: $line-height-base;
font-size: $font-size-base;
@include font-size($font-size-base);
font-family: $font-family-sans-serif;
font-weight: normal;
addons/website/static/src/scss/website.scss
+8 -8
View File
@@ -575,13 +575,13 @@ font[class*='bg-'] {
background-color: #f5f5f5;
border: 1px solid #dddddd;
color: #666666;
font-size: 14px;
@include font-size(14px);
padding: 4px;
}
table.table_desc tr td {
text-align: left;
padding: 5px;
font-size: 13px;
@include font-size(13px);
&:first-child {
width: 25%;
font-weight: bold;
@@ -687,7 +687,7 @@ table.table_desc tr td {
.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
background-color: rgba(0,0,0,0);
font-size: 2rem;
@include font-size(2rem);
color: #fff;
text-shadow: $box-shadow-sm;
}
@@ -715,7 +715,7 @@ table.table_desc tr td {
width: 2rem;
height: 6rem;
line-height: 6rem;
font-size: 1.5rem;
@include font-size(1.5rem);
}
// Indicators
.carousel-indicators li {
@@ -742,7 +742,7 @@ table.table_desc tr td {
height: 4rem;
line-height: 4rem;
border-radius: 50%;
font-size: 1.25rem;
@include font-size(1.25rem);
}
// Indicators
.carousel-indicators li {
@@ -774,7 +774,7 @@ table.table_desc tr td {
width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.25rem;
@include font-size(1.25rem);
}
// Indicators
.carousel-indicators li {
@@ -904,7 +904,7 @@ $-transition-duration: 200ms;
&.o_header_is_scrolled {
.navbar-brand {
font-size: $o-theme-navbar-fixed-logo-height / $line-height-base;
@include font-size($o-theme-navbar-fixed-logo-height / $line-height-base);
img {
height: $o-theme-navbar-fixed-logo-height;
@@ -1640,7 +1640,7 @@ span.list-inline-item.o_add_language:last-child {
$ribbon-padding: 100px;
.o_ribbon {
margin: 0;
font-size: 1rem;
@include font-size(1rem);
font-weight: bold;
white-space: nowrap;
text-align: center;
addons/website/static/src/scss/website.ui.scss
+2 -2
View File
@@ -8,7 +8,7 @@ $-mini-nav-size: 40px;
.o_frontend_to_backend_nav {
@include o-position-absolute(0, auto, auto, 0);
z-index: $zindex-modal;
font-size: $o-font-size-base;
@include font-size($o-font-size-base);
&::before {
content: "";
@@ -40,7 +40,7 @@ $-mini-nav-size: 40px;
}
.o_frontend_to_backend_apps_menu {
font-size: $o-font-size-base;
@include font-size($o-font-size-base);
max-height: 70vh;
overflow: auto;
}
addons/website/static/src/snippets/s_alert/000.scss
+3 -3
View File
@@ -10,15 +10,15 @@
}
&.s_alert_sm {
padding: $grid-gutter-width/3;
font-size: $font-size-sm;
@include font-size($font-size-sm);
}
&.s_alert_md {
padding: $grid-gutter-width/2;
font-size: $font-size-base;
@include font-size($font-size-base);
}
&.s_alert_lg {
padding: $grid-gutter-width;
font-size: $font-size-lg;
@include font-size($font-size-lg);
}
.s_alert_icon {
float: left;
addons/website/static/src/snippets/s_badge/000.scss
+1 -1
View File
@@ -3,7 +3,7 @@
padding: $s-badge-padding;
margin: $s-badge-margin;
border-radius: if($s-badge-border-radius != null, $s-badge-border-radius, $badge-border-radius);
font-size: $font-size-sm;
@include font-size($font-size-sm);
.fa {
margin: $s-badge-i-margin;
}
addons/website/static/src/snippets/s_blockquote/000.scss
+1 -1
View File
@@ -3,7 +3,7 @@
border: 0;
padding: 0;
.s_blockquote_icon {
font-size: $font-size-base;
@include font-size($font-size-base);
}
.s_blockquote_author {
opacity: .75;
addons/website/static/src/snippets/s_faq_collapse/000.scss
+1 -1
View File
@@ -72,7 +72,7 @@
border: 0;
.card-header {
background-color: transparent;
font-size: $font-size-lg * 1.5;
@include font-size($font-size-lg * 1.5);
&:before {
content:'\f068';
}
addons/website/static/src/snippets/s_image_gallery/001.scss
+3 -3
View File
@@ -181,10 +181,10 @@
border: 1px solid $gray-500;
}
.fa:before {
font-size: 1.25rem;
@include font-size(1.25rem);
}
.oi:before {
font-size: 0.75rem;
@include font-size(0.75rem);
}
}
}
@@ -204,7 +204,7 @@
.fa:before, .oi:before {
color: black;
background: white;
font-size: 1.25rem;
@include font-size(1.25rem);
border-radius: 50%;
padding: 1.25rem;
border: 1px solid $gray-500;
addons/website/static/src/snippets/s_popup/000.scss
+3 -3
View File
@@ -30,7 +30,7 @@
cursor: pointer;
text-align: center;
z-index: 1;
font-size: $popup-close-size;
@include font-size($popup-close-size);
}
&.s_popup_center {
@@ -48,7 +48,7 @@
}
}
.s_popup_close {
font-size: 60px;
@include font-size(60px);
margin: 10px;
background: none;
box-shadow: none;
@@ -89,7 +89,7 @@
left: 0;
.s_popup_close {
box-shadow: none;
font-size: 60px;
@include font-size(60px);
margin: 10px;
background: none;
}
addons/website/static/src/snippets/s_popup/001.scss
+1 -1
View File
@@ -16,7 +16,7 @@
@include o-bg-color(color-contrast(o-color('primary')), o-color('primary'), $with-extras: false);
box-shadow: $box-shadow-sm;
cursor: pointer;
font-size: $font-size-lg;
@include font-size($font-size-lg);
text-align: center;
}
addons/website/static/src/snippets/s_product_list/000.scss
+2 -2
View File
@@ -28,14 +28,14 @@
> .btn {
width: 100%;
padding: 5px !important;
font-size: 16px;
@include font-size(16px);
@media only screen and (max-width : 1280px) { // FIXME
font-size: 12px;
}
.fa {
font-size: 18px;
@include font-size(18px);
padding-right: 5px;
@media only screen and (max-width : 1024px) { // FIXME
addons/website/static/src/snippets/s_rating/000.scss
+3 -3
View File
@@ -49,7 +49,7 @@
}
}
}
> .s_rating_1x { .fa { font-size: 1em; }; }
> .s_rating_2x { .fa { font-size: 2em; }; }
> .s_rating_3x { .fa { font-size: 3em; }; }
> .s_rating_1x { .fa { @include font-size(1em); }; }
> .s_rating_2x { .fa { @include font-size(2em); }; }
> .s_rating_3x { .fa { @include font-size(3em); }; }
}
addons/website/static/src/snippets/s_showcase/001.scss
+1 -1
View File
@@ -41,6 +41,6 @@
.s_showcase_icon {
// Make the default margin the one for the left aligned icon, as it's what we want on mobile
margin-right: 15px;
font-size: 36px;
@include font-size(36px);
}
}
addons/website/static/src/snippets/s_website_form/001.scss
+2 -2
View File
@@ -45,7 +45,7 @@
}
span.s_website_form_mark {
font-size: 0.85em;
@include font-size(0.85em);
font-weight: 400;
}
@@ -70,7 +70,7 @@
div.o_file_wrap {
border: 1px solid $o-gray-400;
border-radius: 0.25rem;
font-size: 0.9em;
@include font-size(0.9em);
line-height: normal;
div.o_file_name {
addons/website_blog/static/src/scss/website_blog.scss
+3 -3
View File
@@ -74,7 +74,7 @@ $o-wblog-loader-size: 50px;
// menu. The aim is to be able to write simple articles on the fly,
// achieving a good design without being forced to use snippets.
.o_wblog_read_text {
font-size: 18px;
@include font-size(18px);
font-weight: 300;
}
@@ -98,7 +98,7 @@ $o-wblog-loader-size: 50px;
width: 3em;
height: 3em;
> i {
font-size: 1.3em;
@include font-size(1.3em);
}
}
@@ -245,7 +245,7 @@ $o-wblog-loader-size: 50px;
.o_wblog_normalize_font {
// normalize fonts
font-size: 13px;
@include font-size(13px);
line-height: 1.45;
}
addons/website_blog/static/src/snippets/s_blog_posts/000.scss
+3 -3
View File
@@ -6,7 +6,7 @@
}
.s_blog_posts_post_subtitle {
font-size: 1em;
@include font-size(1em);
}
&.s_blog_post_list {
@@ -19,7 +19,7 @@
}
.s_blog_posts_post_title {
font-size: 1.25em;
@include font-size(1.25em);
}
}
@@ -279,7 +279,7 @@
}
h4 {
font-size: 19px;
@include font-size(19px);
font-weight: 600;
}
addons/website_event/static/src/scss/event_templates_list.scss
+2 -2
View File
@@ -65,12 +65,12 @@
color: $o-wevent-color;
.o_wevent_event_day {
font-size: 1.125rem;
@include font-size(1.125rem);
font-weight: 300;
line-height: 1;
}
.o_wevent_event_month {
font-size: 0.75rem;
@include font-size(0.75rem);
font-weight: $font-weight-bold;
text-transform: uppercase;
}
addons/website_event/static/src/snippets/s_events/000.scss
+3 -3
View File
@@ -5,7 +5,7 @@
}
.s_events_event_subtitle {
font-size: $font-size-base;
@include font-size($font-size-base);
}
&.s_event_event_picture {
@@ -69,12 +69,12 @@
text-align: center;
.s_events_event_month {
font-size: $font-size-sm;
@include font-size($font-size-sm);
font-weight: $font-weight-bold;
text-transform: uppercase;
}
.s_events_event_day {
font-size: $font-size-lg;
@include font-size($font-size-lg);
font-weight: $font-weight-light;
}
}
addons/website_event_booth/static/src/scss/website_event_booth.scss
+1 -1
View File
@@ -58,7 +58,7 @@ label.o_wbooth_category_unavailable {
top: -16px;
right: -16px;
background-color: $o-wevent-bg-color-base;
font-size: 2em;
@include font-size(2em);
text-align: center;
}
addons/website_event_sale/static/src/scss/website_event_sale_templates.scss
-3
View File
@@ -10,7 +10,4 @@
.dropdown-toggle:hover {
text-decoration: underline;
}
.dropdown-item {
font-size: small;
}
}
addons/website_event_track/static/src/scss/event_track_templates.scss
+2 -5
View File
@@ -45,7 +45,7 @@
&.active {
td.active {
padding: 0em 0.5em;
font-size: smaller;
font-size: 0.81em;
border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
}
}
@@ -99,7 +99,7 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: xx-small;
font-size: 0.55em;
padding: 0.2em 0.5em;
border-radius: 1em;
line-height: 10px;
@@ -165,9 +165,6 @@
*/
.o_wevent_event {
.o_we_track_day_header {
& > div > span.h1 {
font-size: xx-large;
}
a.collapsed {
transform: rotate(-90deg);
}
addons/website_event_track/static/src/scss/pwa_frontend.scss
+1 -1
View File
@@ -20,7 +20,7 @@
background-color: rgba(255, 255, 255, 1);
border-top: 1px solid $gray-200;
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
font-size: 1rem;
@include font-size(1rem);
z-index: $zindex-tooltip;
.o_btn_close {
addons/website_event_track/views/event_track_templates_agenda.xml
+1 -1
View File
@@ -79,7 +79,7 @@
<!-- DAY HEADER -->
<div class="o_we_track_day_header mt-3 w-100 d-flex justify-content-between align-items-center">
<div class="d-flex">
<span class="h1 m-0 fw-bold" t-out="day"
<span class="h2 m-0 fw-bold" t-out="day"
t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
<div class="d-flex flex-column ms-2">
<span class="fw-bold" t-out="day"
addons/website_event_track/views/event_track_templates_list.xml
+1 -1
View File
@@ -170,7 +170,7 @@
<!-- DAY HEADER -->
<div class="o_we_track_day_header d-flex">
<div class="d-flex flex-grow-1" t-if="tracks_date">
<span class="h1 m-0 fw-bold" t-out="tracks_date"
<span class="h2 m-0 fw-bold" t-out="tracks_date"
t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
<div class="d-flex ms-3 me-2 flex-column">
<span class="fw-bold" t-out="tracks_date"
addons/website_event_track_quiz/static/src/scss/event_quiz.scss
+1 -1
View File
@@ -32,7 +32,7 @@ $o-wslides-fs-side-width: 300px;
.o_quiz_js_quiz_question {
.list-group-item {
font-size: 1rem;
@include font-size(1rem);
input:checked + i.fa-circle {
color: $primary !important;
addons/website_payment/static/src/snippets/s_donation/000.scss
+1 -1
View File
@@ -36,7 +36,7 @@
padding: 0.5rem 1rem;
color: color-contrast(o-color('primary'));
background: map-get($theme-colors, 'primary');
font-size: 1.15rem;
@include font-size(1.15rem);
border-radius: 0.3rem;
transform: translateX(-50%);
addons/website_sale/static/src/scss/product_configurator.scss
+3 -3
View File
@@ -128,7 +128,7 @@ label.css_attribute_color.css_not_available {
.attribute_name {
display: flex;
align-items: center;
font-size: 0.9rem;
@include font-size(0.9rem);
text-transform: uppercase;
padding-bottom: 0.5rem;
@@ -161,7 +161,7 @@ label.css_attribute_color.css_not_available {
}
.sign_badge_price_extra {
font-size: 1.1rem;
@include font-size(1.1rem);
}
}
}
@@ -218,7 +218,7 @@ label.css_attribute_color.css_not_available {
}
.o_total_row {
font-size: 1.2rem;
@include font-size(1.2rem);
}
}
addons/website_sale/static/src/scss/website_sale.scss
+4 -4
View File
@@ -137,7 +137,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
h1[itemprop="name"] {
font-size: $h3-font-size;
@include font-size($h3-font-size);
font-weight: $font-weight-bold;
}
@@ -517,7 +517,7 @@ a.no-decoration {
line-height: 2.5rem;
color: map-get($grays, '900');
background: white;
font-size: 1.15rem;
@include font-size(1.15rem);
border: 1px solid map-get($grays, '400');
border-radius: 50%;
}
@@ -727,7 +727,7 @@ a.no-decoration {
// customer reviews
.o_product_page_reviews_title {
.fa {
font-size: 1.4rem;
@include font-size(1.4rem);
color: map-get($theme-colors, 'primary');
&:before {
@@ -744,7 +744,7 @@ a.no-decoration {
#o_product_page_reviews_content {
.o_website_rating_avg {
h1 {
font-size: 3.5rem;
@include font-size(3.5rem);
}
}
.o_portal_chatter_composer {
addons/website_sale/static/src/scss/website_sale_frontend.scss
+2 -2
View File
@@ -64,7 +64,7 @@ $o-wsale-wizard-label-completed: $success;
.progress-wizard-steplabel {
color: $o-wsale-wizard-label-default;
margin: 5px 0 5px 5px;
font-size: $font-size-base;
@include font-size($font-size-base);
display: inline-block;
@include media-breakpoint-up(md) {
@@ -111,7 +111,7 @@ $o-wsale-wizard-label-completed: $success;
color: $o-wsale-wizard-dot-completed;
text-align: center;
line-height: 1;
font-size: $tmp-check-size;
@include font-size($tmp-check-size);
font-family: FontAwesome;
content: "\f058";
addons/website_sale/views/templates.xml
+1 -1
View File
@@ -237,7 +237,7 @@
<div class="dropdown-menu" role="menu">
<t t-foreach="website_sale_pricelists" t-as="pl">
<a role="menuitem" t-att-href="'/shop/change_pricelist/%s' % pl.id" class="dropdown-item">
<span class="switcher_pricelist" t-att-data-pl_id="pl.id" t-esc="pl.name" />
<span class="switcher_pricelist small" t-att-data-pl_id="pl.id" t-esc="pl.name" />
</a>
</t>
</div>
addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss
+2 -2
View File
@@ -17,7 +17,7 @@
.o_product_text {
text-transform: uppercase;
vertical-align: middle;
font-size: 16px;
@include font-size(16px);
}
.o_product_circle {
vertical-align: 6px;
@@ -60,6 +60,6 @@
border-top: 1px solid map-get($grays, '400');
.o_add_compare_dyn {
font-size: 1.1rem;
@include font-size(1.1rem);
}
}
addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
-2
View File
@@ -127,8 +127,6 @@
.o_wslides_js_lesson_quiz_question {
.list-group-item {
font-size: 1rem;
input:checked + i.fa-circle {
color: $primary !important;
}
addons/website_slides/static/src/scss/website_slides.scss
+3 -5
View File
@@ -121,8 +121,6 @@ $line-height-truncate: 1.25em;
top: -40px;
@include media-breakpoint-up(lg) {
font-size: 1rem;
.o_wslides_nav_navbar_right {
padding-left: $spacer;
margin-left: auto;
@@ -167,7 +165,7 @@ $line-height-truncate: 1.25em;
.o_wslides_js_lesson_quiz_question {
.list-group-item {
font-size: 1rem;
@include font-size(1rem);
input:checked + i.fa-circle {
color: $primary !important;
@@ -231,7 +229,7 @@ $line-height-truncate: 1.25em;
}
.o_wslides_channel_completion_completed {
font-size: 1rem;
@include font-size(1rem);
}
// New home page
@@ -708,7 +706,7 @@ li.o_wslides_fs_sidebar_list_item.active {
background-color: #875A7B;
padding:5px 15px;
font-weight:bold;
font-size:13px;
@include font-size(13px);
}
.tooltip > .arrow {
addons/website_twitter/static/src/scss/website_twitter.scss
+4 -4
View File
@@ -22,7 +22,7 @@
border: 1px solid #ccc;
max-width: 500px;
width: 500px;
font-size: 0.8em;
@include font-size(0.8em);
padding-top: 12px;
padding-right: 10px;
padding-bottom: 12px;
@@ -58,7 +58,7 @@
}
}
h4 {
font-size: 14px;
@include font-size(14px);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
color: #000;
@@ -70,7 +70,7 @@
span {
color: #ccc;
font-weight: bold;
font-size: 14px;
@include font-size(14px);
}
}
p {
@@ -88,7 +88,7 @@
.right .bottom p {
margin-top: -65px;
margin-left: 70px;
font-size: 12px;
@include font-size(12px);
word-break: break-word;
}
&:hover {