Hub Market (#13325)
* [hub] enable hub with OAuth token from user's client ID
* [hub] settings schema for adding users
* [hub] image view style listing
* [hub] broken image link fallback
* [wip]
* [hub] bootstrap timeline
* [hub] setup quick view
* [hub] reformat ratings, add companies autocomplete filter
* [hub] common listing frames
* [hub] setup sort selector
* [hub] timeline
* [hub] customize list header
* [hub] genuine form fieldtypes
* [hub] review products
* [hub] suggest missing categories remotely
* [hub] Wishlist; header and title templates
* [hub] link wishlist, remove company migration
* [hub] calculate ratings
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 66199a4..f202fa4 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,176 +1,109 @@
@import "../../../../frappe/frappe/public/less/variables.less";
body[data-route^="Hub/"] {
- .freeze .image-view-container {
- .list-row-col {
- background-color: @light-bg;
- color: @light-bg;
- }
-
- .placeholder-text {
- color: @light-bg;
- }
+ .hub-icon {
+ width: 40px;
}
- .freeze {
- display: none;
- }
-
- .image-view-container {
- justify-content: space-around;
- }
-}
-
-.img-wrapper {
- border: 1px solid #d1d8dd;
- border-radius: 3px;
- padding: 12px;
- overflow: hidden;
- text-align: center;
- white-space: nowrap;
-
- .helper {
- height: 100%;
- display: inline-block;
- vertical-align: middle;
- }
-}
-
-/* hub */
-div[data-page-route="hub"] {
- .page-head {
- height: 80px;
-
- .title-text {
- cursor: pointer;
- }
- }
-
- .page-content {
- margin-top: 80px;
- }
-
- .page-title h1 {
- margin-bottom: 0px;
- }
-
- .account-details {
- margin-top: 20px;
- }
-
- [data-original-title="Search"] {
- float: right;
- width: 220px;
- }
-
- .hub-main-section {
- padding: 30px;
- }
-
- .listing-body {
- margin: 0;
- }
-
- .main-list-section {
- padding: 0;
- // border-right: 1px solid #d1d8dd;
- }
-
- .side-list-section {
- padding: 0;
- }
-
- .item-list-header h3 {
- font-weight: normal;
- }
-
- .hub-item-page {
-
- h2 {
- margin-top: 10px;
- }
-
- .item-header {
- display: flex;
- }
-
- .item-page-image {
- flex: 1;
- }
-
- .title-content {
- flex: 3;
-
- .description {
- margin: 30px 0px;
- }
-
- .actions {
- margin-top: 30px;
-
- .rfq-btn.disabled {
- background-color: #b1bdca;
- color: #fff;
- border-color: #b1bdca;
- }
- }
- }
-
- .company-items {
- margin-top: 40px;
- }
- }
-
- .company-header {
- display: flex;
- }
-
- .item-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
-
- .hub-item-wrapper {
- margin-bottom: 20px;
+ .hub-page-title {
+ margin-left: 10px;
}
.img-wrapper {
- border: 1px solid @border-color;
+ border: 1px solid #d1d8dd;
border-radius: 3px;
padding: 12px;
overflow: hidden;
text-align: center;
white-space: nowrap;
- img {
- max-width: 100%;
- max-height: 100%;
- display: inline-block;
- vertical-align: middle;
- }
-
.helper {
height: 100%;
display: inline-block;
vertical-align: middle;
}
+ }
- .standard-image {
- font-size: 72px;
- border: none;
- background-color: @light-bg;
+ .tree {
+ margin: 10px 0px;
+ padding: 0px;
+ height: 100%;
+ position: relative;
+ }
+
+ .tree.with-skeleton.opened::before {
+ left: 9px;
+ top: 14px;
+ height: calc(~"100% - 32px");
+ }
+
+ .list-header-icon {
+ width: 72px;
+ border-radius: 4px;
+ flex-shrink: 0;
+ margin: 10px;
+ padding: 1px;
+ border: 1px solid @border-color;
+ height: 72px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ border-radius: 4px;
}
}
- .hub-item-title {
- width: 100%;
+ .star-icon.fa-star {
+ color: @indicator-orange;
}
- .breadcrumb {
- padding-left: 0;
- padding-top: 0;
- margin-bottom: 10px;
+ .octicon-heart.liked {
+ color: @indicator-red;
}
-}
\ No newline at end of file
+ .margin-vertical-10 {
+ margin: 10px 0px;
+ }
+
+ .margin-vertical-15 {
+ margin: 15px 0px;
+ }
+
+ .frappe-list .result {
+ min-height: 100px;
+ }
+}
+
+.image-view-container {
+ .image-view-body {
+ &:hover .like-button {
+ opacity: 0.7;
+ }
+ }
+
+ .like-button {
+ bottom: 10px !important;
+ left: 10px !important;
+ width: 36px;
+ height: 36px;
+ opacity: 0;
+ font-size: 16px;
+ color: @text-color;
+ position: absolute;
+
+ // show zoom button on mobile devices
+ @media (max-width: @screen-xs) {
+ opacity: 0.5
+ }
+ }
+
+ .image-view-body:hover .like-button {
+ opacity: 0.7;
+ }
+}
+
+.rating-area .star-icon {
+ cursor: pointer;
+ font-size: 15px;
+}