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

Cleanup html, add css for mobile, fixed class names in code

Browse source
This commit is contained in:
Faris Ansari 2017-04-02 17:59:07 +05:30
parent 7c5483afc0
commit a84a40cfca
15 changed files with 147 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/public/build.json
View file

@ -233,9 +233,7 @@
"public/js/frappe/list/list_sidebar.html",
"public/js/frappe/list/list_sidebar_stat.html",
"public/js/frappe/list/list_item_main.html",
"public/js/frappe/list/list_item_main_1.html",
"public/js/frappe/list/list_item_row.html",
"public/js/frappe/list/list_item_row_1.html",
"public/js/frappe/list/list_item_main_head.html",
"public/js/frappe/list/list_item_row_head.html",
"public/js/frappe/list/list_item_subject.html",

35
frappe/public/css/list.css
View file

@ -386,7 +386,6 @@
}
.list-items {
width: 100%;
font-size: 12px;
}
.list-item-container {
border-bottom: 1px solid #d1d8dd;
@ -399,8 +398,17 @@
align-items: center;
height: 40px;
padding-left: 15px;
font-size: 12px;
}
.list-item__head {
@media (max-width: 767px) {
.list-item {
height: 50px;
padding-left: 10px;
font-size: 14px;
font-weight: normal;
}
}
.list-item--head {
background-color: #F7FAFC;
border-bottom: 1px solid #d1d8dd;
}
@ -414,13 +422,30 @@
margin-left: 5px;
margin-right: 10px;
}
.list-item--content {
.list-item__content {
flex: 1;
margin-right: 15px;
display: flex;
align-items: center;
}
.list-item--content__flex-2 {
.list-item__content--flex-2 {
flex: 2;
}
.list-item--content:last-child {
.list-item__content--activity {
justify-content: flex-end;
margin-right: 5px;
}
.list-item__content--activity .list-row-modified,
.list-item__content--activity .avatar-small {
margin-right: 10px;
}
.list-item__content--indicator span::before {
height: 12px;
width: 12px;
}
.list-item__content--id {
justify-content: flex-end;
}
.frappe-timestamp {
white-space: nowrap;
}

2
frappe/public/js/frappe/list/header_select_all_like_filter.html
View file

@ -1,5 +1,5 @@
{% if (_checkbox) { %}
<input class="list-select-all" type="checkbox"
<input class="list-select-all hidden-xs" type="checkbox"
title="{%= __("Select All") %}">
{% } %}
<span class="liked-by-filter-button">

32
frappe/public/js/frappe/list/item_assigned_to_comment_count.html
View file

@ -1,17 +1,15 @@
<div class="hidden-xs">
<span class="list-row-modified text-muted">
{%= comment_when(data.modified, true) %}
</span>
{% if (data._assign_list.length) { %}
<span class="filterable"
data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
{% } else { %}
<span class="avatar avatar-small avatar-empty"></span>
{% } %}
<span class="list-comment-count small
{% if(!data._comment_count) { %} text-extra-muted {% } else { %} text-muted {% } %}">
<i class="octicon octicon-comment-discussion"></i>
{%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %}
</span>
</div>
<span class="list-row-modified text-muted">
{%= comment_when(data.modified, true) %}
</span>
{% if (data._assign_list.length) { %}
<span class="filterable"
data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
{% } else { %}
<span class="avatar avatar-small avatar-empty"></span>
{% } %}
<span class="list-comment-count small
{% if(!data._comment_count) { %} text-extra-muted {% } else { %} text-muted {% } %}">
<i class="octicon octicon-comment-discussion"></i>
{%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %}
</span>

87
frappe/public/js/frappe/list/list_item_main.html
View file

@ -1,49 +1,40 @@
<div class="row">
{% var total_cols=0; for (var i=0, l=columns.length; i < l; i++ ) {
var col = columns[i], value=data[col.fieldname]; total_cols += parseInt(col.colspan); %}
{% if (total_cols <= 12) { %}
<div class="col-sm-{%= col.colspan %} list-col ellipsis
{% if(col.type==="Subject") {
if (right_column) { %}
col-xs-9
{% } else { %}
col-xs-12
{% } %}
{% } else if(right_column && col.fieldname===right_column) { %}
col-xs-3
{% } else { %}
hidden-xs
{% } %}
{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}"
{% if(col.type!=="Indicator" && col.title) { %}title="{%= col.title + ": " + value %}"{% } %}>
{% if(col.type!=="Indicator") { %}<span class="list-value">{% } %}
{% if (col.type==="Subject") { %}
{%= subject %}
{% } else if (col.type==="Indicator") { %}
{%= indicator %}
{% } else if (col.render) { %}
{%= col.render(data) %}
{% } else if (col.fieldtype==="Image") { %}
{% if(data[col.df.options]) { %}
<img src="{%= data[col.df.options] %}" style="max-height: 30px; max-width: 100%;">
{% } else { %}
<div class="missing-image small"><span class="octicon octicon-circle-slash"></span></div>
{% } %}
{% } else if(col.fieldtype==="Select") { %}
<span class="filterable indicator {%= frappe.utils.guess_colour(value) %}"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= __(value) %}</span>
{% } else if(col.fieldtype==="Link") { %}
<a class="filterable h6 text-muted grey"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= value %}</a>
{% } else { %}
{% if(formatters && formatters[col.fieldname]) { %}
{{ formatters[col.fieldname](value, col.df, data) }}
{% } else { %}
{{ frappe.format(value, col.df, null, data) }}
{% } %}
{% } %}
{% if(col.type!=="Indicator") { %}</span>{% } %}
</div>
{% } %}
<div class="list-item__content ellipsis
{% if(col.type==="Subject") { %}
list-item__content--flex-2
{% } else { %}
hidden-xs
{% } %}
</div>
{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}"
{% if(col.type!=="Indicator" && col.title) { %}
title="{%= col.title + ": " + value %}"
{% } %}
>
{% if (col.type==="Subject") { %}
{%= subject %}
{% } else if (col.type==="Indicator") { %}
{%= indicator %}
{% } else if (col.render) { %}
{%= col.render(data) %}
{% } else if (col.fieldtype==="Image") { %}
{% if(data[col.df.options]) { %}
<img src="{%= data[col.df.options] %}" style="max-height: 30px; max-width: 100%;">
{% } else { %}
<div class="missing-image small"><span class="octicon octicon-circle-slash"></span></div>
{% } %}
{% } else if(col.fieldtype==="Select") { %}
<span class="filterable indicator {%= frappe.utils.guess_colour(value) %} ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= __(value) %}</span>
{% } else if(col.fieldtype==="Link") { %}
<a class="filterable text-muted grey ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= value %}</a>
{% } else { %}
<a class="filterable text-muted ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">
{% if(formatters && formatters[col.fieldname]) { %}
{{ formatters[col.fieldname](value, col.df, data) }}
{% } else { %}
{{ frappe.format(value, col.df, null, data) }}
{% } %}
</a>
{% } %}
</div>

40
frappe/public/js/frappe/list/list_item_main_1.html
View file

@ -1,40 +0,0 @@
<div class="list-item--content ellipsis
{% if(col.type==="Subject") { %}
list-item--content__flex-2
{% } else { %}
hidden-xs
{% } %}
{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}"
{% if(col.type!=="Indicator" && col.title) { %}
title="{%= col.title + ": " + value %}"
{% } %}
>
{% if (col.type==="Subject") { %}
{%= subject %}
{% } else if (col.type==="Indicator") { %}
{%= indicator %}
{% } else if (col.render) { %}
{%= col.render(data) %}
{% } else if (col.fieldtype==="Image") { %}
{% if(data[col.df.options]) { %}
<img src="{%= data[col.df.options] %}" style="max-height: 30px; max-width: 100%;">
{% } else { %}
<div class="missing-image small"><span class="octicon octicon-circle-slash"></span></div>
{% } %}
{% } else if(col.fieldtype==="Select") { %}
<span class="filterable indicator {%= frappe.utils.guess_colour(value) %} ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= __(value) %}</span>
{% } else if(col.fieldtype==="Link") { %}
<a class="filterable text-muted grey ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">{%= value %}</a>
{% } else { %}
<a class="filterable text-muted ellipsis"
data-filter="{%= col.fieldname %},=,{%= value %}">
{% if(formatters && formatters[col.fieldname]) { %}
{{ formatters[col.fieldname](value, col.df, data) }}
{% } else { %}
{{ frappe.format(value, col.df, null, data) }}
{% } %}
</a>
{% } %}
</div>

6
frappe/public/js/frappe/list/list_item_main_head.html
View file

@ -1,6 +1,6 @@
<div class="list-item--content ellipsis h6 text-muted
<div class="list-item__content ellipsis text-muted
{% if(col.type==="Subject") { %}
list-item--content__flex-2
list-item__content--flex-2
{% } else { %}
hidden-xs
{% } %}
@ -10,6 +10,6 @@
{% if (col.type==="Subject") { %}
{%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %}
{% } %}
<span class="list-col-title">{{ __(col.title) || __(col.label) || "" }}</span>
<span class="list-col-title ellipsis">{{ __(col.title) || __(col.label) || "" }}</span>
</div>

35
frappe/public/js/frappe/list/list_item_row.html
View file

@ -1,31 +1,24 @@
<div class="row doclist-row {% if (data._checkbox) { %} has-checkbox {% } %}">
<div class="col-xs-10
{% if (meta.title_field && !settings.hide_name_column) { %}
col-sm-8
{% } else { %}
col-sm-10
{% } %} list-row-left">
<!-- title + columns -->
{%= main %}
</div>
<div class="list-item">
{%= main %}
<!-- id -->
{% if (meta.title_field && !settings.hide_name_column) {
var is_different = data.name !== data[meta.title_field];
%}
<div class="list-col col-sm-2 hidden-xs text-right ellipsis list-row-id">
{% if (is_different) { %}
<a class="text-muted list-value" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
var is_different = data.name !== data[meta.title_field];
%}
<div class="list-item__content list-item__content--id text-right hidden-xs hidden-sm">
{% if (is_different) { %}
<a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
{%= data.name %}</a>
{% } %}
{% } %}
</div>
{% } %}
<!-- comment -->
<div class="list-col col-sm-2 col-xs-2
text-right list-row-right" style="padding-left:0px">
<div class="visible-xs list-row-indicator">{%= indicator_dot %}</div>
<!-- comments count and assigned to section -->
{%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
<div class="list-item__content list-item__content--activity hidden-xs">
<!-- comments count and assigned to section -->
{%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
</div>
<div class="list-item__content list-item__content--indicator visible-xs text-right">
{%= indicator_dot %}
</div>
</div>

22
frappe/public/js/frappe/list/list_item_row_1.html
View file

@ -1,22 +0,0 @@
<div class="list-item">
{%= main %}
<!-- id -->
{% if (meta.title_field && !settings.hide_name_column) {
var is_different = data.name !== data[meta.title_field];
%}
<div class="list-item--content text-right list-row-id">
{% if (is_different) { %}
<a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
{%= data.name %}</a>
{% } %}
</div>
{% } %}
<!-- comment -->
<div class="list-item--content text-right list-row-right" style="padding-left:0px">
<div class="visible-xs list-row-indicator">{%= indicator_dot %}</div>
<!-- comments count and assigned to section -->
{%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
</div>
</div>

6
frappe/public/js/frappe/list/list_item_row_head.html
View file

@ -1,11 +1,11 @@
<div class="list-item list-item__head" data-list-renderer="{{list.name}}">
<div class="list-item list-item--head" data-list-renderer="{{list.name}}">
<!-- title + columns -->
{%= main %}
<!-- id -->
{% if(!list.settings.hide_name_column) { %}
<div class="list-item--content"></div>
<div class="list-item__content hidden-xs hidden-sm"></div>
{% } %}
<!-- comment -->
<div class="list-item--content hidden-xs text-right list-row-right"></div>
<div class="list-item__content list-item__content--activity hidden-xs text-right list-row-right"></div>
</div>

2
frappe/public/js/frappe/list/list_item_subject.html
View file

@ -1,5 +1,5 @@
{% if (_checkbox) { %}
<input class="list-row-checkbox" type="checkbox" data-name="{{name}}">
<input class="list-row-checkbox hidden-xs" type="checkbox" data-name="{{name}}">
{% } %}
<span class="liked-by" data-liked-by=\'{{ JSON.stringify(_liked_by) }}\'>
<i class="octicon octicon-heart

4
frappe/public/js/frappe/list/list_view.js
View file

@ -250,9 +250,9 @@ frappe.views.ListView = frappe.ui.BaseList.extend({
},
init_headers: function () {
this.page.main.find('.list-headers > .list-row-head').hide();
this.page.main.find('.list-headers > .list-item--head').hide();
this.list_header = this.page.main.find('.list-headers > '
+ '.list-row-head[data-list-renderer="'
+ '.list-item--head[data-list-renderer="'
+ this.list_renderer.name +'"]');
if(this.list_header.length > 0) {

2
frappe/public/js/frappe/views/gantt/gantt_view.js
View file

@ -107,7 +107,7 @@ frappe.views.GanttView = frappe.views.ListRenderer.extend({
var $dropdown = $(dropdown)
$dropdown.find(".dropdown-menu")
.append(dropdown_list);
me.list_view.$page.find(`.list-row-head[data-list-renderer='Gantt'] .list-row-right`).css("margin-top", 0).html($dropdown)
me.list_view.$page.find(`[data-list-renderer='Gantt'] .list-row-right`).css("margin-right", "15px").html($dropdown)
$dropdown.on("click", ".option", function() {
var mode = $(this).data('value');
me.gantt.change_view_mode(mode);

6
frappe/public/js/frappe/views/kanban/kanban_board.js
View file

@ -341,7 +341,9 @@ frappe.provide("frappe.views");
function setup_restore_columns() {
var cur_list = store.getState().cur_list;
var columns = store.getState().columns;
var list_row_right = cur_list.$page.find(`.list-row-head[data-list-renderer='Kanban'] .list-row-right`);
var list_row_right =
cur_list.$page.find(`[data-list-renderer='Kanban'] .list-row-right`)
.css('margin-right', '15px');
list_row_right.empty();
var archived_columns = columns.filter(function (col) {
@ -364,7 +366,7 @@ frappe.provide("frappe.views");
"<ul class='dropdown-menu'>" + options + "</ul>" +
"</div>")
list_row_right.css("margin-top", 0).html($dropdown);
list_row_right.html($dropdown);
$dropdown.find(".dropdown-menu").on("click", "button.restore-column", function (e) {
var column_title = $(this).data().column;

39
frappe/public/less/list.less
View file

@ -483,7 +483,6 @@
.list-items {
width: 100%;
font-size: @text-medium;
}
.list-item-container {
@ -501,8 +500,17 @@
height: 40px;
padding-left: 15px;
font-size: @text-medium;
&__head {
@media (max-width: @screen-xs) {
height: 50px;
padding-left: 10px;
font-size: @text-regular;
font-weight: normal;
}
&--head {
background-color: @panel-bg;
border-bottom: 1px solid @border-color;
}
@ -519,15 +527,36 @@
}
}
.list-item--content {
.list-item__content {
flex: 1;
margin-right: 15px;
&__flex-2 {
display: flex;
align-items: center;
&--flex-2 {
flex: 2;
}
&:last-child {
&--activity {
justify-content: flex-end;
margin-right: 5px;
.list-row-modified, .avatar-small {
margin-right: 10px;
}
}
&--indicator span::before {
height: 12px;
width: 12px;
}
&--id {
justify-content: flex-end;
}
}
.frappe-timestamp {
white-space: nowrap;
}