From 259695a1c73353dac8e867e9d633912c08c95cbd Mon Sep 17 00:00:00 2001 From: Maharshi Patel Date: Thu, 26 Oct 2023 12:50:56 +0530 Subject: [PATCH 1/4] fix: web styles espresso - added Inter & Inter V on website and font-stack - added flex to logged-in to center avatar - decreased brand logo height to 22px - added primary border-bottom to active navbar link - added underline to links for blog content and added to from-markdown for web pages --- frappe/public/scss/common/css_variables.scss | 3 ++ frappe/public/scss/common/global.scss | 1 + frappe/public/scss/desk/css_variables.scss | 1 - frappe/public/scss/website/blog.scss | 3 ++ frappe/public/scss/website/index.scss | 1 + frappe/public/scss/website/markdown.scss | 3 ++ frappe/public/scss/website/navbar.scss | 34 ++++++++++++++++---- frappe/public/scss/website/variables.scss | 1 + frappe/website/js/website.js | 6 ++-- 9 files changed, 43 insertions(+), 10 deletions(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index 6c91eca6f9..acf40115be 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -25,6 +25,9 @@ $disabled-input-height: 22px; --btn-shadow: var(--shadow-xs); + // navbar + --navbar-height: 48px; + // SVG Colors --icon-fill: transparent; --icon-fill-bg: var(--fg-color); diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss index 525a0b921c..881dc8a19e 100644 --- a/frappe/public/scss/common/global.scss +++ b/frappe/public/scss/common/global.scss @@ -3,6 +3,7 @@ html, body { height: 100%; + font-family: var(--font-stack); font-variation-settings: "opsz" 24; } diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss index 75c46baa7d..7e8adf7459 100644 --- a/frappe/public/scss/desk/css_variables.scss +++ b/frappe/public/scss/desk/css_variables.scss @@ -10,7 +10,6 @@ --sm-width: #{map-get($grid-breakpoints, 'sm')}; --xs-width: #{map-get($grid-breakpoints, 'xs')}; - --navbar-height: 48px; diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss index 9a7f430fec..9d57108c9c 100644 --- a/frappe/public/scss/website/blog.scss +++ b/frappe/public/scss/website/blog.scss @@ -104,6 +104,9 @@ margin-bottom: 3rem; margin-top: 5rem; } + a { + text-decoration: underline; + } } .blog-comments { diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss index f6f08a2a2f..654464c6aa 100644 --- a/frappe/public/scss/website/index.scss +++ b/frappe/public/scss/website/index.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import "frappe/public/css/fonts/inter/inter.css"; @import '../common/quill'; @import '~bootstrap/scss/bootstrap'; @import '~cropperjs/dist/cropper.min'; diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss index 2b17c209cd..451b281833 100644 --- a/frappe/public/scss/website/markdown.scss +++ b/frappe/public/scss/website/markdown.scss @@ -2,6 +2,9 @@ .section-markdown > .from-markdown { max-width: 50rem; margin: auto; + a { + text-decoration: underline; + } } .from-markdown { diff --git a/frappe/public/scss/website/navbar.scss b/frappe/public/scss/website/navbar.scss index faf81f2658..5ded04328c 100644 --- a/frappe/public/scss/website/navbar.scss +++ b/frappe/public/scss/website/navbar.scss @@ -1,5 +1,22 @@ .navbar { padding: 0; + .navbar-nav { + align-items: center; + .nav-item { + height: var(--navbar-height); + display: flex; + align-items: center; + + &.active { + border-bottom: 1px solid var(--primary); + } + + .nav-link { + vertical-align: middle; + line-height: 1; + } + } + } } @media (max-width: map-get($grid-breakpoints, "lg")) { @@ -60,7 +77,7 @@ img { display: inline-block; max-width: 150px; - max-height: 25px; + max-height: 22px; } } @@ -117,9 +134,14 @@ padding-bottom: 0px; } -.logged-in > .nav-link { - max-width: 200px; - @extend .ellipsis; - max-width: 100%; - vertical-align: middle; +.logged-in { + display: flex; + justify-content: center; + align-items: center; + .nav-link { + max-width: 200px; + @extend .ellipsis; + max-width: 100%; + vertical-align: middle; + } } diff --git a/frappe/public/scss/website/variables.scss b/frappe/public/scss/website/variables.scss index 74aa8c7931..33720e6daa 100644 --- a/frappe/public/scss/website/variables.scss +++ b/frappe/public/scss/website/variables.scss @@ -11,6 +11,7 @@ $border-color: $gray-300 !default; $headings-color: $gray-900 !default; $breadcrumb-bg: transparent !default; $navbar-bg: white !default; +$navbar-height: 48px; $container-max-widths: ( sm: 540px, diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js index eb576ac4ec..c7251005d5 100644 --- a/frappe/website/js/website.js +++ b/frappe/website/js/website.js @@ -333,9 +333,9 @@ $.extend(frappe, { }, make_navbar_active: function () { var pathname = window.location.pathname; - $(".navbar-nav a.active").removeClass("active"); - $(".navbar-nav a").each(function () { - var href = $(this).attr("href"); + $(".navbar-nav li.active").removeClass("active"); + $(".navbar-nav li").each(function () { + var href = $(this.getElementsByTagName("a")).attr("href"); if (href === pathname) { $(this).addClass("active"); return false; From e4de5bf0d1e3f8ad1706c10d43866a447e0fde92 Mon Sep 17 00:00:00 2001 From: Maharshi Patel Date: Thu, 26 Oct 2023 13:11:39 +0530 Subject: [PATCH 2/4] fix: datepicker make current date bold. --- frappe/public/scss/common/datepicker.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frappe/public/scss/common/datepicker.scss b/frappe/public/scss/common/datepicker.scss index 9692a0f7b9..f60f1c25f5 100644 --- a/frappe/public/scss/common/datepicker.scss +++ b/frappe/public/scss/common/datepicker.scss @@ -39,6 +39,9 @@ &--cell { &.-current- { color: var(--text-color); + &:not(.-selected-):not(.-in-range-) { + font-weight: var(--weight-bold); + } &.-in-range- { color: var(--text-color); From f1abf04a5a2d63dc733ff27b16fd79279a26501d Mon Sep 17 00:00:00 2001 From: Maharshi Patel Date: Thu, 26 Oct 2023 13:26:18 +0530 Subject: [PATCH 3/4] fix(minor): add min-width to modified added min-width to modified so avatars column won't break --- frappe/public/scss/desk/list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss index 804e12fcef..8b4961fa46 100644 --- a/frappe/public/scss/desk/list.scss +++ b/frappe/public/scss/desk/list.scss @@ -123,6 +123,7 @@ .modified { margin-right: var(--margin-sm); + min-width: 1.5rem; } .comment-count { From 2e08741e60445beadc338a9f92f306281f952328 Mon Sep 17 00:00:00 2001 From: Maharshi Patel Date: Thu, 26 Oct 2023 15:48:26 +0530 Subject: [PATCH 4/4] fix: button size for md and lg espresso buttons don't have large size but on website large size is used so only apply espresso padding on buttons if they are not md or lg --- frappe/public/scss/common/buttons.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frappe/public/scss/common/buttons.scss b/frappe/public/scss/common/buttons.scss index d64f6b1ec9..ddc6c9fdbb 100644 --- a/frappe/public/scss/common/buttons.scss +++ b/frappe/public/scss/common/buttons.scss @@ -6,7 +6,9 @@ .btn { border: none; - padding: 4px 8px; + &:not(.btn-md):not(.btn-lg) { + padding: 4px 8px; + } border-radius: var(--border-radius); box-shadow: none; @include get_textstyle("base", "regular");