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

Merge pull request #15436 from sumaiya2908/cleanup-portal

Browse source 
refactor(UI): cleanup portal pages
This commit is contained in:
Rushabh Mehta 2022-01-12 10:36:03 +05:30 • committed by GitHub
commit beada02a7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 351 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frappe/public/images/ui-states/empty-app-state.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.4844 25.3281V16.0781" stroke="#F56B6B" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42.6719 25.3281V16.0781" stroke="#F56B6B" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34.5781 50.7656C30.8982 50.7656 27.3691 49.3038 24.767 46.7017C22.165 44.0997 20.7031 40.5705 20.7031 36.8906V25.3281H48.4531V36.8906C48.4531 40.5705 46.9913 44.0997 44.3892 46.7017C41.7872 49.3038 38.258 50.7656 34.5781 50.7656Z" stroke="#98A1A9" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M57.7032 58.8594C63.3462 53.4851 66.9411 46.3131 67.8703 38.576C68.7994 30.8388 67.0046 23.0197 62.7944 16.4622C58.5842 9.90464 52.2215 5.01829 44.7997 2.64279C37.3778 0.267296 29.3604 0.550997 22.125 3.44515C14.8896 6.33929 8.8882 11.6632 5.15204 18.5018C1.41588 25.3405 0.178293 33.267 1.65196 40.9191C3.12562 48.5713 7.21851 55.4712 13.2273 60.4332C19.236 65.3952 26.7855 68.1094 34.5782 68.1094V56.5469" stroke="#98A1A9" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
frappe/public/js/frappe/web_form/web_form_list.js
View file

@ -139,8 +139,6 @@ export default class WebFormList {
make_table_head() {
// Create Heading
let thead = this.table.createTHead();
thead.style.backgroundColor = "#f7fafc";
thead.style.color = "#8d99a6";
let row = thead.insertRow();
let th = document.createElement("th");

10
frappe/public/scss/common/css_variables.scss
View file

@ -165,6 +165,16 @@
--bg-pink: var(--pink-50);
--bg-cyan: var(--cyan-50);
//font sizes
--text-xs: 11px;
--text-sm: 12px;
--text-md: 13px;
--text-base: 14px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 22px;
--text-on-blue: var(--blue-600);
--text-on-light-blue: var(--blue-500);
--text-on-dark-blue: var(--blue-700);

9
frappe/public/scss/desk/css_variables.scss
View file

@ -4,15 +4,6 @@ $input-height: 28px !default;
:root,
[data-theme="light"] {
--text-xs: 11px;
--text-sm: 12px;
--text-md: 13px;
--text-base: 14px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 22px;
// breakpoints
--xxl-width: map-get($grid-breakpoints, '2xl');
--xl-width: map-get($grid-breakpoints, 'xl');

4
frappe/public/scss/login.bundle.scss
View file

@ -1,7 +1,9 @@
@import "./desk/variables";
body {
background-color: var(--bg-light-gray);
@include media-breakpoint-up(sm) {
background-color: var(--bg-light-gray);
}
}
.for-forgot,

2
frappe/public/scss/website/footer.scss
View file

@ -94,6 +94,8 @@
max-width: 300px;
border: 1px solid var(--dark-border-color);
box-shadow: none;
border-radius: var(--border-radius);
font-size: $font-size-sm;
}
}
}

16
frappe/public/scss/website/index.scss
View file

