From aee3a3a554d910ae61614156f422bcc2a24cac32 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 21 Apr 2020 16:45:51 +0530
Subject: [PATCH] fix: Add responsive classes in web templates

---
 .../footer_horizontal/footer_horizontal.html  |  6 +-
 frappe/website/web_template/hero/hero.html    |  4 +-
 frappe/website/web_template/hero/hero.json    |  9 ++-
 .../hero_with_right_image.html                | 56 +++++++------------
 .../navbar_with_links_on_right.html           | 40 +++++++++++--
 .../section_with_big_cards.html               |  5 +-
 .../section_with_cta/section_with_cta.html    |  8 +--
 .../section_with_image.html                   |  2 +-
 .../section_with_small_cards.html             |  2 +-
 .../section_with_tabs/section_with_tabs.html  | 10 ++--
 10 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/frappe/website/web_template/footer_horizontal/footer_horizontal.html b/frappe/website/web_template/footer_horizontal/footer_horizontal.html
index 507c80bd42..0c3335bb9d 100644
--- a/frappe/website/web_template/footer_horizontal/footer_horizontal.html
+++ b/frappe/website/web_template/footer_horizontal/footer_horizontal.html
@@ -2,7 +2,7 @@
 	<div class="w-20">
 		<img class="w-auto h-8 sm:h-10" src="{{ brand_image }}" alt="Brand Logo">
 	</div>
-	<div class="flex items-center my-4 space-x-8">
+	<div class="grid items-center grid-cols-2 gap-4 my-4 sm:flex sm:space-x-4">
 		{%- for index in ['1', '2', '3', '4', '5'] -%}
 
 		{%- set label = values['item_' + index + '_label'] -%}
@@ -14,11 +14,11 @@
 
 		{%- endfor -%}
 	</div>
-	<div class="flex items-start justify-between pt-4 text-xs text-gray-700 border-t-2">
+	<div class="flex flex-col items-start justify-between pt-4 text-xs text-gray-700 border-t-2 sm:flex-row">
 		<div>
 			{{ address }}
 		</div>
-		<div>
+		<div class="mt-4 sm:mt-0">
 			{{ copyright }}
 		</div>
 	</div>
diff --git a/frappe/website/web_template/hero/hero.html b/frappe/website/web_template/hero/hero.html
index a3f1ada408..7fd4ab0b05 100644
--- a/frappe/website/web_template/hero/hero.html
+++ b/frappe/website/web_template/hero/hero.html
@@ -13,7 +13,7 @@
 		{%- if primary_action -%}
 		<div class="rounded-md shadow">
 			<a href="{{ primary_action }}"
-				class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-blue-500 border border-transparent rounded-md hover:bg-blue-400 focus:outline-none focus:shadow-outline md:py-4 md:text-lg md:px-10">
+				class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-primary-500 border border-transparent rounded-md hover:bg-primary-400 focus:outline-none focus:shadow-outline md:py-4 md:text-lg md:px-10">
 				{{ primary_action_label }}
 			</a>
 		</div>
@@ -21,7 +21,7 @@
 		{%- if secondary_action -%}
 		<div class="mt-3 sm:mt-0 sm:ml-3">
 			<a href="{{ secondary_action }}"
-				class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-blue-700 transition duration-150 ease-in-out bg-blue-100 border border-transparent rounded-md hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:shadow-outline focus:border-blue-300 md:py-4 md:text-lg md:px-10">
+				class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-primary-700 transition duration-150 ease-in-out bg-primary-100 border border-transparent rounded-md hover:text-primary-600 hover:bg-primary-50 focus:outline-none focus:shadow-outline focus:border-primary-300 md:py-4 md:text-lg md:px-10">
 				{{ secondary_action_label }}
 			</a>
 		</div>
diff --git a/frappe/website/web_template/hero/hero.json b/frappe/website/web_template/hero/hero.json
index 97fdbab7e0..37e06b802d 100644
--- a/frappe/website/web_template/hero/hero.json
+++ b/frappe/website/web_template/hero/hero.json
@@ -38,10 +38,17 @@
    "fieldtype": "Data",
    "label": "Secondary Action",
    "reqd": 0
+  },
+  {
+   "fieldname": "align",
+   "fieldtype": "Select",
+   "label": "Align",
+   "options": "Left\nCenter",
+   "reqd": 0
   }
  ],
  "idx": 0,
- "modified": "2020-04-19 15:26:23.140620",
+ "modified": "2020-04-20 12:27:45.760391",
  "modified_by": "Administrator",
  "name": "Hero",
  "owner": "Administrator",
diff --git a/frappe/website/web_template/hero_with_right_image/hero_with_right_image.html b/frappe/website/web_template/hero_with_right_image/hero_with_right_image.html
index a5855d95c1..e68a830d54 100644
--- a/frappe/website/web_template/hero_with_right_image/hero_with_right_image.html
+++ b/frappe/website/web_template/hero_with_right_image/hero_with_right_image.html
@@ -1,42 +1,28 @@
-<div class="relative flex overflow-hidden">
-	<div class="mx-auto">
-		<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
-			<div class="pt-10 mx-auto sm:pt-12 md:pt-16 lg:pt-20 xl:pt-28">
-				<div class="sm:text-center lg:text-left">
-					<h2
-						class="text-4xl font-extrabold leading-10 tracking-tight text-black sm:text-5xl sm:leading-none md:text-5xl">
-						{{ title }}
-					</h2>
-					{%- if subtitle -%}
-					<p
-						class="mt-3 text-base text-gray-700 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
-						{{ subtitle }}
-					</p>
-					{%- endif -%}
-					<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
-						{%- if primary_action -%}
-						<div class="rounded-md shadow">
-							<a href="{{ primary_action }}"
-								class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-blue-500 border border-transparent rounded-md hover:bg-blue-400 focus:outline-none focus:shadow-outline md:py-4 md:text-lg md:px-10">
-								{{ primary_action_label }}
-							</a>
-						</div>
-						{%- endif -%}
-						{%- if secondary_action -%}
-						<div class="mt-3 sm:mt-0 sm:ml-3">
-							<a href="{{ secondary_action }}"
-								class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-blue-700 transition duration-150 ease-in-out bg-blue-100 border border-transparent rounded-md hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:shadow-outline focus:border-blue-300 md:py-4 md:text-lg md:px-10">
-								{{ secondary_action_label }}
-							</a>
-						</div>
-						{%- endif -%}
-					</div>
-				</div>
+<div class="relative flex">
+	<div class="relative z-10 flex items-center flex-shrink-0 w-full sm:w-7/12">
+		<div>
+			<h2
+				class="text-4xl font-extrabold leading-10 tracking-tight text-black sm:text-5xl sm:leading-none md:text-5xl">
+				{{ title }}
+			</h2>
+			{%- if subtitle -%}
+			<p
+				class="mt-3 text-base text-gray-700 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+				{{ subtitle }}
+			</p>
+			{%- endif -%}
+			<div class="mt-5 sm:mt-8">
+				{%- if primary_action -%}
+				{{ c('button', label=primary_action_label, url=primary_action, variant="primary", size="large") }}
+				{%- endif -%}
+				{%- if secondary_action -%}
+				{{ c('button', label=secondary_action_label, url=secondary_action, variant="secondary", size="large", class="ml-4") }}
+				{%- endif -%}
 			</div>
 		</div>
 	</div>
 	{%- if image -%}
-	<div class="lg:w-1/2">
+	<div class="hidden sm:block lg:w-5/12">
 		<img class="object-cover w-full h-56 lg:h-full lg:w-full md:h-96 sm:h-72" src="{{ image }}" alt="">
 	</div>
 	{%- endif -%}
diff --git a/frappe/website/web_template/navbar_with_links_on_right/navbar_with_links_on_right.html b/frappe/website/web_template/navbar_with_links_on_right/navbar_with_links_on_right.html
index ee8b5c17bd..4961729c7c 100644
--- a/frappe/website/web_template/navbar_with_links_on_right/navbar_with_links_on_right.html
+++ b/frappe/website/web_template/navbar_with_links_on_right/navbar_with_links_on_right.html
@@ -1,12 +1,42 @@
-<header class="px-4 py-4 bg-white border-b border-gray-200 sm:px-6 lg:px-8">
-	<div
-		class="container relative z-10 flex items-center justify-between">
-		<div class="flex items-end w-24">
+<header class="py-4 bg-white border-b border-gray-200">
+	<div class="container relative z-10 flex items-center justify-between">
+		<div class="flex items-end flex-shrink-0 w-20">
 			<a href="/" class="block">
 				<img class="w-auto h-8 sm:h-10" src="{{ brand_image }}" alt="Brand Logo">
 			</a>
 		</div>
-		<div class="flex items-center text-sm leading-5 space-x-8">
+		<details class="flex items-center sm:hidden hide-summary-arrow">
+			<summary>
+				<button>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+						class="feather feather-menu">
+						<line x1="3" y1="12" x2="21" y2="12"></line>
+						<line x1="3" y1="6" x2="21" y2="6"></line>
+						<line x1="3" y1="18" x2="21" y2="18"></line>
+					</svg>
+				</button>
+			</summary>
+			<div class="absolute inset-x-0 flex flex-col px-4 py-4 bg-white shadow-md">
+				{%- for index in ['1', '2', '3', '4', '5'] -%}
+
+				{%- set label = values['item_' + index + '_label'] -%}
+				{%- set url = values['item_' + index + '_url'] -%}
+
+				{%- if label and url -%}
+				<div class="py-2">
+				{{ c('navbar_link', label=label, url=url) }}
+				</div>
+				{%- endif -%}
+
+				{%- endfor -%}
+
+				{%- if cta_label and cta_url -%}
+				{{ c('button', label=cta_label, url=cta_url, variant="primary", class="mt-2") }}
+				{%- endif -%}
+			</div>
+		</details>
+		<div class="items-center hidden text-sm leading-5 sm:flex space-x-8">
 			{%- for index in ['1', '2', '3', '4', '5'] -%}
 
 			{%- set label = values['item_' + index + '_label'] -%}
diff --git a/frappe/website/web_template/section_with_big_cards/section_with_big_cards.html b/frappe/website/web_template/section_with_big_cards/section_with_big_cards.html
index 286c4ef961..6e49ba001a 100644
--- a/frappe/website/web_template/section_with_big_cards/section_with_big_cards.html
+++ b/frappe/website/web_template/section_with_big_cards/section_with_big_cards.html
@@ -1,7 +1,7 @@
 {%- macro card(title, content, url) -%}
 <a href="{{ url or '#' }}" class="block p-8 bg-white border rounded-xl">
 	<h3 class="text-2xl font-semibold">{{ title }}</h3>
-	<p class="mt-4 text-xl text-gray-800">{{ content }}</p>
+	<p class="mt-4 text-lg text-gray-800 sm:text-xl">{{ content }}</p>
 </a>
 {%- endmacro -%}
 
@@ -9,7 +9,7 @@
 {%- if title -%}
 <h2 class="mb-6 text-3xl font-bold">{{ title }}</h2>
 {%- endif -%}
-<div class="grid grid-cols-2 gap-8">
+<div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
 	{%- for index in ['1', '2', '3', '4'] -%}
 	{%- set title = values['card_' + index + '_title'] -%}
 	{%- set content = values['card_' + index + '_content'] -%}
@@ -19,4 +19,3 @@
 	{%- endif -%}
 	{%- endfor -%}
 </div>
-
diff --git a/frappe/website/web_template/section_with_cta/section_with_cta.html b/frappe/website/web_template/section_with_cta/section_with_cta.html
index 9dbff01cbd..9fcea1723f 100644
--- a/frappe/website/web_template/section_with_cta/section_with_cta.html
+++ b/frappe/website/web_template/section_with_cta/section_with_cta.html
@@ -1,7 +1,7 @@
-<div class="py-32 text-center bg-blue-100 rounded-xl">
-	<h2 class="max-w-xl mx-auto text-4xl font-bold leading-tight">{{ title }}</h2>
-	<p class="max-w-xl mx-auto mt-2 text-xl text-gray-800">{{ subtitle }}</p>
+<div class="px-12 py-20 text-center sm:py-32 bg-primary-100 rounded-xl">
+	<h2 class="max-w-xl mx-auto text-2xl font-bold leading-tight sm:text-4xl">{{ title }}</h2>
+	<p class="max-w-xl mx-auto mt-2 text-lg text-gray-800 sm:text-xl">{{ subtitle }}</p>
 	<p class="mt-8">
