fix(image): New Image component to consistently handle broken images
- psuedo element hack didn't work cross browser
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index d40926b..089915d 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,4 +1,5 @@
-@import "../../../../frappe/frappe/public/less/variables.less";
+@import "variables.less";
+@import (reference) "desk.less";
body[data-route^="marketplace/"] {
.layout-side-section {
@@ -26,6 +27,22 @@
font-size: @text-medium;
}
+ .hub-image {
+ height: 200px;
+ }
+
+ .hub-image-loading, .hub-image-broken {
+ .img-background();
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ span {
+ font-size: 32px;
+ color: @text-extra-muted;
+ }
+ }
+
.progress-bar {
background-color: #89da28;
}
@@ -136,6 +153,7 @@
}
.hub-item-image {
+ position: relative;
border: 1px solid @border-color;
border-radius: 4px;
overflow: hidden;