@ -27,6 +27,14 @@
@import 'navbar';
@import 'footer';
@import 'error-state';
@import 'my_account';
body {
@include media-breakpoint-up(sm) {
background-color: var(--bg-color);
}
}
.ql-editor.read-mode {
padding: 0;
@ -166,6 +174,10 @@ a.card {
font-size: inherit;
}
.indicator-pill {
font-size: var(--font-size-xs)
}
h4.modal-title {
font-size: 1em;
}
@ -298,3 +310,7 @@ h5.modal-title {
margin: 70px auto;
font-size: $font-size-sm;
}
.empty-list-icon {
height: 70px;
}

116
frappe/public/scss/website/my_account.scss Normal file
View file

@ -0,0 +1,116 @@
//styles for my account and edit-profile page
@include media-breakpoint-up(sm) {
body[data-path="me"],
body[data-path="list"] {
background-color: var(--bg-color);
}
}
@include media-breakpoint-down(sm) {
#page-me {
.side-list {
.list-group {
display: none;
}
}
}
}
.my-account-header {
color: var(--gray-900);
margin-bottom: var(--margin-lg);
font-weight: bold;
@include media-breakpoint-down(sm) {
margin-left: -1rem;
}
}
.account-info {
background-color: var(--fg-color);
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;
}
.my-account-name,
.my-account-item {
color: var(--gray-900);
font-weight: var(--text-bold);
}
.my-account-avatar {
.avatar {
height: 60px;
width: 60px;
}
}
.my-account-item-desc {
color: var(--gray-700);
font-size: var(--text-md);
}
.my-account-item-link {
font-size: var(--text-md);
a {
text-decoration: none;
.edit-profile-icon {
stroke: var(--blue-500);
}
}
.right-icon {
@include media-breakpoint-up(sm) {
display: none;
}
}
.item-link-text {
@include media-breakpoint-down(sm) {
display: none;
}
}
}
.col {
padding: var(--padding-md) 0;
border-bottom: 1px solid var(--border-color);
.form-group {
margin-right: var(--margin-lg);
}
}
:last-child {
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;
}
}

47
frappe/public/scss/website/web_form.scss
View file

@ -1,5 +1,31 @@
@import "../common/form";
[data-doctype="Web Form"] {
.page-content-wrapper {
.breadcrumb-container.container {
@include media-breakpoint-up(sm) {
padding-left: var(--padding-sm);
}
}
.container {
max-width: 800px;
&.my-4 {
background-color: var(--fg-color);
@include media-breakpoint-up(sm) {
padding: 1.8rem;
border-radius: var(--border-radius-md);
box-shadow: var(--card-shadow);
}
}
}
}
}
.web-form-wrapper {
.form-control {
color: var(--text-color);
@ -16,6 +42,7 @@
.form-column {
padding: 0 var(--padding-md);
&:first-child {
padding-left: 0;
}
@ -24,4 +51,24 @@
padding-right: 0;
}
}
}
.web-form-wrapper~#datatable {
.table {
thead {
th {
border: 0;
font-weight: normal;
color: var(--text-muted)
}
}
tr {
color: var(--text-color);
td {
border-top: 1px solid var(--border-color);
}
}
}
}

5
frappe/templates/includes/list/list.html
View file

@ -2,8 +2,9 @@
<h4 class="text-muted">{{ sub_title }}</h4>
{% endif %}
{% if not result -%}
<div class="text-muted" style="min-height: 300px;">
{{ no_result_message or _("Nothing to show") }}
<div class="empty-apps-state">
<img class="empty-list-icon" src="/assets/frappe/images/ui-states/list-empty-state.svg"/>
<div class="mt-4">{{ no_result_message or _("Nothing to show") }}</div>
</div>
{% else %}
<div class="website-list" data-doctype="{{ doctype }}"

90
frappe/templates/styles/card_style.css
View file

