fix(website): Make language select optional and fix breakpoint issuesversion-14
@@ -90,6 +90,13 @@ | |||||
margin: 2rem 0; | margin: 2rem 0; | ||||
} | } | ||||
@media (max-width: map-get($grid-breakpoints, "lg")) { | |||||
.page-content-wrapper .container { | |||||
padding-left: 1rem; | |||||
padding-right: 1rem; | |||||
} | |||||
} | |||||
.breadcrumb-container { | .breadcrumb-container { | ||||
margin-top: 1rem; | margin-top: 1rem; | ||||
padding-top: 0.25rem; | padding-top: 0.25rem; | ||||
@@ -1,3 +1,15 @@ | |||||
.navbar { | |||||
padding-left: 0; | |||||
padding-right: 0; | |||||
} | |||||
@media (max-width: map-get($grid-breakpoints, "lg")) { | |||||
.navbar { | |||||
padding-left: 1rem; | |||||
padding-right: 1rem; | |||||
} | |||||
} | |||||
.navbar-light { | .navbar-light { | ||||
border-bottom: 1px solid $border-color; | border-bottom: 1px solid $border-color; | ||||
background: $navbar-bg; | background: $navbar-bg; | ||||
@@ -96,4 +108,4 @@ | |||||
@extend .ellipsis; | @extend .ellipsis; | ||||
max-width: 100%; | max-width: 100%; | ||||
vertical-align: middle; | vertical-align: middle; | ||||
} | |||||
} |
@@ -56,6 +56,8 @@ | |||||
} | } | ||||
window.dev_server = {{ dev_server }}; | window.dev_server = {{ dev_server }}; | ||||
window.socketio_port = {{ (frappe.socketio_port or 'null') }}; | window.socketio_port = {{ (frappe.socketio_port or 'null') }}; | ||||
window.show_language_picker = {{ show_language_picker }}; | |||||
window.is_chat_enabled = {{ chat_enable }}; | |||||
</script> | </script> | ||||
</head> | </head> | ||||
<body frappe-session-status="{{ 'logged-in' if frappe.session.user != 'Guest' else 'logged-out'}}" data-path="{{ path | e }}" {%- if template and template.endswith('.md') %} frappe-content-type="markdown" {% endif -%} class="{{ body_class or ''}}"> | <body frappe-session-status="{{ 'logged-in' if frappe.session.user != 'Guest' else 'logged-out'}}" data-path="{{ path | e }}" {%- if template and template.endswith('.md') %} frappe-content-type="markdown" {% endif -%} class="{{ body_class or ''}}"> | ||||
@@ -110,39 +112,5 @@ | |||||
{%- endblock %} | {%- endblock %} | ||||
<!-- csrf_token --> | <!-- csrf_token --> | ||||
{%- block body_include %}{{ body_include or "" }}{% endblock -%} | {%- block body_include %}{{ body_include or "" }}{% endblock -%} | ||||
<script> | |||||
frappe.ready(() => { | |||||
if (frappe.session.user === 'Guest') { | |||||
frappe.call("frappe.translate.get_all_languages", { | |||||
with_language_name: true | |||||
}).then(res => { | |||||
let language_list = res.message; | |||||
let language = frappe.get_cookie('preferred_language'); | |||||
let language_codes = []; | |||||
language_list.forEach(language_doc => { | |||||
language_codes.push(language_doc.language_code) | |||||
$("#language-switcher") | |||||
.append( | |||||
$("<option></option>") | |||||
.attr("value", language_doc.language_code) | |||||
.text(language_doc.language_name) | |||||
); | |||||
}); | |||||
$("#language-switcher").removeClass('hide'); | |||||
language = language || (language_codes.includes(navigator.language) ? navigator.language : 'en'); | |||||
$("#language-switcher").val(language); | |||||
document.documentElement.lang = language; | |||||
$("#language-switcher").change((e) => { | |||||
let lang = $("#language-switcher").val(); | |||||
frappe.call("frappe.translate.set_preferred_language_cookie", { | |||||
"preferred_language": lang | |||||
}).then(() => { | |||||
window.location.reload(); | |||||
}); | |||||
}); | |||||
}); | |||||
} | |||||
}) | |||||
</script> | |||||
</body> | </body> | ||||
</html> | </html> |
@@ -21,8 +21,8 @@ | |||||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||||
{% include "templates/includes/navbar/navbar_items.html" %} | {% include "templates/includes/navbar/navbar_items.html" %} | ||||
</div> | </div> | ||||
<div class="form-group mb-0"> | |||||
<select class="form-control hide" id="language-switcher"></select> | |||||
<div class="form-group mb-0 hide" id="language-switcher"> | |||||
<select class="form-control"></select> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</nav> | </nav> |
@@ -25,9 +25,11 @@ | |||||
"set_banner_from_image", | "set_banner_from_image", | ||||
"favicon", | "favicon", | ||||
"top_bar", | "top_bar", | ||||
"navbar_search", | |||||
"hide_login", | |||||
"top_bar_items", | "top_bar_items", | ||||
"hide_login", | |||||
"navbar_search", | |||||
"show_language_picker", | |||||
"navbar_template_section", | |||||
"navbar_template", | "navbar_template", | ||||
"navbar_template_values", | "navbar_template_values", | ||||
"edit_navbar_template_values", | "edit_navbar_template_values", | ||||
@@ -410,6 +412,19 @@ | |||||
"fieldname": "google_analytics_anonymize_ip", | "fieldname": "google_analytics_anonymize_ip", | ||||
"fieldtype": "Check", | "fieldtype": "Check", | ||||
"label": "Google Analytics Anonymize IP" | "label": "Google Analytics Anonymize IP" | ||||
}, | |||||
{ | |||||
"default": "0", | |||||
"fieldname": "show_language_picker", | |||||
"fieldtype": "Check", | |||||
"label": "Show Language Picker" | |||||
}, | |||||
{ | |||||
"collapsible": 1, | |||||
"collapsible_depends_on": "navbar_template", | |||||
"fieldname": "navbar_template_section", | |||||
"fieldtype": "Section Break", | |||||
"label": "Navbar Template" | |||||
} | } | ||||
], | ], | ||||
"icon": "fa fa-cog", | "icon": "fa fa-cog", | ||||
@@ -418,7 +433,7 @@ | |||||
"issingle": 1, | "issingle": 1, | ||||
"links": [], | "links": [], | ||||
"max_attachments": 10, | "max_attachments": 10, | ||||
"modified": "2021-04-13 10:22:51.888788", | |||||
"modified": "2021-04-14 17:39:56.609771", | |||||
"modified_by": "Administrator", | "modified_by": "Administrator", | ||||
"module": "Website", | "module": "Website", | ||||
"name": "Website Settings", | "name": "Website Settings", | ||||
@@ -121,7 +121,8 @@ def get_website_settings(context=None): | |||||
"facebook_share", "google_plus_one", "twitter_share", "linked_in_share", | "facebook_share", "google_plus_one", "twitter_share", "linked_in_share", | ||||
"disable_signup", "hide_footer_signup", "head_html", "title_prefix", | "disable_signup", "hide_footer_signup", "head_html", "title_prefix", | ||||
"navbar_template", "footer_template", "navbar_search", "enable_view_tracking", | "navbar_template", "footer_template", "navbar_search", "enable_view_tracking", | ||||
"footer_logo", "call_to_action", "call_to_action_url"]: | |||||
"footer_logo", "call_to_action", "call_to_action_url", "show_language_picker", | |||||
"chat_enable"]: | |||||
if hasattr(settings, k): | if hasattr(settings, k): | ||||
context[k] = settings.get(k) | context[k] = settings.get(k) | ||||
@@ -178,7 +179,3 @@ def get_items(parentfield): | |||||
t['child_items'].append(d) | t['child_items'].append(d) | ||||
break | break | ||||
return top_items | return top_items | ||||
@frappe.whitelist(allow_guest=True) | |||||
def is_chat_enabled(): | |||||
return bool(frappe.db.get_single_value('Website Settings', 'chat_enable')) |
@@ -376,6 +376,39 @@ $.extend(frappe, { | |||||
// Start observing an element | // Start observing an element | ||||
io.observe(el); | io.observe(el); | ||||
}); | }); | ||||
}, | |||||
show_language_picker() { | |||||
if (frappe.session.user === 'Guest' && window.show_language_picker) { | |||||
frappe.call("frappe.translate.get_all_languages", { | |||||
with_language_name: true | |||||
}).then(res => { | |||||
let language_list = res.message; | |||||
let language = frappe.get_cookie('preferred_language'); | |||||
let language_codes = []; | |||||
let language_switcher = $("#language-switcher .form-control"); | |||||
language_list.forEach(language_doc => { | |||||
language_codes.push(language_doc.language_code); | |||||
language_switcher | |||||
.append( | |||||
$("<option></option>") | |||||
.attr("value", language_doc.language_code) | |||||
.text(language_doc.language_name) | |||||
); | |||||
}); | |||||
$("#language-switcher").removeClass('hide'); | |||||
language = language || (language_codes.includes(navigator.language) ? navigator.language : 'en'); | |||||
language_switcher.val(language); | |||||
document.documentElement.lang = language; | |||||
language_switcher.change(() => { | |||||
let lang = language_switcher.val(); | |||||
frappe.call("frappe.translate.set_preferred_language_cookie", { | |||||
"preferred_language": lang | |||||
}).then(() => { | |||||
window.location.reload(); | |||||
}); | |||||
}); | |||||
}); | |||||
} | |||||
} | } | ||||
}); | }); | ||||
@@ -599,17 +632,13 @@ $(document).on("page-change", function() { | |||||
frappe.ready(function() { | frappe.ready(function() { | ||||
frappe.call({ | |||||
method: 'frappe.website.doctype.website_settings.website_settings.is_chat_enabled', | |||||
callback: (r) => { | |||||
if (r.message) { | |||||
frappe.require(['/assets/js/moment-bundle.min.js', "/assets/css/frappe-chat-web.css", "/assets/frappe/js/lib/socket.io.min.js"], () => { | |||||
frappe.require('/assets/js/chat.js', () => { | |||||
frappe.chat.setup(); | |||||
}); | |||||
}); | |||||
} | |||||
} | |||||
}); | |||||
frappe.show_language_picker(); | |||||
if (window.is_chat_enabled) { | |||||
frappe.require(['/assets/js/moment-bundle.min.js', "/assets/css/frappe-chat-web.css", "/assets/frappe/js/lib/socket.io.min.js"], () => { | |||||
frappe.require('/assets/js/chat.js', () => { | |||||
frappe.chat.setup(); | |||||
}); | |||||
}); | |||||
} | |||||
frappe.socketio.init(window.socketio_port); | frappe.socketio.init(window.socketio_port); | ||||
}); | }); |