fix: Use Tailwind only for Web Page

- Use Bootstrap 4 as fallback for other pages

frappe/templates/base.html

@@ -25,7 +25,7 @@
 		{{ head_html or "" }}
 		{%- endif %}
 
-		{%- if theme.based_on == 'Bootstrap 4' -%}
+		{%- if theme.based_on == 'Bootstrap 4' or doctype != 'Web Page' -%}
 			{%- if theme.theme_url -%}
 			<link type="text/css" rel="stylesheet" href="{{ theme.theme_url }}">
 			{%- else -%}
@@ -40,6 +40,11 @@
 			<!-- container for processed tailwind styles -->
 			<!-- tailwind-styles -->
 			{% endif %}
+			{%- if theme.theme_css -%}
+			<style>
+				{{ theme.theme_css }}
+			</style>
+			{%- endif -%}
 		{%- endif -%}
 
 		{%- for link in web_include_css %}

frappe/templates/includes/footer/footer.html

@@ -1,4 +1,4 @@
-{%- if theme.based_on == 'Bootstrap 4' -%}
+{%- if theme.based_on == 'Bootstrap 4' or doctype != 'Web Page' -%}
 <footer class="web-footer">
 	<section class="footer-links">
 		<div class="container">

frappe/templates/includes/navbar/navbar.html

@@ -1,4 +1,4 @@
-{%- if theme.based_on == 'Bootstrap 4' -%}
+{%- if theme.based_on == 'Bootstrap 4' or doctype != 'Web Page' -%}
 <nav class="bg-white shadow-sm navbar navbar-light navbar-expand-lg sticky-top">
 	<div class="container">
 		<a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/" }}">

frappe/templates/web.html

@@ -1,8 +1,14 @@
 {% extends base_template_path %}
 {% block hero %}{% endblock %}
 
+{% macro page_content() %}
+{%- block page_content -%}{%- endblock -%}
+{% endmacro %}
+
 {% block content %}
 
+{%- if theme.based_on == 'Bootstrap 4' or doctype != 'Web Page' -%}
+
 {% macro main_content() %}
 <div class="page-content-wrapper">
 	<!-- breadcrumbs -->
@@ -13,7 +19,7 @@
 	</div>
 
 	{% block page_container %}
-	<main class="{{ 'container my-5' if theme.based_on=='Bootstrap 4' else '' }}">
+	<main class="container my-5">
 		<div class="d-flex justify-content-between align-items-center">
 			<div class="page-header">
 				{% block header %}{% endblock %}
@@ -27,7 +33,7 @@
 		</div>
 
 		<div class="page_content">
-			{%- block page_content -%}{%- endblock -%}
+			{{ page_content() }}
 		</div>
 
 		<div class="page-footer">
@@ -43,7 +49,7 @@ id="page-{{ name or route | e }}" data-path="{{ pathname | e }}" {%- if page_or_
 {% endmacro %}
 
 {% if show_sidebar %}
-<div class="{{ 'container' if theme.based_on=='Bootstrap 4' else '' }}">
+<div class="container">
 	<div class="row" {{ container_attributes() }}>
 			<div class="pt-4 col-sm-2 border-right sidebar-column d-none d-sm-block">
 				{% block page_sidebar %}
@@ -60,4 +66,11 @@ id="page-{{ name or route | e }}" data-path="{{ pathname | e }}" {%- if page_or_
 	{{ main_content() }}
 </div>
 {% endif %}
+
+{%- else -%}
+<main>
+	{{ page_content() }}
+</main>
+{%- endif -%}
+
 {% endblock %}

frappe/website/doctype/web_template_field/web_template_field.json

@@ -8,7 +8,8 @@
   "label",
   "fieldname",
   "fieldtype",
-  "reqd"
+  "reqd",
+  "options"
  ],
  "fields": [
   {
@@ -29,7 +30,7 @@
    "fieldtype": "Select",
    "in_list_view": 1,
    "label": "Fieldtype",
-   "options": "Data\nSmall Text\nText\nAttach Image\nMarkdown Editor",
+   "options": "Data\nSmall Text\nText\nAttach Image\nMarkdown Editor\nSelect\nCheckbox",
    "reqd": 1
   },
   {
@@ -37,11 +38,16 @@
    "fieldname": "reqd",
    "fieldtype": "Check",
    "label": "Mandatory"
+  },
+  {
+   "fieldname": "options",
+   "fieldtype": "Small Text",
+   "label": "Options"
   }
  ],
  "istable": 1,
  "links": [],
- "modified": "2020-04-19 15:56:01.606898",
+ "modified": "2020-04-20 12:27:29.624457",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Template Field",

frappe/website/doctype/website_theme/custom_theme.css

@@ -0,0 +1,14 @@
+{% if google_font %}
+@import url('https://fonts.googleapis.com/css2?family={{ google_font }}:wght@400;500;600;700;900&display=swap');
+{% endif -%}
+
+:root {
+	{%- if google_font %}
+	--font-family: {{ google_font }};
+	{% endif -%}
+	{% if brand_color %}
+	--primary-500: {{ brand_color }};
+	{% endif -%}
+}
+
+{{ custom_css or '' }}

frappe/website/doctype/website_theme/website_theme.json

@@ -13,6 +13,9 @@
   "custom",
   "tailwind_theme_section",
   "brand_color",
+  "google_font",
+  "custom_css",
+  "theme_css",
   "bootstrap_theme_section",
   "theme_scss",
   "theme_json",
@@ -123,10 +126,28 @@
    "fieldtype": "Table",
    "label": "Footer",
    "options": "Web Page Block"
+  },
+  {
+   "fieldname": "google_font",
+   "fieldtype": "Data",
+   "label": "Google Font"
+  },
+  {
+   "fieldname": "custom_css",
+   "fieldtype": "Code",
+   "label": "Custom CSS",
+   "options": "CSS"
+  },
+  {
+   "fieldname": "theme_css",
+   "fieldtype": "Code",
+   "label": "Theme CSS",
+   "options": "CSS",
+   "read_only": 1
   }
  ],
  "links": [],
- "modified": "2020-04-19 13:43:18.722297",
+ "modified": "2020-04-19 20:44:22.916580",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Website Theme",

frappe/website/doctype/website_theme/website_theme.py

@@ -42,6 +42,9 @@ class WebsiteTheme(Document):
 			if doc_before_save is None or self.theme_scss != doc_before_save.theme_scss:
 				self.generate_bootstrap_theme()
 
+		if self.based_on == 'Tailwind':
+			self.theme_css = frappe.render_template('frappe/website/doctype/website_theme/custom_theme.css', self.as_dict(), is_path=True)
+
 	def export_doc(self):
 		"""Export to standard folder `[module]/website_theme/[name]/[name].json`."""
 		from frappe.modules.export_file import export_to_files