@ -2,79 +2,87 @@
background-color: var(--bg-color);
}
body {
background-color: var(--bg-color);
}
.page-card {
max-width: 360px;
padding: 15px;
margin: 70px auto;
border-radius: 4px;
background-color: var(--fg-color);
box-shadow: var(--shadow-base);
max-width: 360px;
padding: 15px;
margin: 70px auto;
border-radius: 4px;
background-color: var(--fg-color);
/* box-shadow: var(--shadow-base); */
}
.for-reset-password {
margin: 80px 0;
}
margin: 80px 0;
}
.for-reset-password .page-card {
border: 0;
max-width: 450px;
margin: auto;
padding: 40px 60px;
border-radius: 10px;
box-shadow: var(--shadow-base);
border: 0;
max-width: 450px;
margin: auto;
border-radius: 10px;
}
@media (min-width: 567px) {
.for-reset-password .page-card {
box-shadow: var(--shadow-base);
padding: 40px 60px;
}
}
.page-card .page-card-head {
padding: 10px 15px;
margin: -15px;
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
padding: 10px 15px;
margin: -15px;
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.for-reset-password .page-card .page-card-head {
border-bottom: 0;
.for-reset-password .page-card .page-card-head {
border-bottom: 0;
}
.page-card-head h4 {
font-size: 18px;
font-weight: 600;
font-size: 18px;
font-weight: 600;
}
#reset-password .form-group {
margin-bottom: 10px;
font-size: var(--font-size-sm);
margin-bottom: 10px;
font-size: var(--font-size-sm);
}
.page-card .page-card-head .indicator {
color: #36414C;
font-size: 14px;
color: #36414C;
font-size: 14px;
}
.sign-up-message {
margin-top: 20px;
font-size: 13px;
color: var(--text-color);
margin-top: 20px;
font-size: 13px;
color: var(--text-color);
}
.page-card .page-card-head .indicator::before {
margin: 0 6px 0.5px 0px;
margin: 0 6px 0.5px 0px;
}
button#update {
font-size: var(--font-size-sm);
font-size: var(--font-size-sm);
}
.page-card .btn {
margin-top: 30px;
margin-top: 30px;
}
.page-card p {
font-size: 14px;
font-size: 14px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
vertical-align: middle;
}
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
vertical-align: middle;
}

8
frappe/website/doctype/web_form/templates/web_form.html
View file

