From e4e117da4b8076ae018e383f82f29775bdee8273 Mon Sep 17 00:00:00 2001 From: prssanna Date: Thu, 25 Feb 2021 16:21:20 +0530 Subject: [PATCH 1/3] fix: ellipsis for kanban title --- frappe/public/js/frappe/views/kanban/kanban_column.html | 2 +- frappe/public/scss/desk/kanban.scss | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frappe/public/js/frappe/views/kanban/kanban_column.html b/frappe/public/js/frappe/views/kanban/kanban_column.html index 4b309710e4..f2b537aca4 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_column.html +++ b/frappe/public/js/frappe/views/kanban/kanban_column.html @@ -2,7 +2,7 @@
- {{ __(title) }} + {{ __(title) }}
-
-
- {{ title }} -
-
- {{ creation }} -
+ {% if(image_url) { %} +
+ {{title}}
-
+ {% } %} +
+
+
+ {{ title }} +
+
+ {{ creation }} +
+
+
+
diff --git a/frappe/public/scss/common/mixins.scss b/frappe/public/scss/common/mixins.scss index afcb6164fd..6d71ea9d6f 100644 --- a/frappe/public/scss/common/mixins.scss +++ b/frappe/public/scss/common/mixins.scss @@ -37,6 +37,38 @@ background-color: var(--bg-light-gray); } +@mixin broken-img( + $content: null, + $height: 100%, + $top: 0, + $left: 0, + $background-color: var(--bg-color), + $border-radius: var(--border-radius), +) { + + @if $content { + img:after { + content: url($content); + } + } @else { + img:after { + content: url("data:image/svg+xml;utf8,"); + } + } + + img[alt]:after { + height: $height; + top: $top; + left: $left; + background-color: $background-color; + border-radius: $border-radius; + width: 100%; + position: absolute; + @include flex(); + z-index: 1; + } +} + // @mixin img-foreground() { // content: "\f1c5"; // display: block; diff --git a/frappe/public/scss/desk/file_view.scss b/frappe/public/scss/desk/file_view.scss index 141976e9a3..5c55a9f1ef 100644 --- a/frappe/public/scss/desk/file_view.scss +++ b/frappe/public/scss/desk/file_view.scss @@ -98,21 +98,10 @@ position: relative; } - img:after { - content: url("data:image/svg+xml;utf8,"); - } - - img[alt]:after { - height: 70px; - @include flex(); - position: absolute; - z-index: 1; - top: -15px; - left: 0px; - width: 100%; - background-color: var(--bg-color); - border-radius: var(--border-radius); - } + @include broken-img( + $height: 70px, + $top: -15px, + ); } } diff --git a/frappe/public/scss/desk/image_view.scss b/frappe/public/scss/desk/image_view.scss index e249361592..3b9d033406 100644 --- a/frappe/public/scss/desk/image_view.scss +++ b/frappe/public/scss/desk/image_view.scss @@ -154,20 +154,10 @@ width: 100%; } - img:after { - content: url("data:image/svg+xml;utf8,"); - } - - img[alt]:after { - height: 175px; - @include flex(); - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100%; - background-color: var(--bg-color); - } + @include broken-img( + $height: 175px, + $border-radius: 0 + ); } .image-title { diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss index 08f281a323..41bd0b2859 100644 --- a/frappe/public/scss/desk/kanban.scss +++ b/frappe/public/scss/desk/kanban.scss @@ -153,13 +153,15 @@ .kanban-card { @include flex(flex, space-between, null, column); - - @include card( - $padding: var(--padding-sm) var(--padding-md), - $background-color: var(--kanban-card-bg) - ); margin-top: var(--margin-sm); min-height: 100px; + @include card( + $padding: 0, + $background-color: var(--kanban-card-bg) + ); + .kanban-card-body { + padding: var(--padding-sm); + } } } @@ -211,6 +213,27 @@ } } + .kanban-image { + height: 125px; + + img { + border-radius: var(--border-radius) var(--border-radius) 0 0; + object-position: top; + object-fit: cover; + margin: 0 auto; + height: 100%; + width: 100%; + min-width: 100%; + color: transparent; + position: relative; + } + + @include broken-img( + $height: 125px, + $top: -4px, + ) + } + .kanban-card-edit { position: absolute; right: 10px; @@ -289,6 +312,7 @@ height: 22px; width: auto; padding: 2px 8px; + margin-bottom: var(--margin-xs); margin-right: var(--margin-xs); } } diff --git a/frappe/public/scss/website/website_image.scss b/frappe/public/scss/website/website_image.scss index a08f3a4ba7..c7a6992140 100644 --- a/frappe/public/scss/website/website_image.scss +++ b/frappe/public/scss/website/website_image.scss @@ -4,36 +4,10 @@ img { position: relative; } -// fallback for broken images -// img:after { -// content: url("data:image/svg+xml;utf8,"); -// display: flex; -// justify-content: center; -// align-items: center; -// position: absolute; -// z-index: 1; -// top: 0; -// left: 0; -// width: 100%; -// height: 100%; -// background-color: $light; -// padding: 50% 0; -// } - -img:after { - content: url("data:image/svg+xml;utf8,"); -} - -img[alt]:after { - height: 175px; - @include flex(); - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100%; - background-color: var(--bg-color); -} +@include broken-img( + $height: 175px, + $border-radius: 0, +); .website-image-placeholder { display: flex; From fce99a25e3e991cbf7db3cc3285054b4c20b1cf6 Mon Sep 17 00:00:00 2001 From: prssanna Date: Thu, 25 Feb 2021 17:49:15 +0530 Subject: [PATCH 3/3] fix: unbind change column event --- frappe/public/js/frappe/views/kanban/kanban_board.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.js b/frappe/public/js/frappe/views/kanban/kanban_board.js index 87ce2d098e..5cf4cb0236 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_board.js +++ b/frappe/public/js/frappe/views/kanban/kanban_board.js @@ -301,7 +301,7 @@ frappe.provide("frappe.views"); function init() { fluxify.doAction('init', opts); - store.on('change:columns', make_columns); + store.off('change:columns').on('change:columns', make_columns); prepare(); store.on('change:cur_list', setup_restore_columns); store.on('change:columns', setup_restore_columns);