Website Offcanvas Sidebar

frappe/patches/v5_0/style_settings_to_website_theme.py

@@ -9,15 +9,19 @@ def execute():
 	frappe.delete_doc("website", "doctype", "style_settings")
 
 def migrate_style_settings():
-	style_settings = frappe.get_doc("Style Settings", "Style Settings")
+	style_settings = frappe.db.get_singles_dict("Style Settings")
 	standard_website_theme = frappe.get_doc("Website Theme", "Standard")
 
 	website_theme = frappe.copy_doc(standard_website_theme)
 	website_theme.custom = 1
 	website_theme.theme = _("Custom")
 
-	map_color_fields(style_settings, website_theme)
-	map_other_fields(style_settings, website_theme)
+	if style_settings:
+		map_color_fields(style_settings, website_theme)
+		map_other_fields(style_settings, website_theme)
+
+	website_settings = frappe.get_doc("Website Settings", "Website Settings")
+	website_theme.no_sidebar = website_settings.no_sidebar
 
 	website_theme.save()
 	website_theme.use_theme()
@@ -28,8 +32,6 @@ def map_color_fields(style_settings, website_theme):
 		"page_links": "link_color",
 		"top_bar_background": "top_bar_color",
 		"top_bar_foreground": "top_bar_text_color",
-		"page_header_background": "page_header_color",
-		"page_header_color": "page_header_text_color",
 		"footer_background": "footer_color",
 		"footer_color": "footer_text_color",
 	}

frappe/public/build.json

@@ -1,6 +1,7 @@
 {
 	"css/frappe-web.css": [
 		"public/css/font-awesome.css",
+		"public/css/octicons/octicons.css",
 		"public/css/nprogress.css",
 		"public/css/website.css"
 	],

frappe/public/css/desk.css

@@ -1,20 +1,3 @@
-html {
-  min-height: 100%;
-}
-body {
-  height: 100%;
-  margin: 0px;
-  padding: 0px !important;
-}
-html,
-body {
-  overflow-x: hidden;
-  /* Prevent scroll on narrow devices */
-}
-.desk-main-section-overlay {
-  display: none;
-  cursor: pointer;
-}
 a,
 a:hover,
 a:active,

frappe/public/css/form.css

@@ -146,3 +146,8 @@
     padding-right: 15px;
   }
 }