@ -3,7 +3,7 @@
{% block title %}{{ _(title) }}{% endblock %}
{% block header %}
<h2>{{ _(title) }}</h2>
<h3>{{ _(title) }}</h3>
{% endblock %}
{% block breadcrumbs %}
@ -29,8 +29,8 @@ data-web-form="{{ name }}" data-web-form-doctype="{{ doc_type }}" data-login-req
{% if is_list %}
{# web form list #}
<div class="web-form-wrapper" {{ container_attributes() }}></div>
<div id="list-filters" class="row"></div>
<div id="datatable" class="pt-4"></div>
<div id="list-filters" class="row mt-4"></div>
<div id="datatable" class="pt-4 overflow-auto"></div>
<div class="list-view-footer text-right"></div>
{% else %}
{# web form #}
@ -38,7 +38,7 @@ data-web-form="{{ name }}" data-web-form-doctype="{{ doc_type }}" data-login-req
<div id="introduction" class="text-muted"></div>
<hr>
<div class="web-form-wrapper" {{ container_attributes() }}></div>
<div class="web-form-footer pull-right"></div>
<div class="web-form-footer text-right"></div>
</div>
{% if show_attachments and not frappe.form_dict.new and attachments %}

2
frappe/website/doctype/web_form/test_web_form.py
View file

@ -66,7 +66,7 @@ class TestWebForm(unittest.TestCase):
def test_webform_render(self):
content = get_response_content('request-data')
self.assertIn('<h2>Request Data</h2>', content)
self.assertIn('<h3>Request Data</h3>', content)
self.assertIn('data-doctype="Web Form"', content)
self.assertIn('data-path="request-data"', content)
self.assertIn('source-type="Generator"', content)

10
frappe/www/list.html
View file

@ -5,7 +5,7 @@
{% endblock %}
{% block header %}
<h1>{{ title or (_("{0} List").format(_(doctype))) }}</h1>
<h3 class="my-account-header">{{ title or (_("{0} List").format(_(doctype))) }}</h3>
{% endblock %}
{% block breadcrumbs %}
@ -23,11 +23,9 @@
{% endblock %}
{% block page_content %}
{% if introduction %}<p>{{ introduction }}</p>{% endif %}
{% include list_template or "templates/includes/list/list.html" %}
{% if list_footer %}{{ list_footer }}{% endif %}
{% if introduction %}<p>{{ introduction }}</p>{% endif %}
{% include list_template or "templates/includes/list/list.html" %}
{% if list_footer %}{{ list_footer }}{% endif %}
{% endblock %}
{% block script %}

97
frappe/www/me.html
View file

@ -1,31 +1,94 @@
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
{% extends "templates/web.html" %}
{% block title %}{{ _("My Account") }}{% endblock %}
{% block header %}<h1>{{ _("My Account") }}</h1>{% endblock %}
{% block title %}
{{ _("My Account") }}
{% endblock %}
{% block header %}
<h3 class="my-account-header">{{_("My Account") }}</h3>
{% endblock %}
{% block page_content %}
<div class="row your-account-info d-none d-sm-block">
<div class="col-sm-4">
<ul class="list-unstyled">
<li><a href="/update-password">{{ _("Reset Password") }}</a></li>
<li><a href="/update-profile?name={{ user }}">{{ _("Edit Profile") }}</a></li>
<li><a href="/third_party_apps">{{ _("Manage Third Party Apps") }}</a></li>
{% if frappe.db.get_single_value("Website Settings", "show_account_deletion_link") %}
<li><a href="/request-for-account-deletion?new=1">{{ _("Request for Account Deletion") }}</a></li>
{% endif %}
</ul>
<div class="row account-info d-flex flex-column">
<div class="col d-flex justify-content-between align-items-center">
<div>
<span class="my-account-avatar">
{{avatar(current_user.name)}}
</span>
<span class="my-account-name ml-4">
{{current_user.full_name }}
</span>
</div>
<div>
<span class="my-account-item-link">
<a href="/update-profile?name={{ user }}">
<svg class="edit-profile-icon icon icon-md">
<use xlink:href="#icon-edit">
</use>
</svg>
<span class="item-link-text pl-2">
{{_("Edit Profile") }}
</span>
</a>
</span>
</div>
</div>
<div class="col d-flex justify-content-between align-items-center">
<span>
<div class="my-account-item">{{_("Reset Password") }}</div>
<div class="my-account-item-desc">{{_("Reset the password for your account") }}</div>
</span>
<span class="my-account-item-link">
<a href="/update-password">
<svg class="right-icon icon icon-md">
<use xlink:href="#icon-right">
</use>
</svg>
<span class="item-link-text">{{_("Reset Password") }}</span>
</a>
</span>
</div>
<div class="col d-flex justify-content-between align-items-center">
<span>
<div class="my-account-item">{{_("Manage third party apps") }}</div>
<div class="my-account-item-desc">{{_("To manage your authorized third party apps") }}</div>
</span>
<span class="my-account-item-link">
<a href="/third_party_apps">
<svg class="right-icon icon icon-md">
<use xlink:href="#icon-right">
</use>
</svg>
<span class="item-link-text">{{_("Manage your apps") }}</span>
</a>
</span>
</div>
{% if frappe.db.get_single_value("Website Settings", "show_account_deletion_link") %}
<div class="col d-flex justify-content-between align-items-center">
<span>
<div class="my-account-item">{{_("Request Account Deletion") }}</div>
<div class="my-account-item-desc">{{_("Send a request to delete your account") }}</div>
</span>
<span class="my-account-item-link">
<a href="/request-for-account-deletion?new=1">
<svg class="right-icon icon icon-md">
<use xlink:href="#icon-right">
</use>
</svg>
<span class="item-link-text">{{_("Delete Account") }}</span>
</a>
</span>
</div>
{% endif %}
</div>
<div class="row d-block d-sm-none">
<div class="col-12">
<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 %}
{%- endfor %}
</ul>
</div>
</div>
{% endblock %}
{% endblock %}

3
frappe/www/me.py
View file

@ -10,5 +10,6 @@ no_cache = 1
def get_context(context):
if frappe.session.user=='Guest':
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

10
frappe/www/third_party_apps.html
View file

@ -2,7 +2,7 @@
{% block title %} {{ _("Third Party Apps") }} {% endblock %}
{% block header %}
<h1>{{ _("Third Party Apps") }}</h1>
<h3 class="my-account-header">{{ _("Third Party Apps") }}</h3>
{% endblock %}
{% block page_sidebar %}
@ -52,9 +52,15 @@
</div>
{% endfor %}
{% else %}
<div class="text-muted">
<div class="empty-apps-state">
<img src="/assets/frappe/images/ui-states/empty-app-state.svg"/>
<div class="font-weight-bold mt-4">
{{ _("No Active Sessions")}}
</div>
<div class="text-muted mt-2">
{{ _("Looks like you haven’t added any third party apps.")}}
</div>
</div>
{% endif %}
<div class="padding"></div>
<script>