fix: web styles espresso (backport #22924) (#22933)

* 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 (cherry picked from commit 259695a) * fix: datepicker make current date bold. (cherry picked from commit e4de5bf) * fix(minor): add min-width to modified added min-width to modified so avatars column won't break (cherry picked from commit f1abf04) * 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 (cherry picked from commit 2e08741) --------- Co-authored-by: Maharshi Patel <maharshi.patel988@gmail.com>
frappe · Oct 30, 2023 · b2c6f07 · b2c6f07
1 parent 8e8274e
commit b2c6f07
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 11 deletions.
diff --git 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");

diff --git 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/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);

diff --git 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
@@ -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/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 {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;