+select.form-control {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

frappe/public/css/mobile.css

@@ -1,3 +1,54 @@
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+  overflow-x: hidden;
+  /* Prevent scroll on narrow devices */
+  margin: 0px;
+  padding: 0px !important;
+}
+.offcanvas-main-section-overlay {
+  display: none;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.sidebar-padding {
+  padding: 12px 14px;
+}
+.offcanvas .sidebar .sidebar-menu > li > a,
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding: 12px 14px;
+  display: block;
+  whitespace: nowrap;
+  transition: 0.2s;
+  text-decoration: none !important;
+}
+.offcanvas .sidebar .dropdown-menu {
+  padding: 0px;
+  font-size: inherit;
+}
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding-left: 28px;
+}
+.offcanvas .sidebar .divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: #ebeff2;
+  width: 100%;
+  margin: 0px;
+}
+.offcanvas .sidebar .badge {
+  right: 15px !important;
+  top: 11px !important;
+}
+.offcanvas .sidebar .sidebar-menu > li > a:hover,
+.offcanvas .sidebar .dropdown-menu > li > a:hover,
+.offcanvas .sidebar .sidebar-menu > li > a:focus,
+.offcanvas .sidebar .dropdown-menu > li > a:focus,
+.offcanvas .sidebar .sidebar-menu > li > a:active,
+.offcanvas .sidebar .dropdown-menu > li > a:active {
+  background-color: #f0f4f7;
+}
 @media (max-width: 767px) {
   .modal .modal-dialog {
     margin: 0px;
@@ -21,6 +72,25 @@
   .modal .modal-body .form-layout {
     margin: -15px;
   }
+  .modal .file-upload .input-upload {
+    width: 100%;
+    text-align: center;
+  }
+  .modal .file-upload .input-upload .btn-browse {
+    width: 100%;
+  }
+  .modal .file-upload .web-link-wrapper {
+    display: block;
+    width: 100% !important;
+    text-align: center;
+  }
+  .modal .file-upload .web-link-wrapper .file-upload-or {
+    display: block;
+    margin: 15px 24px;
+  }
+  .modal .file-upload .web-link-wrapper .input-link {
+    width: 100% !important;
+  }
   .layout-main-section-wrapper {
     padding: 0px;
   }
@@ -249,13 +319,13 @@
   .offcanvas {
     transition: 0.25s;
   }
-  .desk-main-section-overlay {
+  .offcanvas-main-section-overlay {
     bottom: 0;
     position: fixed;
   }
-  .desk-container,
+  .offcanvas-container,
   .offcanvas,
-  .desk-main-section {
+  .offcanvas-main-section {
     position: absolute;
     left: 0;
     right: 0;
@@ -266,8 +336,8 @@
   .offcanvas.active-right {
     position: fixed;
   }
-  .offcanvas.active-left .desk-main-section-overlay,
-  .offcanvas.active-right .desk-main-section-overlay {
+  .offcanvas.active-left .offcanvas-main-section-overlay,
+  .offcanvas.active-right .offcanvas-main-section-overlay {
     z-index: 1031;
     display: block;
     bottom: 0;

frappe/public/css/offcanvas.css

@@ -0,0 +1,51 @@
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+  overflow-x: hidden;
+  /* Prevent scroll on narrow devices */
+  margin: 0px;
+  padding: 0px !important;
+}
+.offcanvas-main-section-overlay {
+  display: none;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.sidebar-padding {
+  padding: 12px 14px;
+}
+.offcanvas .sidebar .sidebar-menu > li > a,
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding: 12px 14px;
+  display: block;
+  whitespace: nowrap;
+  transition: 0.2s;
+  text-decoration: none !important;
+}
+.offcanvas .sidebar .dropdown-menu {
+  padding: 0px;
+  font-size: inherit;
+}
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding-left: 28px;
+}
+.offcanvas .sidebar .divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: #ebeff2;
+  width: 100%;
+  margin: 0px;
+}
+.offcanvas .sidebar .badge {
+  right: 15px !important;
+  top: 11px !important;
+}
+.offcanvas .sidebar .sidebar-menu > li > a:hover,
+.offcanvas .sidebar .dropdown-menu > li > a:hover,
+.offcanvas .sidebar .sidebar-menu > li > a:focus,
+.offcanvas .sidebar .dropdown-menu > li > a:focus,
+.offcanvas .sidebar .sidebar-menu > li > a:active,
+.offcanvas .sidebar .dropdown-menu > li > a:active {
+  background-color: #f0f4f7;
+}

frappe/public/css/sidebar.css

@@ -1,50 +1,77 @@
-.hide-form-sidebar .form-sidebar {
-  display: none !important;
-}
-body[data-route=""] .main-menu .desk-sidebar,
-body[data-route="desk"] .main-menu .desk-sidebar {
-  display: block !important;
-}
-body[data-route=""] .main-menu .form-sidebar,
-body[data-route="desk"] .main-menu .form-sidebar {
-  display: none !important;
-}
-body[data-route^="List"] .main-menu .list-sidebar {
-  display: block !important;
-}
-body[data-route^="List"] .main-menu .form-sidebar {
-  display: none !important;
-}
-body[data-route^="Module"] .main-menu .module-sidebar {
-  display: block !important;
-}
-body[data-route^="Module"] .main-menu .form-sidebar {
-  display: none !important;
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+  overflow-x: hidden;
+  /* Prevent scroll on narrow devices */
+  margin: 0px;
+  padding: 0px !important;
+}
+.offcanvas-main-section-overlay {
+  display: none;
+  cursor: pointer;
+  opacity: 0.5;
 }
 .sidebar-padding {
   padding: 12px 14px;
 }
-.offcanvas .sidebar .sidebar-menu > li > a {
+.offcanvas .sidebar .sidebar-menu > li > a,
+.offcanvas .sidebar .dropdown-menu > li > a {
   padding: 12px 14px;
   display: block;
   whitespace: nowrap;
   transition: 0.2s;
+  text-decoration: none !important;
+}
+.offcanvas .sidebar .dropdown-menu {
+  padding: 0px;
+  font-size: inherit;
+}
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding-left: 28px;
 }
 .offcanvas .sidebar .divider {
   height: 1px;
   overflow: hidden;
   background-color: #ebeff2;
   width: 100%;
+  margin: 0px;
 }
 .offcanvas .sidebar .badge {
   right: 15px !important;
   top: 11px !important;
 }
 .offcanvas .sidebar .sidebar-menu > li > a:hover,
+.offcanvas .sidebar .dropdown-menu > li > a:hover,
 .offcanvas .sidebar .sidebar-menu > li > a:focus,
-.offcanvas .sidebar .sidebar-menu > li > a:active {
+.offcanvas .sidebar .dropdown-menu > li > a:focus,
+.offcanvas .sidebar .sidebar-menu > li > a:active,
+.offcanvas .sidebar .dropdown-menu > li > a:active {
   background-color: #f0f4f7;
 }
+.hide-form-sidebar .form-sidebar {
+  display: none !important;
+}
+body[data-route=""] .main-menu .desk-sidebar,
+body[data-route="desk"] .main-menu .desk-sidebar {
+  display: block !important;
+}
+body[data-route=""] .main-menu .form-sidebar,
+body[data-route="desk"] .main-menu .form-sidebar {
+  display: none !important;
+}
+body[data-route^="List"] .main-menu .list-sidebar {
+  display: block !important;
+}
+body[data-route^="List"] .main-menu .form-sidebar {
+  display: none !important;
+}
+body[data-route^="Module"] .main-menu .module-sidebar {
+  display: block !important;
+}
+body[data-route^="Module"] .main-menu .form-sidebar {
+  display: none !important;
+}
 .layout-side-section {
   font-size: 12px;
   padding-right: 0px;

frappe/public/css/website.css

@@ -1,7 +1,60 @@
-@media (min-width: 768px) {
-  .login-wrapper {
-    border-right: 1px solid #f2f2f2;
-  }
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+  overflow-x: hidden;
+  /* Prevent scroll on narrow devices */
+  margin: 0px;
+  padding: 0px !important;
+}
+.offcanvas-main-section-overlay {
+  display: none;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.sidebar-padding {
+  padding: 12px 14px;
+}
+.offcanvas .sidebar .sidebar-menu > li > a,
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding: 12px 14px;
+  display: block;
+  whitespace: nowrap;
+  transition: 0.2s;
+  text-decoration: none !important;
+}
+.offcanvas .sidebar .dropdown-menu {
+  padding: 0px;
+  font-size: inherit;
+}
+.offcanvas .sidebar .dropdown-menu > li > a {
+  padding-left: 28px;
+}
+.offcanvas .sidebar .divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: #ebeff2;
+  width: 100%;
+  margin: 0px;
+}
+.offcanvas .sidebar .badge {
+  right: 15px !important;
+  top: 11px !important;
+}
+.offcanvas .sidebar .sidebar-menu > li > a:hover,
+.offcanvas .sidebar .dropdown-menu > li > a:hover,
+.offcanvas .sidebar .sidebar-menu > li > a:focus,
+.offcanvas .sidebar .dropdown-menu > li > a:focus,
+.offcanvas .sidebar .sidebar-menu > li > a:active,
+.offcanvas .sidebar .dropdown-menu > li > a:active {
+  background-color: #f0f4f7;
+}
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+  overflow-x: hidden;
+  /* Prevent scroll on narrow devices */
 }
 a {
   cursor: pointer;
@@ -152,6 +205,7 @@ img {
   }
 }
 /* the element that this class is applied to, should have a max width for this to work*/
+.text-ellipsis,
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;
@@ -197,9 +251,6 @@ fieldset {
 .page-container {
   padding: 0px;
 }
-.page-content {
-  padding-bottom: 30px;
-}
 div[data-html-block="content"] {
   padding-right: 15px;
 }
@@ -212,33 +263,30 @@ div[data-html-block="content"] {
 }
 .page-sidebar {
   border-left: 1px solid #d1d8dd;
-  padding-left: 15px;
+  padding: 0px 15px;
+  position: relative;
+  left: -1px;
 }
-.sidebar-item {
+.page-sidebar .sidebar-item {
   margin: 0px;
   padding: 5px 0px;
   border: none;
   color: #8d99a6;
   font-size: 12px;
 }
-.sidebar-item:first-child {
+.page-sidebar .sidebar-item:first-child {
   padding-top: 10px;
 }
-.sidebar-item:last-child {
+.page-sidebar .sidebar-item:last-child {
   padding-bottom: 10px;
 }
-.sidebar-item a {
+.page-sidebar .sidebar-item a {
   color: #8d99a6;
 }
-.sidebar-item a.active {
+.page-sidebar .sidebar-item a.active {
   color: #000;
   font-weight: bold;
 }
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
 .page-footer {
   padding: 15px 0px;
   border-top: 1px solid #d1d8dd;
@@ -281,12 +329,6 @@ textarea {
 .post-content img {
   margin: 10px 0px;
 }
-.assigned-label,
-.event-label {
-  display: inline-block;
-  padding: .4em .6em .4em;
-  margin-bottom: 7px;
-}
 a.no-decoration {
   text-decoration: none;
   color: inherit;
@@ -310,16 +352,6 @@ a.active {
 .breadcrumb > .active {
   color: #8d99a6;
 }
-@media (max-width: 767px) {
-  .page-sidebar {
-    padding-bottom: 15px;
-    margin-bottom: 15px;
-    border-bottom: 1px solid #eee;
-  }
-  .page-sidebar .sidebar-item {
-    margin-left: 17px;
-  }
-}
 .post:last-child {
   border-bottom: none;
 }
@@ -363,3 +395,86 @@ a.text-extra-muted:focus {
   color: inherit;
   border-bottom: 1px solid #8d99a6;
 }
+.page-content {
+  min-height: 400px;
+}
+@media (max-width: 767px) {
+  .page-content {
+    min-height: 200px;
+    border-right: none !important;
+  }
+  .offcanvas {
+    transition: 0.25s;
+  }
+  .offcanvas-main-section-overlay {
+    bottom: 0;
+    position: fixed;
+  }
+  .offcanvas-container,
+  .offcanvas,
+  .offcanvas-main-section {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+  .offcanvas.active-left,
+  .offcanvas.active-right {
+    position: fixed;
+  }
+  .offcanvas.active-left .offcanvas-main-section-overlay,
+  .offcanvas.active-right .offcanvas-main-section-overlay {
+    z-index: 1031;
+    display: block;
+    bottom: 0;
+  }
+  .offcanvas.active-left {
+    -webkit-transform: translate3d(75%, 0, 0);
+    transform: translate3d(75%, 0, 0);
+  }
+  .offcanvas.active-right {
+    -webkit-transform: translate3d(-75%, 0, 0);
+    transform: translate3d(-75%, 0, 0);
+  }
+  .offcanvas .sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 75%;
+    /* 9 columns */
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 12px;
+  }
+  .offcanvas .sidebar-right {
+    left: 100%;
+    border-left: 1px solid #d1d8dd;
+  }
+  .offcanvas .sidebar-left {
+    right: 100%;
+    border-right: 1px solid #d1d8dd;
+  }
+  .offcanvas .sidebar-menu {
+    margin-bottom: 0;
+  }
+  .offcanvas ul {
+    margin: 0px;
+  }
+  .offcanvas .sidebar-page-sidebar {
+    border-top: 1px solid #d1d8dd;
+  }
+  .offcanvas .sidebar-label {
+    text-transform: uppercase;
+    color: #8d99a6;
+    font-size: 85%;
+    margin: 0px;
+    font-weight: bold;
+    padding: 10px 15px 0px;
+  }
+}
+@media (min-width: 768px) {
+  .login-wrapper {
+    border-right: 1px solid #f2f2f2;
+  }
+}

frappe/public/js/frappe/desk.js

@@ -173,7 +173,7 @@ frappe.Application = Class.extend({
 			$(".offcanvas").removeClass("active-left active-right");
 		});
 
-		$(".desk-main-section-overlay").on("click", function() {
+		$(".offcanvas-main-section-overlay").on("click", function() {
 			$(".offcanvas").removeClass("active-left active-right");
 		});
 	},

frappe/public/less/desk.less

@@ -1,26 +1,6 @@
 @import "variables.less";
 @import "mixins.less";
 
-html {
-	min-height: 100%;
-}
-
-body {
-	height: 100%;
-	margin: 0px;
-	padding: 0px !important;
-}
-
-html,
-body {
-  overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-
-.desk-main-section-overlay {
-	display: none;
-	cursor: pointer;
-}
-
 a, a:hover, a:active, a:focus {
    outline: 0;
 }

frappe/public/less/form.less

@@ -107,9 +107,9 @@
 }
 
 .timeline-item .reply {
-    margin-top: 5px;
-    // padding-left: 24px;
-    // border-left: 8px solid #d8dfe6;
+	margin-top: 5px;
+	// padding-left: 24px;
+	// border-left: 8px solid #d8dfe6;
 }
 
 .timeline-item h6, .timeline-head h6 {
@@ -186,3 +186,9 @@
 		padding-right: 15px;
 	}
 }
+
+select.form-control {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}

frappe/public/less/mobile.less

@@ -1,5 +1,6 @@
 @import "variables.less";
 @import "mixins.less";
+@import "offcanvas.less";
 
 @media(max-width: 767px) {
 	.modal {
@@ -28,6 +29,32 @@
 		.modal-body .form-layout {
 			margin: -15px;
 		}
+
+		.file-upload {
+			.input-upload {
+				width: 100%;
+				text-align: center;
+
+				.btn-browse {
+					width: 100%;
+				}
+			}
+
+			.web-link-wrapper {
+				display: block;
+				width: 100% !important;
+				text-align: center;
+
+				.file-upload-or {
+					display: block;
+					margin: 15px 24px;
+				}
+
+				.input-link {
+					width: 100% !important;
+				}
+			}
+		}
 	}
 
 	.layout-main-section-wrapper {
@@ -325,72 +352,7 @@
 		margin: 0px;
 	}
 
-	// Off Canvas
-	.offcanvas {
-		transition: 0.25s;
-	}
-
-	.desk-main-section-overlay {
-		bottom: 0;
-		position: fixed;
-	}
-
-	.desk-container,
-	.offcanvas,
-	.desk-main-section {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left,
-	.offcanvas.active-right {
-		position: fixed;
-	}
-
-	.offcanvas.active-left .desk-main-section-overlay,
-	.offcanvas.active-right .desk-main-section-overlay {
-		z-index: 1031;
-		display: block;
-		bottom: 0;
-	}
-
-	.offcanvas.active-left {
-		-webkit-transform: translate3d(75%, 0, 0);
-		transform: translate3d(75%, 0, 0);
-	}
-
-	.offcanvas.active-right {
-		-webkit-transform: translate3d(-75%, 0, 0);
-		transform: translate3d(-75%, 0, 0);
-	}
-
-	.offcanvas .sidebar {
-		position: fixed;
-		// position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 75%; /* 9 columns */
-		overflow-x: hidden;
-		overflow-y: auto;
-		font-size: 12px;
-	}
-
-	.offcanvas .sidebar-right {
-		left: 100%;
-		border-left: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-left {
-		right: 100%;
-		border-right: 1px solid @border-color;
-	}
-
-	.offcanvas .sidebar-menu {
-		margin-bottom: 0;
-	}
+	.offcanvas-mobile-mixin();
 
 	.sidebar .form-group {
 		margin-bottom: 0px;

frappe/public/less/offcanvas.less

@@ -0,0 +1,131 @@
+@import "variables.less";
+
+html,
+body {
+	height: 100%;
+	/* The html and body elements cannot have any padding or margin. */
+	overflow-x: hidden; /* Prevent scroll on narrow devices */
+	margin: 0px;
+	padding: 0px !important;
+
+}
+
+.offcanvas-main-section-overlay {
+	display: none;
+	cursor: pointer;
+	opacity: 0.5;
+}
+
+.sidebar-padding {
+	padding: 12px 14px;
+}
+
+.offcanvas .sidebar {
+	.sidebar-menu > li > a,
+	.dropdown-menu > li > a {
+		.sidebar-padding;
+		display: block;
+		whitespace: nowrap;
+		transition: 0.2s;
+		text-decoration: none !important;
+	}
+
+	.dropdown-menu {
+		padding: 0px;
+		font-size: inherit;
+	}
+
+	.dropdown-menu > li > a {
+		padding-left: 28px;
+	}
+
+	.divider {
+	    height: 1px;
+	    overflow: hidden;
+	    background-color: @navbar-default-border;
+		width: 100%;
+		margin: 0px;
+	}
+
+	.badge {
+		right: 15px !important;
+		top: 11px !important;
+	}
+}
+
+.offcanvas .sidebar .sidebar-menu > li > a&,
+.offcanvas .sidebar .dropdown-menu > li > a& {
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: @btn-bg;
+	}
+}
+
+.offcanvas-mobile-mixin() {
+	.offcanvas {
+		transition: 0.25s;
+	}
+
+	.offcanvas-main-section-overlay {
+		bottom: 0;
+		position: fixed;
+	}
+
+	.offcanvas-container,
+	.offcanvas,
+	.offcanvas-main-section {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+
+	.offcanvas.active-left,
+	.offcanvas.active-right {
+		position: fixed;
+	}
+
+	.offcanvas.active-left .offcanvas-main-section-overlay,
+	.offcanvas.active-right .offcanvas-main-section-overlay {
+		z-index: 1031;
+		display: block;
+		bottom: 0;
+	}
+
+	.offcanvas.active-left {
+		-webkit-transform: translate3d(75%, 0, 0);
+		transform: translate3d(75%, 0, 0);
+	}
+
+	.offcanvas.active-right {
+		-webkit-transform: translate3d(-75%, 0, 0);
+		transform: translate3d(-75%, 0, 0);
+	}
+
+	.offcanvas .sidebar {
+		position: fixed;
+		// position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 75%; /* 9 columns */
+		overflow-x: hidden;
+		overflow-y: auto;
+		font-size: 12px;
+	}
+
+	.offcanvas .sidebar-right {
+		left: 100%;
+		border-left: 1px solid @border-color;
+	}
+
+	.offcanvas .sidebar-left {
+		right: 100%;
+		border-right: 1px solid @border-color;
+	}
+
+	.offcanvas .sidebar-menu {
+		margin-bottom: 0;
+	}
+}

frappe/public/less/sidebar.less

@@ -1,5 +1,6 @@
 @import "variables.less";
 @import "mixins.less";
+@import "offcanvas.less";
 
 .hide-form-sidebar {
 	.form-sidebar {
@@ -32,39 +33,6 @@ body[data-route^="Module"] .main-menu {
 	.hide-form-sidebar;
 }
 
-.sidebar-padding {
-	padding: 12px 14px;
-}
-
-.offcanvas .sidebar {
-	.sidebar-menu > li > a {
-		.sidebar-padding;
-		display: block;
-		whitespace: nowrap;
-		transition: 0.2s;
-	}
-
-	.divider {
-	    height: 1px;
-	    overflow: hidden;
-	    background-color: @navbar-default-border;
-		width: 100%;
-	}
-
-	.badge {
-		right: 15px !important;
-		top: 11px !important;
-	}
-}
-
-.offcanvas .sidebar .sidebar-menu > li > a& {
-	&:hover,
-	&:focus,
-	&:active {
-		background-color: @btn-bg;
-	}
-}
-
 .layout-side-section {
 	font-size: @text-medium;
 

frappe/public/less/website.less

@@ -1,21 +1,19 @@
 @import "variables.less";
+@import "offcanvas.less";
 
-@media (min-width: 768px) {
-	.login-wrapper {
-		border-right: 1px solid #f2f2f2;
-	}
+html,
+body {
+	height: 100%;
+	/* The html and body elements cannot have any padding or margin. */
+	overflow-x: hidden; /* Prevent scroll on narrow devices */
 }
 
-// h1, h2, h3, h4, h5 {
-// 	font-weight: 400;
-// }
-
 a {
 	cursor: pointer;
 }
 
 a, a:hover, a:active, a:focus {
-   outline: 0;
+	 outline: 0;
 }
 
 img {
@@ -140,15 +138,15 @@ img {
 }
 
 .carousel-control .icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 5;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  margin-top: -10px;
-  margin-left: -10px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: 5;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	margin-top: -10px;
+	margin-left: -10px;
 }
 
 .hidden-xs-inline, .hidden-xs-inline-block {
@@ -179,6 +177,7 @@ img {
 }
 
 /* the element that this class is applied to, should have a max width for this to work*/
+.text-ellipsis,
 .ellipsis {
 	white-space: nowrap;
 	overflow: hidden;
@@ -205,14 +204,14 @@ fieldset {
 }
 
 .message-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
 	height: 100%;
-    z-index: 1040;
+		z-index: 1040;
 	background-color: #fff;
-    display: table;
+		display: table;
 }
 .message-overlay .content {
 	display: table-cell;
@@ -235,7 +234,7 @@ fieldset {
 }
 
 .page-content {
-	padding-bottom: 30px;
+
 }
 
 div[data-html-block="content"] {
@@ -250,67 +249,64 @@ div[data-html-block="content"] {
 .page-content {
 	border-right: 1px solid @border-color;
 }
+
 .page-sidebar {
 	border-left: 1px solid @border-color;
-	padding-left: 15px;
-}
-
-.sidebar-item {
-	margin: 0px;
-	padding: 5px 0px;
-	border: none;
-	color: @text-muted;
-	font-size: 12px;
-}
-
-.sidebar-item:first-child {
-	padding-top: 10px;
-}
-.sidebar-item:last-child {
-	padding-bottom: 10px;
-}
+	padding: 0px 15px;
+	position: relative;
+	left: -1px;
+
+	.sidebar-item {
+		margin: 0px;
+		padding: 5px 0px;
+		border: none;
+		color: @text-muted;
+		font-size: 12px;
+	}
 
-.sidebar-item a {
-	color: @text-muted;
-}
+	.sidebar-item:first-child {
+		padding-top: 10px;
+	}
+	.sidebar-item:last-child {
+		padding-bottom: 10px;
+	}
 
-.sidebar-item a.active {
-	color: #000;
-	font-weight: bold;
-}
+	.sidebar-item a {
+		color: @text-muted;
+	}
 
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
+	.sidebar-item a.active {
+		color: #000;
+		font-weight: bold;
+	}
 }
 
 .page-footer {
 	padding: 15px 0px;
-    border-top: 1px solid @border-color;
+		border-top: 1px solid @border-color;
 }
 
 
 /* post and post list */
 
 .web-list-item {
-    padding: 15px 0px;
+		padding: 15px 0px;
 	border-bottom: 1px solid @border-color;
 	margin-right: -30px;
 	padding-right: 30px;
 
 	h3 {
-	    margin: 0 0 5px 0;
+			margin: 0 0 5px 0;
 
 		a {
-		    color: inherit !important;
-		    text-decoration: none;
+				color: inherit !important;
+				text-decoration: none;
 		}
 	}
 }
 
 .web-list-item:last-child {
-    border-bottom: none;
+		border-bottom: none;
 }
 
 textarea {
@@ -340,12 +336,6 @@ textarea {
 	margin: 10px 0px;
 }
 
-.assigned-label, .event-label {
-	display: inline-block;
-	padding: .4em .6em .4em;
-	margin-bottom: 7px;
-}
-
 a.no-decoration {
 	text-decoration: none;
 	color: inherit;
@@ -357,7 +347,7 @@ a.active {
 }
 
 :target {
-   background-color: #ffa;
+	 background-color: #ffa;
 }
 
 .page-breadcrumbs .breadcrumb {
@@ -375,18 +365,6 @@ a.active {
 	color: @text-muted;
 }
 
-@media (max-width: 767px) {
-	.page-sidebar {
-		padding-bottom: 15px;
-		margin-bottom: 15px;
-		border-bottom: 1px solid #eee;
-	}
-
-	.page-sidebar .sidebar-item {
-		margin-left: 17px;
-	}
-}
-
 .post:last-child {
 	border-bottom: none;
 }
@@ -406,13 +384,13 @@ a.active {
 
 a.grey, .nav-pills a, .control-value a, .data-row a {
 	color: inherit;
-    border-bottom: 1px solid transparent;
-    margin-bottom: 0.4em;
+		border-bottom: 1px solid transparent;
+		margin-bottom: 0.4em;
 }
 
 a.grey:hover, .nav-pills a:hover, .control-value a:hover, .data-row a:hover {
-    border-bottom: 1px solid @grey-link-color;
-    color: @grey-link-color;
+		border-bottom: 1px solid @grey-link-color;
+		color: @grey-link-color;
 }
 
 .text-muted {
@@ -435,3 +413,42 @@ a.text-extra-muted:focus {
 	border-bottom: 1px solid @text-muted;
 }
 
+.page-content {
+	min-height: 400px;
+}
+
+@media (max-width: 767px) {
+	.page-content {
+		min-height: 200px;
+		border-right: none !important;
+	}
+
+	.offcanvas-mobile-mixin();
+
+	.offcanvas {
+		ul {
+			margin: 0px;
+		}
+
+		.sidebar-page-sidebar {
+			border-top: 1px solid @border-color;
+		}
+
+		.sidebar-label {
+			text-transform: uppercase;
+			color: @text-muted;
+			font-size: 85%;
+			margin: 0px;
+			font-weight: bold;
+			padding: 10px 15px 0px;
+		}
+	}
+}
+
+@media (min-width: 768px) {
+	.login-wrapper {
+		border-right: 1px solid #f2f2f2;
+	}
+}
+
+

frappe/templates/base.html

@@ -23,8 +23,6 @@ Built on Frappe.io. Free and Open Source Framework for the Web. https://frappe.i
 		{{ meta_block }}
 		{% endif %}
 
-		<link type="text/css" rel="stylesheet" href="{{ bootstrap }}">
-
 		{%- for link in web_include_css %}
 		<link type="text/css" rel="stylesheet" href="{{ link }}">
 		{%- endfor -%}
@@ -41,51 +39,66 @@ Built on Frappe.io. Free and Open Source Framework for the Web. https://frappe.i
 	{%- endblock -%}
 </head>
 <body>
-	<div>
-		{%- block banner -%}
-		{% include "templates/includes/banner_extension.html" ignore missing %}
-			{% if banner_html -%}
-			<header class="container">{{ banner_html or "" }}</header>
-			{%- endif %}
-		{%- endblock -%}
+	<div class="offcanvas-container">
+		<div class="offcanvas">
+			<div class="offcanvas-main-section">
+				<div>
+					{%- block banner -%}
+					{% include "templates/includes/banner_extension.html" ignore missing %}
+						{% if banner_html -%}
+						<header class="container">{{ banner_html or "" }}</header>
+						{%- endif %}
+					{%- endblock -%}
 
-		{%- block navbar -%}{% include "templates/includes/navbar.html" %}{%- endblock -%}
-        <div class="container">
-            <!-- <div class="page-breadcrumbs" data-html-block="breadcrumbs">
-                {%- if breadcrumbs is defined -%}{{ breadcrumbs }}{%- endif -%}
-            </div> -->
-    		<div class="page-container" id="page-{{ name or page_name }}">
-    			<div class="row">
-    				<div class="col-sm-2 col-sm-push-10 page-sidebar hidden-xs"
-                        data-html-block="sidebar" style="left: calc(83.34% - 1px);">
-    					{%- block sidebar -%}
-    					{%- if sidebar is defined -%}
-    						{{ sidebar }}
-    					{%- endif -%}
-    					{%- endblock -%}
-    				</div>
-    				<div class="col-sm-10 col-sm-pull-2 page-content">
-            			<div data-html-block="header">
-            				{%- if header is defined -%}{% if header %}{{ header }}{% endif %}{%- endif -%}
-            			</div>
-                		<div class="page-breadcrumbs" data-html-block="breadcrumbs">
-                			{%- if breadcrumbs is defined -%}{{ breadcrumbs }}{%- endif -%}
-                		</div>
-                        <div class="" data-html-block="content">
-    					{%- block content -%}{{ content or "" }}{%- endblock -%}
-                        </div>
-    				</div>
-    			</div>
-    		</div>
-        </div>
-		<footer class="page-footer">
-			<div class="container" data-html-block="footer">
-				{%- if footer is defined -%}{{ footer }}{%- endif -%}
+					{%- block navbar -%}{% include "templates/includes/navbar.html" %}{%- endblock -%}
+			        <div class="container">
+			    		<div class="page-container" id="page-{{ name or page_name }}">
+			    			<div class="row">
+			    				<div class="col-sm-10 col-xs-12 page-content">
+			            			<div data-html-block="header">
+			            				{%- if header is defined -%}{% if header %}{{ header }}{% endif %}{%- endif -%}
+			            			</div>
+			                		<div class="page-breadcrumbs" data-html-block="breadcrumbs">
+			                			{%- if breadcrumbs is defined -%}{{ breadcrumbs }}{%- endif -%}
+			                		</div>
+			                        <div class="" data-html-block="content">
+			    					{%- block content -%}{{ content or "" }}{%- endblock -%}
+			                        </div>
+			    				</div>
+			    				<div class="col-sm-2 hidden-xs page-sidebar" data-html-block="sidebar">
+			    					{%- block sidebar -%}
+			    					{%- if sidebar is defined -%}
+			    						{{ sidebar }}
+			    					{%- endif -%}
+			    					{%- endblock -%}
+			    				</div>
+			    			</div>
+			    		</div>
+			        </div>
+					<footer class="page-footer">
+						<div class="container" data-html-block="footer">
+							{%- if footer is defined -%}{{ footer }}{%- endif -%}
+						</div>
+					</footer>
+				</div>
+				<div>
+					{%- block footer -%}{% include "templates/includes/footer.html" %}{%- endblock -%}
+				</div>
 			</div>
-		</footer>
-	</div>
-	<div>
-		{%- block footer -%}{% include "templates/includes/footer.html" %}{%- endblock -%}
+			<div class="modal-backdrop offcanvas-main-section-overlay"></div>
+			<div class="sidebar sidebar-right visible-xs">
+				{% block offcanvas_sidebar -%}
+				<div class="sidebar-navbar-items">
+					{% include "frappe/templates/includes/navbar_items.html" %}
+				</div>
+				<div class="sidebar-page-sidebar" data-html-block="sidebar">
+					{%- if sidebar is defined -%}
+						{{ sidebar }}
+					{%- endif -%}
+				</div>
+				{%- endblock %}
+			</div>
+		</div>
 	</div>
 
 	{%- block script %}

frappe/templates/generators/web_page.html

@@ -1,6 +1,4 @@
-{% if header -%}
-	{%- block header -%} {{ header }} {%- endblock -%}
-{%- endif %}
+{%- block header -%} {{ header or "" }} {%- endblock -%}
 
 {% block content %}
 <div class="webpage-content">

frappe/templates/includes/navbar.html

@@ -2,62 +2,17 @@
 	<nav class="navbar navbar-default navbar-main" role="navigation">
 		<div class="container">
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle" data-toggle="collapse"
-					data-target=".navbar-responsive-collapse">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
 				<a class="navbar-brand ellipsis" href="/">
 					<span>{{ brand_html or (frappe.get_hooks("brand_html") or ["Home"])[0] }}</span>
 				</a>
+				<a class="pull-right toggle-sidebar visible-xs">
+					<i class="octicon octicon-three-bars"></i>
+				</a>
 			</div>
-			<div class="collapse navbar-collapse navbar-responsive-collapse">
-				{% if top_bar_items -%}
-				<ul class="nav navbar-nav navbar-left">
-					{%- for page in top_bar_items -%}
-					{% if not page.parent_label and not page.right -%}
-					{% include "templates/includes/navbar_link.html" %}
-					{%- endif -%}
-					{%- endfor %}
-				</ul>
-				{%- endif %}
-				<ul class="nav navbar-nav navbar-right">
-					{%- for page in top_bar_items -%}
-					{% if not page.parent_label and page.right -%}
-					{% include "templates/includes/navbar_link.html" %}
-					{%- endif -%}
-					{%- endfor %}
-					<!-- post login tools -->
-					<li class="dropdown logged-in" id="website-post-login"
-						data-label="website-post-login" style="display: none">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
-							<img class="user-picture"
-								style="min-width: 20px; max-height: 20px; border-radius: 4px"/>
-								<b class="full-name"></b><b class="caret"></b>
-						</a>
-				        <ul class="dropdown-menu" role="menu">
-							{%- for child in post_login -%}
-							<li {% if child.label %}data-label="{{ child.label }}" {% endif %}
-								{% if child.class %} class="{{ child.class }}" {% endif %}>
-
-								{%- if child.url -%}
-									<a href="{{ child.url }}" {{ child.target or '' }}
-										rel="nofollow">
-										{%- if child.icon -%}
-										<i class="icon-fixed-width {{ child.icon }}"></i>
-										{%- endif -%}
-										{{ child.label }}
-									</a>
-								{%- endif -%}
-							</li>
-							{%- endfor -%}
-						</ul>
-					</li>
-					<li class="btn-login-area"><a href="/login">
-						{%- if not disable_signup %}Sign Up / {% endif -%} Login</a></li>
-				</ul>
+			<div class="hidden-xs">
+				{% block navbar_items %}
+				{% include "frappe/templates/includes/navbar_items.html" %}
+				{% endblock %}
 			</div>
 		</div>
 	</nav>

frappe/templates/includes/navbar_items.html

@@ -0,0 +1,44 @@
+{% if top_bar_items -%}
+<ul class="nav navbar-nav navbar-left">
+	{%- for page in top_bar_items -%}
+	{% if not page.parent_label and not page.right -%}
+	{% include "templates/includes/navbar_link.html" %}
+	{%- endif -%}
+	{%- endfor %}
+</ul>
+{%- endif %}
+<ul class="nav navbar-nav navbar-right">
+	{%- for page in top_bar_items -%}
+	{% if not page.parent_label and page.right -%}
+	{% include "templates/includes/navbar_link.html" %}
+	{%- endif -%}
+	{%- endfor %}
+	<!-- post login tools -->
+	<li class="dropdown logged-in" id="website-post-login"
+		data-label="website-post-login" style="display: none">
+		<a href="#" class="dropdown-toggle" data-toggle="dropdown">
+			<img class="user-picture"
+				style="min-width: 20px; max-height: 20px; border-radius: 4px"/>
+				<b class="full-name"></b><b class="caret"></b>
+		</a>
+        <ul class="dropdown-menu" role="menu">
+			{%- for child in post_login -%}
+			<li {% if child.label %}data-label="{{ child.label }}" {% endif %}
+				{% if child.class %} class="{{ child.class }}" {% endif %}>
+
+				{%- if child.url -%}
+					<a href="{{ child.url }}" {{ child.target or '' }}
+						rel="nofollow">
+						{%- if child.icon -%}
+						<i class="icon-fixed-width {{ child.icon }}"></i>
+						{%- endif -%}
+						{{ child.label }}
+					</a>
+				{%- endif -%}
+			</li>
+			{%- endfor -%}
+		</ul>
+	</li>
+	<li class="btn-login-area"><a href="/login">
+		{%- if not disable_signup %}Sign Up / {% endif -%} Login</a></li>
+</ul>

frappe/templates/includes/sidebar.html

@@ -1,19 +1,22 @@
-<div class="sidebar-exists"></div>
 {% if children -%}
 <div class="sidebar-items">
 {% if parents -%}
-<div class="sidebar-item">
-	<a href="{{ parents[-1].name }}" class="no-decoration">
-		<i class="icon-angle-left"></i> {{ _("Back") }}
-	</a>
-</div>
+<ul class="list-unstyled sidebar-menu sidebar-item">
+	<li>
+		<a href="{{ parents[-1].name }}" class="no-decoration">
+			<i class="icon-angle-left"></i> {{ _("Back") }}
+		</a>
+	</li>
+</ul>
 {%- endif %}
 {%- for child in children -%}
-<div class="sidebar-item">
-	<a href="{{ child.name }}" class="no-decoration {% if (pathname or "")==(child.name or "") %}active{% endif %}">
-		{{  child.title or child.page_title or (child.name or "") }}
-	</a>
-</div>
+<ul class="list-unstyled sidebar-menu sidebar-item">
+	<li>
+		<a href="{{ child.name }}" class="no-decoration {% if (pathname or "")==(child.name or "") %}active{% endif %}">
+			{{  child.title or child.page_title or (child.name or "") }}
+		</a>
+	</li>
+</ul>
 {%- endfor -%}
 </div>
 {%- endif %}

frappe/templates/includes/website_theme/footer.css

@@ -1,6 +1,7 @@
+{%- set footer_border_color = get_shade(theme.footer_color, 10) -%}
 .web-footer {
 	background-color: {{ theme.footer_color }};
-	border-top: 1px solid {{ get_shade(theme.footer_color, 10) }};
+	border-top: 1px solid {{ footer_border_color }};
 }
 
 .web-footer,
@@ -15,5 +16,5 @@
 }
 
 .web-footer input {
-	border: 1px solid {{ get_shade(theme.footer_color, 10) }};
+	border: 1px solid {{ footer_border_color }};
 }

frappe/templates/includes/website_theme/navbar.css

@@ -46,8 +46,8 @@
 }
 
 .navbar-toggle {
-	margin-top: 7px;
-	margin-bottom: 7px;
+	margin-top: 18px;
+	margin-bottom: 18px;
 }
 
 .navbar-collapse {
@@ -62,8 +62,15 @@
 	height: auto;
 }
 
+@media (max-width: 767px) {
+	.toggle-sidebar {
+		padding: 25px 15px;
+	}
+}
+
 @media (min-width: 768px) {
 	.navbar-brand {
 		max-width: 300px;
 	}
 }
+

frappe/templates/pages/desk.html

@@ -21,14 +21,14 @@
 </head>
 <body>
 	<div class="splash">{% include "public/images/frappe.svg" %}</div>
-	<div class="desk-container">
+	<div class="offcanvas-container">
 		<div class="offcanvas">
-			<div class="desk-main-section">
+			<div class="offcanvas-main-section">
 				<header></header>
 				<div id="body_div"></div>
 				<footer></footer>
 			</div>
-			<div class="modal-backdrop desk-main-section-overlay"></div>
+			<div class="modal-backdrop offcanvas-main-section-overlay"></div>
 			<div class="sidebar sidebar-left visible-xs visible-sm"></div>
 			<div class="sidebar sidebar-right visible-xs visible-sm">
 				<ul class="list-unstyled sidebar-menu" id="sidebar-notification"></ul>

frappe/templates/pages/website_script.py

@@ -1,17 +1,23 @@
 # Copyright (c) 2013, Web Notes Technologies Pvt. Ltd. and Contributors
-# MIT License. See license.txt 
+# MIT License. See license.txt
 
 from __future__ import unicode_literals
 import frappe
+from frappe.utils import strip
+from frappe.website.doctype.website_theme.website_theme import get_active_theme
 
 no_sitemap = 1
 base_template_path = "templates/pages/website_script.js"
 
 def get_context(context):
 	script_context = { "javascript": frappe.db.get_value('Website Script', None, 'javascript') }
-	
+
+	theme = get_active_theme()
+	if strip(theme.javascript or ""):
+		script_context["javascript"] += "\n" + strip(theme.javascript)
+
 	if not frappe.conf.developer_mode:
 		script_context["google_analytics_id"] = frappe.db.get_value("Website Settings", "Website Settings",
 			"google_analytics_id")
-	
+
 	return script_context

frappe/templates/pages/website_theme.css

@@ -1,8 +1,8 @@
 {%- if theme and theme.apply_style -%}
 
 {%- set font_family_sans_serif = '"Helvetica Neue", Helvetica, Arial, sans-serif' -%}
-
 {%- set heading_selectors = "h1, h2, h3, h4, h5, h6" -%}
+{%- set border_color = get_shade(theme.background_color, 10) -%}
 
 {{ theme.webfont_import or "" }}
 
@@ -58,6 +58,19 @@ a:active {
 
 {% include "frappe/templates/includes/website_theme/footer.css" %}
 
+{# borders #}
+.page-content {
+	border-right: 1px solid {{ border_color }};
+}
+
+.page-sidebar {
+	border-left: 1px solid {{ border_color }};
+}
+
+.page-footer {
+	border-top: 1px solid {{ border_color }};
+}
+
 {% if theme.css -%} {% include theme.css %} {%- endif %}
 
 {%- endif -%}

frappe/templates/pages/website_theme.py

@@ -4,8 +4,7 @@
 from __future__ import unicode_literals
 import re
 import frappe
-from frappe.utils import cint, cstr
-from frappe.website.utils import get_active_theme
+from frappe.website.doctype.website_theme.website_theme import get_active_theme
 
 no_sitemap = 1
 base_template_path = "templates/pages/website_theme.css"

frappe/utils/redis_wrapper.py

@@ -2,7 +2,7 @@
 # MIT License. See license.txt
 from __future__ import unicode_literals
 
-import redis, frappe, cPickle as pickle
+import redis, frappe, pickle
 
 class RedisWrapper(redis.Redis):
 	"""Redis client that will automatically prefix conf.db_name"""

frappe/website/context.py

@@ -7,7 +7,7 @@ import frappe
 from frappe.website.doctype.website_settings.website_settings import get_website_settings
 from frappe.website.template import render_blocks
 from frappe.website.router import get_route_info
-from frappe.website.utils import can_cache, get_active_theme
+from frappe.website.utils import can_cache
 
 def get_context(path):
 	context = None
@@ -74,8 +74,7 @@ def build_context(context):
 				context.children = module.get_children(context)
 
 	add_metatags(context)
-
-	add_website_theme(context)
+	context.update(frappe.get_hooks("website_context") or {})
 
 	# determine templates to be used
 	if not context.base_template_path:
@@ -101,9 +100,3 @@ def add_metatags(context):
 		if tags.get("image"):
 			tags["og:image"] = tags["twitter:image:src"] = tags["image"]
 
-def add_website_theme(context):
-	context.bootstrap = frappe.get_hooks("bootstrap")[0]
-	website_theme = get_active_theme()
-	if website_theme and website_theme.bootstrap:
-		context.bootstrap = website_theme.bootstrap
-

frappe/website/doctype/style_settings/README.md

@@ -1,6 +0,0 @@
-Style settings for website. Includes settings for:
-
-- Site colours (background, toolbars)
-- Fonts (family and size)
-- Background (image if any)
-- Custom CSS

frappe/website/doctype/style_settings/__init__.py

@@ -1 +0,0 @@
-from __future__ import unicode_literals

frappe/website/doctype/style_settings/style_settings.js

@@ -1,14 +0,0 @@
-// Copyright (c) 2013, Web Notes Technologies Pvt. Ltd. and Contributors
-// MIT License. See license.txt
-
-
-cur_frm.cscript.onload_post_render = function() {
-	frappe.require('assets/frappe/js/lib/jscolor/jscolor.js');
-	$.each(["background_color", "page_text", "page_links",
-		"top_bar_background", "top_bar_foreground",
-		"page_header_background", "page_header_color",
-		"footer_background", "footer_color"], function(i, v) {
-		$(cur_frm.fields_dict[v].input).addClass('color');
-	})
-	jscolor.bind();
-}

frappe/website/doctype/style_settings/style_settings.json

@@ -1,249 +0,0 @@
-{
- "creation": "2013-03-25 16:01:33", 
- "description": "Set your background color, font and image (tiled)", 
- "docstatus": 0, 
- "doctype": "DocType", 
- "fields": [
-  {
-   "fieldname": "enable", 
-   "fieldtype": "Section Break", 
-   "in_list_view": 0, 
-   "label": "Enable", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "This must be checked if Style Settings are applicable", 
-   "fieldname": "apply_style", 
-   "fieldtype": "Check", 
-   "in_list_view": 1, 
-   "label": "Apply Style", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "color", 
-   "fieldtype": "Section Break", 
-   "in_list_view": 0, 
-   "label": "Page Background", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "If image is selected, color will be ignored (attach first)", 
-   "fieldname": "background_image", 
-   "fieldtype": "Attach", 
-   "in_list_view": 1, 
-   "label": "Background Image", 
-   "options": "", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "Solid background color (default light gray)", 
-   "fieldname": "background_color", 
-   "fieldtype": "Data", 
-   "in_list_view": 1, 
-   "label": "Background Color", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "page_text", 
-   "fieldtype": "Data", 
-   "label": "Page Text", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "page_links", 
-   "fieldtype": "Data", 
-   "label": "Page Links", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "column_break_8", 
-   "fieldtype": "Column Break", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "html_9", 
-   "fieldtype": "HTML", 
-   "options": "<img class=\"img-responsive\" src=\"/assets/frappe/images/help/style-settings-help.png\">", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "cb0", 
-   "fieldtype": "Section Break", 
-   "label": "Top Bar", 
-   "permlevel": 0, 
-   "print_width": "50%", 
-   "width": "50%"
-  }, 
-  {
-   "fieldname": "top_bar_background", 
-   "fieldtype": "Data", 
-   "label": "Top Bar Background", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "column_break_12", 
-   "fieldtype": "Column Break", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "000 is black, fff is white", 
-   "fieldname": "top_bar_foreground", 
-   "fieldtype": "Data", 
-   "label": "Top Bar Text", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "page_header", 
-   "fieldtype": "Section Break", 
-   "label": "Page Header", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "page_header_background", 
-   "fieldtype": "Data", 
-   "label": "Page Header Background", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "column_break_16", 
-   "fieldtype": "Column Break", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "page_header_color", 
-   "fieldtype": "Data", 
-   "label": "Page Header Text", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "footer", 
-   "fieldtype": "Section Break", 
-   "label": "Footer", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "footer_background", 
-   "fieldtype": "Data", 
-   "label": "Footer Background", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "column_break_20", 
-   "fieldtype": "Column Break", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "footer_color", 
-   "fieldtype": "Data", 
-   "label": "Footer Text", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "fonts", 
-   "fieldtype": "Section Break", 
-   "label": "Fonts", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "heading_font", 
-   "fieldtype": "Select", 
-   "label": "Font (Heading)", 
-   "options": "\nHelvetica Neue\nLucida Grande\nVerdana\nArial\nGeorgia\nTahoma\nLato\nOpen Sans", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "font", 
-   "fieldtype": "Select", 
-   "label": "Font (Text)", 
-   "options": "\nHelvetica Neue\nLucida Grande\nVerdana\nArial\nGeorgia\nTahoma", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "font_size", 
-   "fieldtype": "Select", 
-   "label": "Font Size (Text)", 
-   "options": "\n12px\n13px\n14px\n15px\n16px\n17px\n18px", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "heading_text_as", 
-   "fieldtype": "Select", 
-   "label": "Heading Text As", 
-   "options": "\nUPPERCASE\nTitle Case\nlowercase", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "column_break_13", 
-   "fieldtype": "Column Break", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "Add the name of <a href=\"http://google.com/webfonts\" target=\"_blank\">Google Web Font</a> e.g. \"Open Sans\"", 
-   "fieldname": "google_web_font_for_heading", 
-   "fieldtype": "Data", 
-   "label": "Google Web Font (Heading)", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "Add the name of <a href=\"http://google.com/webfonts\" target=\"_blank\">Google Web Font</a> e.g. \"Open Sans\"", 
-   "fieldname": "google_web_font_for_text", 
-   "fieldtype": "Data", 
-   "label": "Google Web Font (Text)", 
-   "permlevel": 0
-  }, 
-  {
-   "fieldname": "css", 
-   "fieldtype": "Section Break", 
-   "label": "CSS", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "add your own CSS (careful!)", 
-   "fieldname": "add_css", 
-   "fieldtype": "Code", 
-   "label": "Add CSS", 
-   "permlevel": 0
-  }, 
-  {
-   "description": "Auto generated", 
-   "fieldname": "custom_css", 
-   "fieldtype": "Code", 
-   "label": "Custom CSS", 
-   "permlevel": 0, 
-   "read_only": 1
-  }
- ], 
- "icon": "icon-cog", 
- "idx": 1, 
- "issingle": 1, 
- "max_attachments": 1, 
- "modified": "2015-02-19 09:27:51.752971", 
- "modified_by": "Administrator", 
- "module": "Website", 
- "name": "Style Settings", 
- "owner": "Administrator", 
- "permissions": [
-  {
-   "create": 1, 
-   "email": 1, 
-   "permlevel": 0, 
-   "print": 1, 
-   "read": 1, 
-   "report": 0, 
-   "role": "Website Manager", 
-   "share": 1, 
-   "submit": 0, 
-   "write": 1
-  }, 
-  {
-   "amend": 0, 
-   "cancel": 0, 
-   "create": 0, 
-   "permlevel": 1, 
-   "read": 1, 
-   "report": 0, 
-   "role": "Website Manager", 
-   "submit": 0
-  }
- ]
-}

frappe/website/doctype/style_settings/style_settings.py

@@ -1,30 +0,0 @@
-# Copyright (c) 2013, Web Notes Technologies Pvt. Ltd. and Contributors
-# MIT License. See license.txt
-
-from __future__ import unicode_literals
-import frappe
-
-from frappe.utils import cint, cstr
-from frappe import _
-
-from frappe.model.document import Document
-
-class StyleSettings(Document):
-
-	def validate(self):
-		"""make custom css"""
-		self.validate_colors()
-
-	def validate_colors(self):
-		if (self.top_bar_background or self.top_bar_foreground) and \
-			self.top_bar_background==self.top_bar_foreground:
-				frappe.msgprint(_("Top Bar text and background is same color. Please change."),
-					raise_exception=1)
-
-	def on_update(self):
-		"""clear cache"""
-		from frappe.sessions import clear_cache
-		clear_cache('Guest')
-
-		from frappe.website.render import clear_cache
-		clear_cache()

frappe/website/doctype/website_settings/website_settings.json

@@ -59,6 +59,7 @@
   {
    "fieldname": "website_theme_image",
    "fieldtype": "Image",
+   "hidden": 1,
    "label": "Website Theme Image",
    "options": "website_theme_image_link",
    "permlevel": 0,
@@ -134,13 +135,6 @@
    "label": "Sidebar",
    "permlevel": 0
   },
-  {
-   "description": "Hide the sidebar",
-   "fieldname": "no_sidebar",
-   "fieldtype": "Check",
-   "label": "No Sidebar",
-   "permlevel": 0
-  },
   {
    "fieldname": "sidebar_items",
    "fieldtype": "Table",
@@ -263,7 +257,7 @@
  "idx": 1,
  "issingle": 1,
  "max_attachments": 10,
- "modified": "2015-02-19 22:00:27.068967",
+ "modified": "2015-02-21 08:48:35.438463",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Website Settings",

frappe/website/doctype/website_settings/website_settings.py

@@ -8,6 +8,7 @@ from frappe.utils import get_request_site_address, encode
 from frappe.model.document import Document
 from urllib import quote
 from frappe.website.router import resolve_route
+from frappe.website.doctype.website_theme.website_theme import add_website_theme
 
 class WebsiteSettings(Document):
 	def validate(self):
@@ -47,6 +48,8 @@ class WebsiteSettings(Document):
 	def clear_cache(self):
 		# make js and css
 		# clear web cache (for menus!)
+		from frappe.sessions import clear_cache
+		clear_cache('Guest')
 
 		from frappe.website.render import clear_cache
 		clear_cache()
@@ -54,6 +57,7 @@ class WebsiteSettings(Document):
 		# clears role based home pages
 		frappe.clear_cache()
 
+
 def get_website_settings():
 	hooks = frappe.get_hooks()
 
@@ -89,7 +93,7 @@ def get_website_settings():
 	settings = frappe.get_doc("Website Settings", "Website Settings")
 	for k in ["banner_html", "brand_html", "copyright", "twitter_share_via",
 		"favicon", "facebook_share", "google_plus_one", "twitter_share", "linked_in_share",
-		"disable_signup", "no_sidebar"]:
+		"disable_signup"]:
 		if hasattr(settings, k):
 			context[k] = settings.get(k)
 
@@ -115,4 +119,7 @@ def get_website_settings():
 
 	context.web_include_css = hooks.web_include_css or []
 
+	add_website_theme(context)
+
 	return context
+

frappe/website/doctype/website_theme/website_theme.js

@@ -6,8 +6,7 @@ frappe.require('assets/frappe/js/lib/jscolor/jscolor.js');
 frappe.provide("frappe.website_theme");
 $.extend(frappe.website_theme, {
 	color_variables: ["background_color", "top_bar_color", "top_bar_text_color",
-		"footer_color", "footer_text_color", "text_color", "link_color",
-		"page_header_color", "page_header_text_color"]
+		"footer_color", "footer_text_color", "text_color", "link_color"]
 });
 
 frappe.ui.form.on("Website Theme", "onload_post_render", function(frm) {

frappe/website/doctype/website_theme/website_theme.json

@@ -94,6 +94,7 @@
    "precision": ""
   }, 
   {
+   "depends_on": "apply_style", 
    "fieldname": "section_break_14", 
    "fieldtype": "Section Break", 
    "permlevel": 0, 
@@ -153,6 +154,7 @@
    "precision": ""
   }, 
   {
+   "depends_on": "apply_style", 
    "fieldname": "section_break_8", 
    "fieldtype": "Section Break", 
    "permlevel": 0, 
@@ -173,16 +175,9 @@
    "precision": ""
   }, 
   {
-   "fieldname": "page_header_color", 
-   "fieldtype": "Data", 
-   "label": "Page Header Color", 
-   "permlevel": 0, 
-   "precision": ""
-  }, 
-  {
-   "fieldname": "page_header_text_color", 
-   "fieldtype": "Data", 
-   "label": "Page Header Text Color", 
+   "fieldname": "no_sidebar", 
+   "fieldtype": "Check", 
+   "label": "Hide Sidebar", 
    "permlevel": 0, 
    "precision": ""
   }, 
@@ -207,6 +202,7 @@
    "precision": ""
   }, 
   {
+   "depends_on": "apply_style", 
    "fieldname": "section_break_4", 
    "fieldtype": "Section Break", 
    "permlevel": 0, 
@@ -234,12 +230,14 @@
    "precision": ""
   }, 
   {
+   "depends_on": "", 
    "fieldname": "section_break_21", 
    "fieldtype": "Section Break", 
    "permlevel": 0, 
    "precision": ""
   }, 
   {
+   "depends_on": "apply_style", 
    "description": "", 
    "fieldname": "css", 
    "fieldtype": "Code", 
@@ -248,19 +246,11 @@
    "precision": ""
   }, 
   {
-   "fieldname": "section_break_25", 
-   "fieldtype": "Section Break", 
+   "fieldname": "js", 
+   "fieldtype": "Code", 
+   "label": "JavaScript", 
    "permlevel": 0, 
    "precision": ""
-  }, 
-  {
-   "fieldname": "website_theme_templates", 
-   "fieldtype": "Table", 
-   "label": "Website Theme Templates", 
-   "options": "Website Theme Template", 
-   "permlevel": 0, 
-   "precision": "", 
-   "reqd": 0
   }
  ], 
  "hide_heading": 0, 
@@ -270,7 +260,7 @@
  "is_submittable": 0, 
  "issingle": 0, 
  "istable": 0, 
- "modified": "2015-02-19 20:44:42.586242", 
+ "modified": "2015-02-20 11:56:21.252046", 
  "modified_by": "Administrator", 
  "module": "Website", 
  "name": "Website Theme", 

frappe/website/doctype/website_theme/website_theme.py

@@ -9,6 +9,7 @@ from frappe.model.document import Document
 class WebsiteTheme(Document):
 	def validate(self):
 		self.validate_if_customizable()
+		self.validate_colors()
 
 	def on_update(self):
 		if (not self.custom
@@ -33,6 +34,12 @@ class WebsiteTheme(Document):
 		if self.is_standard_and_not_valid_user():
 			frappe.throw(_("Please Duplicate this Website Theme to customize."))
 
+	def validate_colors(self):
+		if (self.top_bar_color or self.top_bar_text_color) and \
+			self.top_bar_color==self.top_bar_text_color:
+				frappe.throw(_("Top Bar Color and Text Color are the same. They should be have good contrast to be readable."))
+
+
 	def export_doc(self):
 		"""Export to standard folder `[module]/website_theme/[name]/[name].json`."""
 		from frappe.modules.export_file import export_to_files
@@ -52,3 +59,20 @@ def use_theme(theme):
 	website_settings = frappe.get_doc("Website Settings", "Website Settings")
 	website_settings.website_theme = theme
 	website_settings.save()
+
+def add_website_theme(context):
+	bootstrap = frappe.get_hooks("bootstrap")[0]
+	website_theme = get_active_theme()
+	if website_theme:
+		if website_theme.bootstrap:
+			bootstrap = website_theme.bootstrap
+
+		context.no_sidebar = website_theme.no_sidebar
+
+	context.web_include_css = [bootstrap] + context.web_include_css
+
+def get_active_theme():
+	website_theme = frappe.db.get_value("Website Settings", "Website Settings", "website_theme")
+	if website_theme:
+		return frappe.get_doc("Website Theme", website_theme)
+

frappe/website/doctype/website_theme_template/website_theme_template.json

@@ -1,86 +0,0 @@
-{
- "allow_copy": 0, 
- "allow_import": 0, 
- "allow_rename": 0, 
- "creation": "2015-02-18 14:52:45.383419", 
- "custom": 0, 
- "docstatus": 0, 
- "doctype": "DocType", 
- "document_type": "Other", 
- "fields": [
-  {
-   "allow_on_submit": 0, 
-   "fieldname": "template_key", 
-   "fieldtype": "Data", 
-   "hidden": 0, 
-   "ignore_user_permissions": 0, 
-   "in_filter": 0, 
-   "in_list_view": 1, 
-   "label": "Template Key", 
-   "no_copy": 0, 
-   "permlevel": 0, 
-   "precision": "", 
-   "print_hide": 0, 
-   "read_only": 0, 
-   "report_hide": 0, 
-   "reqd": 1, 
-   "search_index": 0, 
-   "set_only_once": 0
-  }, 
-  {
-   "allow_on_submit": 0, 
-   "fieldname": "column_break_2", 
-   "fieldtype": "Column Break", 
-   "hidden": 0, 
-   "ignore_user_permissions": 0, 
-   "in_filter": 0, 
-   "in_list_view": 0, 
-   "no_copy": 0, 
-   "permlevel": 0, 
-   "precision": "", 
-   "print_hide": 0, 
-   "read_only": 0, 
-   "report_hide": 0, 
-   "reqd": 0, 
-   "search_index": 0, 
-   "set_only_once": 0
-  }, 
-  {
-   "allow_on_submit": 0, 
-   "fieldname": "template_path", 
-   "fieldtype": "Small Text", 
-   "hidden": 0, 
-   "ignore_user_permissions": 0, 
-   "in_filter": 0, 
-   "in_list_view": 1, 
-   "label": "Template Path", 
-   "no_copy": 0, 
-   "permlevel": 0, 
-   "precision": "", 
-   "print_hide": 0, 
-   "read_only": 0, 
-   "report_hide": 0, 
-   "reqd": 1, 
-   "search_index": 0, 
-   "set_only_once": 0
-  }
- ], 
- "hide_heading": 0, 
- "hide_toolbar": 0, 
- "in_create": 0, 
- "in_dialog": 0, 
- "is_submittable": 0, 
- "issingle": 0, 
- "istable": 1, 
- "modified": "2015-02-18 16:04:09.914591", 
- "modified_by": "Administrator", 
- "module": "Website", 
- "name": "Website Theme Template", 
- "name_case": "", 
- "owner": "Administrator", 
- "permissions": [], 
- "read_only": 0, 
- "read_only_onload": 0, 
- "sort_field": "modified", 
- "sort_order": "DESC"
-}

frappe/website/doctype/website_theme_template/website_theme_template.py

@@ -1,9 +0,0 @@
-# Copyright (c) 2013, Web Notes Technologies Pvt. Ltd. and contributors
-# For license information, please see license.txt
-
-from __future__ import unicode_literals
-import frappe
-from frappe.model.document import Document
-
-class WebsiteThemeTemplate(Document):
-	pass

frappe/website/js/website.js

@@ -421,13 +421,13 @@ $.extend(frappe, {
 		$(".page-sidebar, .toggle-sidebar").toggleClass("hide", !sidebar_has_content);
 
 		// push sidebar to the right if there is content
-		$(".page-sidebar").toggleClass("col-sm-push-" + frappe.page_cols, sidebar_has_content);
+		// $(".page-sidebar").toggleClass("col-sm-push-" + frappe.page_cols, sidebar_has_content);
 
 		// make page content wide if no sidebar
 		$(".page-content").toggleClass("col-sm-12", !sidebar_has_content);
 
 		// narrow page content if sidebar
-		$(".page-content").toggleClass("col-sm-"+frappe.page_cols+" col-sm-pull-"+frappe.sidebar_cols, sidebar_has_content);
+		$(".page-content").toggleClass("col-sm-"+frappe.page_cols, sidebar_has_content);
 
 		// no borders if no sidebars
 		$(".page-content").toggleClass("no-border", !sidebar_has_content);
@@ -435,12 +435,6 @@ $.extend(frappe, {
 		// if everything in the sub-header is hidden, hide the sub-header
 		// var hide_sub_header = $(".page-sub-header .row").children().length === $(".page-sub-header .row").find(".hidden").length;
 		// $(".page-sub-header").toggleClass("hidden", hide_sub_header);
-
-
-		// collapse sidebar in mobile view on page change
-		if(!$(".page-sidebar").hasClass("hidden-xs")) {
-			$(".toggle-sidebar").trigger("click");
-		}
 	}
 });
 
@@ -567,13 +561,18 @@ $(document).ready(function() {
 	$("#website-post-login").toggleClass("hide", logged_in ? false : true);
 
 	$(".toggle-sidebar").on("click", function() {
-		$(".page-sidebar").toggleClass("hidden-xs");
-		$(".toggle-sidebar i").toggleClass("icon-rotate-180");
+		$(".offcanvas").addClass("active-right");
+		return false;
 	});
 
-	// collapse navbar on click
-	$('.navbar-collapse a').click(function(){
-	    $(".navbar-collapse.collapse.in").collapse('hide');
+	// collapse offcanvas sidebars!
+	$(".offcanvas .sidebar").on("click", "a", function() {
+		$(".offcanvas").removeClass("active-left active-right");
+	});
+
+	$(".offcanvas-main-section-overlay").on("click", function() {
+		$(".offcanvas").removeClass("active-left active-right");
+		return false;
 	});
 
 	// switch to app link

frappe/website/template.py

@@ -57,6 +57,9 @@ def render_blocks(context):
 		if out.get("header") and not re.findall("<h.>", out["header"]):
 			out["header"] = "<h1>" + out["header"] + "</h1>"
 
+	if not out.get("header"):
+		out["no_header"] = 1
+
 	out["title"] = strip_html(out.get("title") or "")
 
 	# breadcrumbs
@@ -85,7 +88,7 @@ def render_blocks(context):
 		next_item = context.doc.get_next()
 		if next_item:
 			if next_item.name[0]!="/": next_item.name = "/" + next_item.name
-			html = '<p><br><a href="{name}">'+_("Next")+': {title}</a></p>'.format(**next_item)
+			html = ('<p><br><a href="{name}">'+_("Next")+': {title}</a></p>').format(**next_item)
 			out["content"] = out["content"].replace("{next}", html)
 
 	# remove style and script tags from blocks

frappe/website/utils.py

@@ -66,11 +66,6 @@ def is_signup_enabled():
 
 	return frappe.local.is_signup_enabled
 
-def get_active_theme():
-	website_theme = frappe.db.get_value("Website Settings", "Website Settings", "website_theme")
-	if website_theme:
-		return frappe.get_doc("Website Theme", website_theme)
-
 def cleanup_page_name(title):
 	"""make page name from title"""
 	name = title.lower()