<div class="user">
<button class="btn btn-user js-btn-modal js-user" data-total="2" data-modal="user">
<div class="user-avatar">
</div>
<div class="user-info">
<h4 class="user-name">Daniel James</h4>
<div>
<a href="/my-account" class="user-profile link">My Account</a>
</div>
</div>
<div class="svg-wrap arrow">
<svg class="svg" viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
</svg>
</div>
</button>
<div class="user-modal js-modal tooltip" data-modal="user" data-tab="user">
<div class="user-modal-inner tooltip-content"></div>
</div>
</div>
<div class="user">
<button class="btn btn-user js-btn-modal js-user" data-total="2" data-modal="user">
<div class="user-avatar">
{{#if user.avatar }}
<img src="{{ user.avatar }}" alt="{{ user.name }}" />
{{/if}}
</div>
<div class="user-info">
<h4 class="user-name">{{ user.name }}</h4>
<div>
<a href="/my-account" class="user-profile link">My Account</a>
</div>
</div>
<div class="svg-wrap arrow">
<svg class="svg" viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
</svg>
</div>
</button>
<div class="user-modal js-modal tooltip" data-modal="user" data-tab="user">
<div class="user-modal-inner tooltip-content"></div>
</div>
</div>
{
"user": {
"name": "Daniel James",
"totalApplied": 720000,
"totalAwarded": 580000,
"totalRemaining": 435000,
"funders": [
{
"title": "The Bank of New Zealand",
"awarded": 300000,
"remaining": 225000
},
{
"title": "The Foundation for Super Awesome Projects",
"awarded": 280000,
"remaining": 210000
}
],
"details": [
{
"name": "Email",
"value": "daniel.james@uo.com"
},
{
"name": "Phone",
"value": "+61 422 632 185"
},
{
"name": "Role",
"value": "Associate Prof."
},
{
"name": "Location",
"value": "Room 123.67"
},
{
"name": "Active Grants",
"value": "12"
}
]
}
}
.user {
.btn-user {
position: relative;
padding: 0 18rem;
height: 20rem;
@include font-size;
.user-avatar {
position: absolute;
top: 50%;
left: 4.5rem;
transform: translateY(-50%);
width: 10rem;
height: 10rem;
overflow: hidden;
border-radius: 10rem;
background: {
image: url('../img/avatar.svg');
size: cover;
position: center;
}
}
.user-info {
margin-top: 1rem;
.user-name {
line-height: 0.5em;
color: white;
}
.user-profile {
margin-top: 1.5rem;
@include font-size-small;
color: inherit;
}
}
.arrow {
position: absolute;
top: 50%;
right: 6.75rem;
transform: translateY(-50%);
width: 3rem;
.svg {
fill: $color-irma-fog;
}
}
}
.user-modal {
$component-width: 100rem;
$header-height: calc(10rem + 5px);
$border-color: $color-irma-silver;
$background-color: #FAFBFB;
position: absolute;
top: 20rem;
left: auto;
right: 0;
transform: none;
width: $component-width;
overflow: hidden;
background: $background-color;
visibility: hidden;
opacity: 0;
color: $color-irma-slate;
transition: all $transition;
&::after {
display: none;
}
&.-active {
visibility: visible;
opacity: 1;
}
.tooltip-subheadline, .bottom-line {
border-color: rgba($color-irma-slate, 0.2);
}
strong {
color: currentColor;
}
}
}
/*
* _user.js
*/
irma.user = (function () {
'use strict';
var getDetails = function () {
var url = irma.baseURL + "getMyInfo.asp?" + irma.urlParams + "&SearchValue=grants&irmaWebServiceLookupID=" + irma.userId;
$.ajax({
url: url
}).done(function (results) {
sortDetails(results.data[0]);
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var sortDetails = function (res) {
var funders = [];
var i = 0;
_.forEach(res.FinancialsOnActiveGrantsBrokenDownByGrant, function (funder, i) {
funders.push({
title: funder.grantTitle,
remaining: '$' + funder.TotalAmountRemainingOnGrant,
awarded: '$' + funder.TotalAmountAwardedOnGrant
});
});
var context = {
funders: funders,
totalRemaining: '$' + res.TotalAmountRemainingOnActiveGrants,
totalApplied: '$' + res.TotalAmountAppliedForOnActiveGrants,
totalAwarded: '$' + res.TotalAmountAwardedOnActiveGrants
};
showDetails(context);
};
var showDetails = function (context, $btn) {
$.get(irma.assetPath + '/templates/user/user-info.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
$('.user-modal .tooltip-content').html(html);
});
};
var init = function () {
$(document).on('click', '.js-user', function (e) {
getDetails();
}).on('click', '.js-user .link', function (e) {
e.stopPropagation();
});
};
return {
init: init
};
}());
There are no notes for this item.