vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: Add responsive classes in web templates

Browse source
This commit is contained in:
Faris Ansari 2020-04-21 16:45:51 +05:30
parent 5ea86c6454
commit aee3a3a554
10 changed files with 82 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frappe/website/web_template/footer_horizontal/footer_horizontal.html
View file

@ -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>

4
frappe/website/web_template/hero/hero.html
View file

@ -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>

9
frappe/website/web_template/hero/hero.json
View file

@ -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",

56
frappe/website/web_template/hero_with_right_image/hero_with_right_image.html
View file

@ -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 -%}

40
frappe/website/web_template/navbar_with_links_on_right/navbar_with_links_on_right.html
View file

@ -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'] -%}

5
frappe/website/web_template/section_with_big_cards/section_with_big_cards.html
View file

@ -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>

8
frappe/website/web_template/section_with_cta/section_with_cta.html
View file

@ -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>

2
frappe/website/web_template/section_with_image/section_with_image.html
View file

@ -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 }}" />

2
frappe/website/web_template/section_with_small_cards/section_with_small_cards.html
View file

@ -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']) }}

10
frappe/website/web_template/section_with_tabs/section_with_tabs.html
View file

@ -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