-		{{ c('button', label=cta_label, url=cta_url, variant="primary") }}
+		{{ c('button', label=cta_label, url=cta_url, variant="primary", size="large") }}
 	</p>
 </div>
diff --git a/frappe/website/web_template/section_with_image/section_with_image.html b/frappe/website/web_template/section_with_image/section_with_image.html
index 4a1414f176..22d3a57696 100644
--- a/frappe/website/web_template/section_with_image/section_with_image.html
+++ b/frappe/website/web_template/section_with_image/section_with_image.html
@@ -1,4 +1,4 @@
 <h2 class="text-3xl font-bold">{{ title }}</h2>
-<p class="mt-2 text-xl text-gray-800">{{ subtitle }}</p>
+<p class="mt-2 text-lg text-gray-800 sm:text-xl">{{ subtitle }}</p>
 
 <img class="w-full mt-8 rounded-xl" src="{{ image }}" alt="{{ image_description }}" />
diff --git a/frappe/website/web_template/section_with_small_cards/section_with_small_cards.html b/frappe/website/web_template/section_with_small_cards/section_with_small_cards.html
index b39f19a6a5..300c3f06a0 100644
--- a/frappe/website/web_template/section_with_small_cards/section_with_small_cards.html
+++ b/frappe/website/web_template/section_with_small_cards/section_with_small_cards.html
@@ -9,7 +9,7 @@
 {%- if title -%}
 <h2 class="mb-6 text-3xl font-bold">{{ title }}</h2>
 {%- endif -%}
-<div class="grid grid-cols-4 gap-8">
+<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
 	{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8'] -%}
 	{%- if values['card_' + index + '_title'] -%}
 	{{ card(values['card_' + index + '_title'], values['card_' + index + '_content']) }}
diff --git a/frappe/website/web_template/section_with_tabs/section_with_tabs.html b/frappe/website/web_template/section_with_tabs/section_with_tabs.html
index 90c658f0b8..3a9c58dfbe 100644
--- a/frappe/website/web_template/section_with_tabs/section_with_tabs.html
+++ b/frappe/website/web_template/section_with_tabs/section_with_tabs.html
@@ -1,5 +1,5 @@
-<h2 class="font-bold text-3xl">{{ title }}</h2>
-<p class="text-xl text-gray-800 mt-2">{{ subtitle }}</p>
+<h2 class="text-3xl font-bold">{{ title }}</h2>
+<p class="mt-2 text-lg text-gray-800 sm:text-xl">{{ subtitle }}</p>
 
 <div class="mt-8">
 	<div class="tabs">
@@ -22,10 +22,10 @@
 		{%- endif -%}
 
 		{%- endfor -%}
-		<div class="space-x-10" role="tablist" aria-label="{{ title or '' }}">
+		<div class="flex py-2 overflow-x-auto space-x-10" role="tablist" aria-label="{{ title or '' }}">
 			{%- for tab in ns.tabs -%}
 			{%- set first_tab = true if loop.index0 == 0 else false -%}
-			<button class="py-4 font-medium focus:outline-none focus:shadow-outline text-gray-800" role="tab" aria-selected="false" aria-controls="{{ tab.panelid }}" id="{{ tab.buttonid }}"
+			<button class="py-4 font-medium text-gray-800 focus:outline-none focus:shadow-outline" role="tab" aria-selected="false" aria-controls="{{ tab.panelid }}" id="{{ tab.buttonid }}"
 				tabindex="{{ 0 if first_tab else -1 }}">
 				{{ tab.title }}
 			</button>
@@ -84,7 +84,7 @@
 		const target = $(e.target);
 		const parent = target.parent();
 		const grandparent = $(parent.parent());
-		const activeClass = 'border-b-2 border-blue-500 text-blue-600';
+		const activeClass = 'border-b-2 border-primary-500 text-primary-600';
 
 		// Remove all current selected tabs
 		parent