fix(styles): Style cleanups for sidebar, breadcrumb

frappe/public/js/frappe/form/form.js

@@ -1866,11 +1866,7 @@ frappe.ui.form.Form = class FrappeForm {
 	}
 
 	get_title() {
-		if (this.meta.title_field) {
-			return this.doc[this.meta.title_field];
-		} else {
-			return String(this.doc.name);
-		}
+		return frappe.model.get_doc_title(this.doc);
 	}
 
 	get_selected() {

frappe/public/js/frappe/form/templates/form_sidebar.html

@@ -46,7 +46,6 @@
 	<div>
 		<span class="form-sidebar-items">
 			<span class="add-assignment-label">
-				<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
 				<span class="ellipsis">{%= __("Assigned To") %}</span>
 			</span>
 			<button class="add-assignment-btn btn btn-link icon-btn">
@@ -60,9 +59,6 @@
 	<div class="attachments-actions">
 		<span class="form-sidebar-items">
 			<span>
-				<svg class="es-icon ml-0 icon-sm">
-					<use href="#es-line-attachment"></use>
-				</svg>
 				<a class="pill-label ellipsis explore-link">
 					{%= __("Attachments") %}
 				</a>
@@ -73,9 +69,6 @@
 		</span>
 	</div>
 	<a class="show-all-btn hidden" href="">
-		<svg class="es-icon icon-sm">
-			<use href="#es-line-preview"></use>
-		</svg>
 		<span class="pill-label ellipsis">
 			{%= __("Show All") %}
 		</span>
@@ -85,7 +78,6 @@
 	<div class="reviews">
 		<span class="form-sidebar-items">
 			<span>
-				<svg class="es-icon ml-0 icon-sm"><use href="#es-line-star"></use></svg>
 				<span class="ellipsis">{%= __("Reviews") %}</span>
 			</span>
 			<button class="add-review-btn btn btn-link icon-btn">
@@ -98,7 +90,6 @@
 	<div>
 		<span class="form-sidebar-items">
 			<div>
-				<svg class="es-icon ml-0 icon-sm"><use href="#es-line-tag"></use></svg>
 				<span class="tags-label ellipsis">{%= __("Tags") %}</span>
 			</div>
 		</span>
@@ -108,7 +99,6 @@
 	<div>
 		<span class="form-sidebar-items">
 			<span class="share-label">
-				<svg class="es-icon ml-0 icon-sm"><use href="#es-line-add-people"></use></svg>
 				<span class="ellipsis">{%= __("Share") %}</span>
 			</span>
 			<button class="share-doc-btn btn btn-link icon-btn">
@@ -120,9 +110,6 @@
 </div>
 <div class="sidebar-section followed-by-section hidden">
 	<div class="sidebar-label followed-by-label">
-		<svg class="icon icon-sm">
-			<use href="#icon-link-url" class="like-icon"></use>
-		</svg>
 		{%= __("Followed by") %}
 	</div>
 	<div class="followed-by"></div>
@@ -138,7 +125,7 @@
 <div class="sidebar-section hidden">
 	<a><li class="indicator blue auto-repeat-status" style="display: none;"></li></a>
 </div>
-<div class="sidebar-section text-muted">
+<div class="sidebar-section text-muted border-top mt-3 pt-3">
 	<div class="pageview-count hidden"></div>
 	<div class="created-modified-section">
 	</div>

frappe/public/js/frappe/model/model.js

@@ -630,6 +630,7 @@ $.extend(frappe.model, {
 	get_doc: function (doctype, name) {
 		if (!name) name = doctype;
 		if ($.isPlainObject(name)) {
+			// not string, filter
 			var doc = frappe.get_list(doctype, name);
 			return doc && doc.length ? doc[0] : null;
 		}
@@ -654,6 +655,18 @@ $.extend(frappe.model, {
 		}
 	},
 
+	get_doc_title(doc) {
+		if (doc.name.startsWith("new-" + doc.doctype.toLowerCase().replace(/ /g, "-"))) {
+			return __("New {0}", [__(doc.doctype)]);
+		}
+		let meta = frappe.get_meta(doc.doctype);
+		if (meta.title_field) {
+			return doc[meta.title_field];
+		} else {
+			return String(doc.name);
+		}
+	},
+
 	clear_table: function (doc, parentfield) {
 		for (const d of doc[parentfield] || []) {
 			delete locals[d.doctype][d.name];

frappe/public/js/frappe/ui/page.js

@@ -98,7 +98,7 @@ frappe.ui.Page = class Page {
 			this.add_view(
 				"main",
 				`
-				<div class="layout-main">
+				<div class="layout-main layout-two-column">
 					<div class="layout-side-section"></div>
 					<div class="layout-main-section-wrapper">
 						<div class="layout-main-section"></div>

frappe/public/js/frappe/views/breadcrumbs.js

@@ -67,10 +67,9 @@ frappe.breadcrumbs = {
 				this.set_list_breadcrumb(breadcrumbs);
 				this.set_form_breadcrumb(breadcrumbs, view);
 			} else if (breadcrumbs.doctype && view === "list") {
-				this.set_list_breadcrumb(breadcrumbs);
+				// pass
 			} else if (breadcrumbs.doctype && view == "dashboard-view") {
 				this.set_list_breadcrumb(breadcrumbs);
-				this.set_dashboard_breadcrumb(breadcrumbs);
 			}
 		}
 
@@ -202,14 +201,16 @@ frappe.breadcrumbs = {
 	set_form_breadcrumb(breadcrumbs, view) {
 		const doctype = breadcrumbs.doctype;
 		let docname = frappe.get_route().slice(2).join("/");
-		let docname_title;
-		if (docname.startsWith("new-" + doctype.toLowerCase().replace(/ /g, "-"))) {
-			docname_title = __("New {0}", [__(doctype)]);
-		} else {
-			docname_title = __(docname);
-		}
+		let doc = frappe.get_doc(doctype, docname);
+
+		if (doc.__islocal) return; // new doc, no breadcrumb required
+
+		let title = frappe.model.get_doc_title(doc);
+
+		if (title == doc.name) return; // title and name are same, don't add breadcrumb
+
 		let form_route = `/app/${frappe.router.slug(doctype)}/${encodeURIComponent(docname)}`;
-		this.append_breadcrumb_element(form_route, docname_title);
+		this.append_breadcrumb_element(form_route, doc.name);
 
 		if (view === "form") {
 			let last_crumb = this.$breadcrumbs.find("li").last();

frappe/public/scss/desk/breadcrumb.scss

@@ -2,15 +2,14 @@
 	padding-left: 0;
 	padding-right: 0;
 	background-color: white;
-	@include get_textstyle("sm", "regular");
 }
 /*! This comment will be included even in compressed mode. */
 #navbar-breadcrumbs {
-	@include get_textstyle("sm", "regular");
 	a {
 		margin-right: 10px;
 		&:before {
-			content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
+			// content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
+			content: "/";
 			display: inline-block;
 			margin-right: 10px;
 		}
@@ -23,8 +22,11 @@
 
 	li.disabled {
 		a {
-			color: var(--gray-600);
 			pointer-events: none;
 		}
 	}
+
+	li:last-child {
+		font-weight: var(--weight-semibold);
+	}
 }

frappe/public/scss/desk/css_variables.scss

@@ -3,12 +3,12 @@
 :root,
 [data-theme="light"] {
 	// breakpoints
-	--xxl-width: #{map-get($grid-breakpoints, "2xl")};
-	--xl-width: #{map-get($grid-breakpoints, "xl")};
-	--lg-width: #{map-get($grid-breakpoints, "lg")};
-	--md-width: #{map-get($grid-breakpoints, "md")};
-	--sm-width: #{map-get($grid-breakpoints, "sm")};
-	--xs-width: #{map-get($grid-breakpoints, "xs")};
+	--xxl-width: 1440px;
+	--xl-width: 1200px;
+	--lg-width: 992px;
+	--md-width: 768px;
+	--sm-width: 567px;
+	--xs-width: 0;
 
 	--appreciation-color: var(--green-600);
 	--appreciation-bg: var(--green-100);

frappe/public/scss/desk/form.scss

@@ -131,7 +131,6 @@
 .control-label,
 .grid-heading-row {
 	color: var(--text-muted);
-	@include get_textstyle("sm", "regular");
 }
 
 .control-label {

frappe/public/scss/desk/mobile.scss

@@ -175,10 +175,6 @@ body {
 		border-right-color: transparent !important;
 	}
 
-	.layout-side-section {
-		max-width: 0px;
-	}
-
 	// listviews
 	.select-like {
 		margin-right: unset !important;

frappe/public/scss/desk/page.scss

@@ -25,7 +25,7 @@
 		}
 	}
 
-	@include media-breakpoint-up(md) {
+	@media (min-width: 992px) {
 		// only for small screens
 		.sidebar-toggle-btn {
 			display: none;
@@ -93,7 +93,7 @@
 }
 
 .layout-main-section-wrapper {
-	width: 100%;
+	flex-grow: 1;
 }
 
 .layout-main-section.frappe-card {

frappe/public/scss/desk/sidebar.scss

@@ -5,6 +5,7 @@
 	--sidebar-border-color: #ededed;
 	--surface-modal: rgba(255, 255, 255, 1);
 	--divider-color: rgba(237, 237, 237, 1);
+	--sidebar-width: 220px;
 }
 [data-theme="dark"] {
 	--sidebar-hover-color: rgba(43, 43, 43, 1);
@@ -247,7 +248,7 @@ body {
 	.body-sidebar {
 		// make it an overlay on hover
 		position: absolute;
-		width: 220px;
+		width: var(--sidebar-width);
 		.app-switcher-dropdown {
 			width: 204px;
 			left: 0px;
@@ -278,7 +279,7 @@ body {
 			visibility: visible;
 		}
 		.body-sidebar-bottom {
-			width: 220px;
+			width: var(--sidebar-width);
 			position: static;
 		}
 	}
@@ -286,7 +287,7 @@ body {
 	// show placeholder so that main section remains static
 	.body-sidebar-placeholder {
 		display: flex;
-		width: 220px;
+		width: var(--sidebar-width);
 	}
 }
 
@@ -309,7 +310,7 @@ body {
 		position: relative;
 		.body-sidebar {
 			padding: 8px 8px 10px 8px;
-			width: 220px;
+			width: var(--sidebar-width);
 			height: 100%;
 			position: absolute;
 			bottom: 0;
@@ -321,7 +322,7 @@ body {
 			width: 100vw;
 			height: 100%;
 			z-index: 1021;
-			left: 220px;
+			left: var(--sidebar-width);
 			overflow: auto;
 			background-color: rgba(128, 128, 128, 0.5);
 		}
@@ -428,6 +429,8 @@ body {
 }
 // form sidebar
 .form-sidebar {
+	padding-top: var(--padding-sm);
+
 	.sidebar-section {
 		.form-sidebar-items {
 			display: flex;
@@ -485,12 +488,12 @@ body {
 	}
 
 	.sidebar-image-section {
-		width: min(100%, 220px);
+		width: min(100%, var(--sidebar-width));
 		cursor: pointer;
 
 		.sidebar-image {
 			height: auto;
-			max-height: 220px;
+			max-height: var(--sidebar-width);
 			object-fit: cover;
 		}
 
@@ -543,11 +546,11 @@ body {
 .layout-side-section {
 	@include get_textstyle("sm", "regular");
 	// padding-right: 30px;
-	width: 220px;
+	min-width: var(--sidebar-width);
 	border-left: 1px solid var(--border-color);
+
 	.sidebar-section {
-		padding: var(--padding-md);
-		border-bottom: 1px solid var(--border-color);
+		padding: var(--padding-sm) var(--padding-md);
 	}
 
 	.sidebar-section:last-child {
@@ -603,7 +606,7 @@ body {
 	}
 
 	.overlay-sidebar {
-		@media (max-width: 991px) {
+		@media (max-width: 992px) {
 			margin-top: 0 !important;
 			position: fixed;
 			background: var(--fg-color);
@@ -629,7 +632,7 @@ body {
 			}
 		}
 
-		@media (max-width: 767px) {
+		@media (max-width: 768px) {
 			width: 60%;
 		}
 	}
@@ -672,6 +675,8 @@ body {
 }
 
 .list-sidebar {
+	padding-top: var(--padding-sm);
+
 	.sidebar-section a {
 		font-size: var(--text-xs);
 	}
@@ -703,7 +708,7 @@ body {
 		max-height: 300px;
 		overflow-y: auto;
 		min-width: 180px;
-		max-width: 220px;
+		max-width: var(--sidebar-width);
 		z-index: 100;
 		font-size: var(--text-sm);
 

frappe/www/list.html

@@ -22,6 +22,8 @@
 {% endif %}
 {% endblock %}
 
+{% block footer %}{% endblock %} {# no footer #}
+
 {% block page_content %}
 	{% if introduction %}<p>{{ introduction }}</p>{% endif %}
 	{% include list_template or "templates/includes/list/list.html" %}

frappe/www/list.py

@@ -216,6 +216,7 @@ def get_list(
 	ignore_permissions=False,
 	fields=None,
 	order_by=None,
+	or_filters=None,
 ):
 	meta = frappe.get_meta(doctype)
 	if not filters:
@@ -224,7 +225,8 @@ def get_list(
 	if not fields:
 		fields = "distinct *"
 
-	or_filters = []
+	if or_filters is None:
+		or_filters = []
 
 	if txt:
 		if meta.search_fields: