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

frappe/public/build.json

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

frappe/public/css/list.css

@@ -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;
+}

frappe/public/js/frappe/list/header_select_all_like_filter.html

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

frappe/public/js/frappe/list/item_assigned_to_comment_count.html

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

frappe/public/js/frappe/list/list_item_main.html

@@ -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
+    {% } %}
+    {% 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>
+</div>

frappe/public/js/frappe/list/list_item_main_1.html

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

frappe/public/js/frappe/list/list_item_main_head.html

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

frappe/public/js/frappe/list/list_item_row.html

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

frappe/public/js/frappe/list/list_item_row_1.html

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

frappe/public/js/frappe/list/list_item_row_head.html

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

frappe/public/js/frappe/list/list_item_subject.html

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

frappe/public/js/frappe/list/list_view.js

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

frappe/public/js/frappe/views/gantt/gantt_view.js

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

frappe/public/js/frappe/views/kanban/kanban_board.js

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

frappe/public/less/list.less

@@ -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;
+
+	@media (max-width: @screen-xs) {
+		height: 50px;
+		padding-left: 10px;
 
-	&__head {
+		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;
 }