fix(styles): fix styles for my account and web forms
This commit is contained in:
Rushabh Mehta
parent
e034072bac
commit
dffef1285d
10 changed files with 211 additions and 181 deletions
|
|
@ -1,133 +1,159 @@
|
|||
{
|
||||
"accept_payment": 0,
|
||||
"allow_comments": 0,
|
||||
"allow_delete": 0,
|
||||
"allow_edit": 1,
|
||||
"allow_incomplete": 0,
|
||||
"allow_multiple": 0,
|
||||
"allow_print": 0,
|
||||
"amount": 0.0,
|
||||
"amount_based_on_field": 0,
|
||||
"breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]",
|
||||
"creation": "2016-09-19 05:16:59.242754",
|
||||
"doc_type": "User",
|
||||
"docstatus": 0,
|
||||
"doctype": "Web Form",
|
||||
"idx": 0,
|
||||
"introduction_text": "",
|
||||
"is_standard": 1,
|
||||
"login_required": 1,
|
||||
"max_attachment_size": 0,
|
||||
"modified": "2019-01-28 12:45:17.158069",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Core",
|
||||
"name": "edit-profile",
|
||||
"owner": "Administrator",
|
||||
"published": 1,
|
||||
"route": "update-profile",
|
||||
"show_in_grid": 0,
|
||||
"show_sidebar": 1,
|
||||
"sidebar_items": [],
|
||||
"success_message": "Profile updated successfully.",
|
||||
"success_url": "/me",
|
||||
"title": "Update Profile",
|
||||
"accept_payment": 0,
|
||||
"allow_comments": 0,
|
||||
"allow_delete": 0,
|
||||
"allow_edit": 1,
|
||||
"allow_incomplete": 0,
|
||||
"allow_multiple": 0,
|
||||
"allow_print": 0,
|
||||
"amount": 0.0,
|
||||
"amount_based_on_field": 0,
|
||||
"apply_document_permissions": 0,
|
||||
"breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]",
|
||||
"creation": "2016-09-19 05:16:59.242754",
|
||||
"doc_type": "User",
|
||||
"docstatus": 0,
|
||||
"doctype": "Web Form",
|
||||
"idx": 0,
|
||||
"introduction_text": "",
|
||||
"is_multi_step_form": 0,
|
||||
"is_standard": 1,
|
||||
"login_required": 1,
|
||||
"max_attachment_size": 0,
|
||||
"modified": "2022-03-22 15:00:43.456738",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Core",
|
||||
"name": "edit-profile",
|
||||
"owner": "Administrator",
|
||||
"published": 1,
|
||||
"route": "update-profile",
|
||||
"route_to_success_link": 0,
|
||||
"show_attachments": 0,
|
||||
"show_in_grid": 0,
|
||||
"show_sidebar": 0,
|
||||
"sidebar_items": [],
|
||||
"success_message": "Profile updated successfully.",
|
||||
"success_url": "/me",
|
||||
"title": "Update Profile",
|
||||
"web_form_fields": [
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "first_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "First Name",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 1,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "first_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "First Name",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 1,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "middle_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Middle Name (Optional)",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "middle_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Middle Name (Optional)",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "last_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Last Name",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "last_name",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Last Name",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"description": "",
|
||||
"fieldname": "user_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"hidden": 0,
|
||||
"label": "User Image",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "",
|
||||
"fieldtype": "Column Break",
|
||||
"hidden": 0,
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldtype": "Section Break",
|
||||
"hidden": 0,
|
||||
"label": "More Information",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"description": "",
|
||||
"fieldname": "user_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"hidden": 0,
|
||||
"label": "Profile Picture",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "phone",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Phone",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldtype": "Section Break",
|
||||
"hidden": 0,
|
||||
"label": "More Information",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "mobile_no",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Mobile Number",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "phone",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Phone",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"description": "",
|
||||
"fieldname": "language",
|
||||
"fieldtype": "Link",
|
||||
"hidden": 0,
|
||||
"label": "Language",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"options": "Language",
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "mobile_no",
|
||||
"fieldtype": "Data",
|
||||
"hidden": 0,
|
||||
"label": "Mobile Number",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"fieldname": "",
|
||||
"fieldtype": "Column Break",
|
||||
"hidden": 0,
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
},
|
||||
{
|
||||
"allow_read_on_all_link_options": 0,
|
||||
"description": "",
|
||||
"fieldname": "language",
|
||||
"fieldtype": "Link",
|
||||
"hidden": 0,
|
||||
"label": "Language",
|
||||
"max_length": 0,
|
||||
"max_value": 0,
|
||||
"options": "Language",
|
||||
"read_only": 0,
|
||||
"reqd": 0,
|
||||
"show_in_filter": 0
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -164,9 +164,12 @@ export default class WebForm extends frappe.ui.FieldGroup {
|
|||
this.save()
|
||||
);
|
||||
|
||||
this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () =>
|
||||
this.save()
|
||||
);
|
||||
if ($('main').height() > 600) {
|
||||
// add button on footer if page is long
|
||||
this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () =>
|
||||
this.save()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setup_cancel_button() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.web-footer {
|
||||
padding: 5rem 0;
|
||||
margin: 5rem 0;
|
||||
min-height: 140px;
|
||||
background-color: var(--fg-color);
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
|
|
@ -76,8 +78,6 @@
|
|||
}
|
||||
|
||||
.footer-info {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid $border-color;
|
||||
color: $text-muted;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
|
@ -98,4 +98,4 @@
|
|||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,15 +27,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.my-account-container {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
background-color: var(--fg-color);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--padding-sm) 25px;
|
||||
max-width: 850px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: 0;
|
||||
|
|
@ -97,21 +98,3 @@
|
|||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//styles for third party apps page
|
||||
//center wrt to outer most container and not immediate parent
|
||||
.empty-apps-state {
|
||||
position: relative;
|
||||
padding-top: 10rem;
|
||||
margin-left: -250px;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: auto;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,10 @@
|
|||
|
||||
|
||||
[data-doctype="Web Form"] {
|
||||
.page-header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.page-content-wrapper {
|
||||
|
||||
.breadcrumb-container.container {
|
||||
|
|
@ -75,4 +79,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@
|
|||
{% block title %}
|
||||
{{ _("My Account") }}
|
||||
{% endblock %}
|
||||
{% block header %}
|
||||
<h3 class="my-account-header">{{_("My Account") }}</h3>
|
||||
{% endblock %}
|
||||
{% block page_content %}
|
||||
<div class="my-account-container">
|
||||
<h3 class="my-account-header">{{_("My Account") }}</h3>
|
||||
<div class="row account-info d-flex flex-column">
|
||||
<div class="col d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
|
|
@ -79,16 +78,5 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row d-block d-sm-none">
|
||||
<div class="col-12 side-list">
|
||||
<ul class="list-group">
|
||||
{% for item in sidebar_items -%}
|
||||
<a class="list-group-item" href="{{ item.route }}"
|
||||
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||
{{ _(item.title or item.label) }}
|
||||
</a>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -12,4 +12,3 @@ def get_context(context):
|
|||
frappe.throw(_("You need to be logged in to access this page"), frappe.PermissionError)
|
||||
|
||||
context.current_user = frappe.get_doc("User", frappe.session.user)
|
||||
context.show_sidebar=True
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{% extends "templates/web.html" %}
|
||||
|
||||
{% block title %} {{ _("Third Party Apps") }} {% endblock %}
|
||||
{% block header %}
|
||||
<h3 class="my-account-header">{{ _("Third Party Apps") }}</h3>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_sidebar %}
|
||||
{% include "templates/includes/web_sidebar.html" %}
|
||||
|
|
@ -13,25 +10,24 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
|
||||
<div class='padding'></div>
|
||||
|
||||
<h3 class="my-account-header">{{ _("Third Party Apps") }}</h3>
|
||||
<div class="third-party-wrapper">
|
||||
{% if app %}
|
||||
<h4>{{ app.app_name }}</h4>
|
||||
<div class="web-list-item">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="well">
|
||||
<div class="text-muted">{{ _("This will log out {0} from all other devices").format(app.app_name) }}</div>
|
||||
<div class="padding"></div>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-default" onclick="location.href = '/third_party_apps';">Cancel</button>
|
||||
<button class="btn btn-danger btn-delete-app" data-client_id="{{ app.client_id }}">Revoke</button>
|
||||
</div>
|
||||
<div class="web-list-item">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="well">
|
||||
<div class="text-muted">{{ _("This will log out {0} from all other devices").format(app.app_name) }}</div>
|
||||
<div class="padding"></div>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-default" onclick="location.href = '/third_party_apps';">Cancel</button>
|
||||
<button class="btn btn-danger btn-delete-app" data-client_id="{{ app.client_id }}">Revoke</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif apps|length > 0 %}
|
||||
<h4>{{ _("Active Sessions") }}</h4>
|
||||
{% for app in apps %}
|
||||
|
|
@ -62,9 +58,37 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
<script>
|
||||
{% include "templates/includes/integrations/third_party_apps.js" %}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.my-account-header, .third-party-wrapper {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.my-account-header {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.third-party-wrapper {
|
||||
background-color: var(--fg-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.empty-apps-state {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ def get_context(context):
|
|||
context.app = app
|
||||
|
||||
context.apps = client_apps
|
||||
context.show_sidebar = True
|
||||
|
||||
def get_first_login(client):
|
||||
login_date = frappe.get_all("OAuth Bearer Token",
|
||||
|
|
@ -49,4 +48,4 @@ def get_first_login(client):
|
|||
def delete_client(client_id):
|
||||
active_client_id_tokens = frappe.get_all("OAuth Bearer Token", filters=[["user", "=", frappe.session.user], ["client","=", client_id]])
|
||||
for token in active_client_id_tokens:
|
||||
frappe.delete_doc("OAuth Bearer Token", token.get("name"), ignore_permissions=True)
|
||||
frappe.delete_doc("OAuth Bearer Token", token.get("name"), ignore_permissions=True)
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
<form id="reset-password">
|
||||
<div class="form-group">
|
||||
<input id="old_password" type="password"
|
||||
class="form-control" placeholder="{{ _('Old Password') }}">
|
||||
class="form-control mb-4" placeholder="{{ _('Old Password') }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="new_password" type="password"
|
||||
class="form-control" placeholder="{{ _('New Password') }}">
|
||||
class="form-control mb-4" placeholder="{{ _('New Password') }}">
|
||||
<span class="password-strength-indicator indicator"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -216,6 +216,10 @@ frappe.ready(function() {
|
|||
|
||||
{% block style %}
|
||||
<style>
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.password-strength-indicator {
|
||||
float: right;
|
||||
padding: 15px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue