User

<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"
      }
    ]
  }
}
  • Content:
    .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;
    		}
    	}
    }
  • URL: /components/raw/user/_user.scss
  • Filesystem Path: components/01-components/user/_user.scss
  • Size: 1.4 KB
  • Content:
    /* 
     *	_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
    	};
    
    }());
  • URL: /components/raw/user/user.js
  • Filesystem Path: components/01-components/user/user.js
  • Size: 1.5 KB

There are no notes for this item.