feat: new layout for user stats in sidebar
This commit is contained in:
Shivam Mishra
parent
15ecf224fc
commit
094aff3fec
3 changed files with 61 additions and 79 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<div class="performance-graphs">
|
||||
<div class="frappe-card chart-column-container heatmap-container hidden-xs hidden-sm">
|
||||
<div class="title-area">
|
||||
<h4 class="card-title">Overview</h4>
|
||||
<h4 class="card-title">{%=__("Overview") %}</h4>
|
||||
<div class="card-options heatmap-options"></div>
|
||||
</div>
|
||||
<div class="performance-heatmap">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="frappe-card chart-column-container percentage-chart-container">
|
||||
<div class="title-area">
|
||||
<h4 class="card-title">Type Distribution</h4>
|
||||
<h4 class="card-title">{%=__("Type Distribution") %}</h4>
|
||||
<div class="card-options percentage-chart-options"></div>
|
||||
</div>
|
||||
<div class="performance-percentage-chart">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
<div class="frappe-card chart-column-container line-chart-container">
|
||||
<div class="title-area">
|
||||
<h4 class="card-title">Energy Points</h4>
|
||||
<h4 class="card-title">{%=__("Energy Points") %}</h4>
|
||||
<div class="card-options line-chart-options"></div>
|
||||
</div>
|
||||
<div class="performance-line-chart">
|
||||
|
|
|
|||
|
|
@ -355,17 +355,30 @@ class UserProfile {
|
|||
}
|
||||
|
||||
render_points_and_rank() {
|
||||
let $profile_details = this.wrapper.find('.profile-details');
|
||||
let $profile_details = this.wrapper.find('.user-stats');
|
||||
let $profile_details_wrapper = this.wrapper.find('.user-stats-detail');
|
||||
|
||||
const _get_stat_dom = (value, label, icon) => {
|
||||
return `<div class="user-stats-item mt-4">
|
||||
${frappe.utils.icon(icon, "lg", "no-stroke")}
|
||||
<div>
|
||||
<div class="stat-value">${value}</div>
|
||||
<div class="stat-label">${label}</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
this.get_user_rank().then(() => {
|
||||
this.get_user_points().then(() => {
|
||||
let html = $(__(`<p class="user-energy-points text-muted">${__('Energy Points: ')}<span class="rank">{0}</span></p>
|
||||
<p class="user-energy-points text-muted">${__('Review Points: ')}<span class="rank">{1}</span></p>
|
||||
<p class="user-energy-points text-muted">${__('Rank: ')}<span class="rank">{2}</span></p>
|
||||
<p class="user-energy-points text-muted">${__('Monthly Rank: ')}<span class="rank">{3}</span></p>
|
||||
`, [this.energy_points, this.review_points, this.rank, this.month_rank]));
|
||||
let html = $(`
|
||||
${_get_stat_dom(this.energy_points, __('Energy Points'), "color-energy-points")}
|
||||
${_get_stat_dom(this.review_points, __('Review Points'), "color-review-points")}
|
||||
${_get_stat_dom(this.rank, __('Rank'), "color-rank")}
|
||||
${_get_stat_dom(this.month_rank, __('Monthly Rank'), "color-monthly-rank")}
|
||||
`);
|
||||
|
||||
$profile_details.append(html);
|
||||
$profile_details_wrapper.removeClass("hide");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,81 +40,50 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .user-image-container {
|
||||
// margin-top: 7px;
|
||||
// padding-bottom: 100%;
|
||||
// }
|
||||
.user-profile-sidebar {
|
||||
.sidebar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
// .user-image-container .standard-image {
|
||||
// font-size: 72px;
|
||||
// }
|
||||
.profile-details {
|
||||
margin-top: var(--margin-lg);
|
||||
|
||||
// .profile-details {
|
||||
// margin: -5px 5px;
|
||||
// }
|
||||
.detail-item {
|
||||
margin-top: var(--margin-2xl);
|
||||
|
||||
// .profile-links {
|
||||
// margin: 30px 5px;
|
||||
// }
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// .user-initial {
|
||||
// font-size: 72px;
|
||||
// }
|
||||
.user-bio {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.user-stats-item {
|
||||
// @include flex(flex, null, center, null);
|
||||
@include flex(flex, null, null, null);
|
||||
|
||||
// .line-chart-container .chart-filter {
|
||||
// z-index: 1;
|
||||
// }
|
||||
.stat-value {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--text-bold);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
// .recent-activity {
|
||||
// margin: 20px;
|
||||
// font-size: 12px;
|
||||
// }
|
||||
.stat-label {
|
||||
color: var(--text-muted);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
// .show-more-activity {
|
||||
// text-align: center;
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
|
||||
// .recent-activity-item {
|
||||
// margin: 15px 5px;
|
||||
// }
|
||||
|
||||
// .interest-icon {
|
||||
// margin-right: 5px;
|
||||
// }
|
||||
|
||||
// .chart-filter {
|
||||
// position: relative;
|
||||
// top: 5px;
|
||||
// margin-right: 10px;
|
||||
// }
|
||||
|
||||
// .filter-label {
|
||||
// margin-right: 4px;
|
||||
// }
|
||||
|
||||
// .performance-title {
|
||||
// position: relative;
|
||||
// left: 30px;
|
||||
// top: 20px;
|
||||
// }
|
||||
|
||||
// @media (max-width: 991px) {
|
||||
// .user-profile-sidebar {
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
// .percentage-chart-container {
|
||||
// border-top: 1px solid #d1d8dd;
|
||||
// }
|
||||
|
||||
// .user-profile-sidebar .profile-links {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
// .user-profile-sidebar .profile-details {
|
||||
// width: 50%;
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
.icon {
|
||||
stroke: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 var(--margin-md) 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue