<div class="card my-commercials">
<div class="card-section card-left">
<h3 class="card-heading card-title">
<div class="text">2017 Research Funding</div>
</h3>
<div class="overview">
<div class="overview-section overview-left">
<div id="dash-chart" class="chart" data-chart="" data-format="" data-array="" data-total="" data-display="percent" data-label="remaining">
</div>
</div>
<div class="overview-section overview-right">
<!-- PROJECTS KEY -->
<div class="projects-key">
<h4 class="card-subheading">Projects Key</h4>
<ul class="projects-list">
<li class="list-item">Other Projects</li>
</ul>
</div>
</div>
</div>
<div class="funds-overview stats-overview">
<div class="stats-row">
<div class="row-left">
<div class="row-item">
<h4 class="card-subheading">Total awarded funds</h4>
<div class="amount -highlight">$2,000,000</div>
</div>
</div>
<div class="row-right">
<div class="row-item">
<h4 class="card-subheading">Approved</h4>
<div class="amount">$1,025,000</div>
</div>
<div class="row-item">
<h4 class="card-subheading">Approved ARC</h4>
<div class="amount">$975,000</div>
</div>
</div>
</div>
<div class="stats-row">
<div class="row-left">
<div class="row-item">
<h4 class="card-subheading">Total remaining</h4>
<div class="amount">$1,313,000</div>
</div>
</div>
<div class="row-right">
<div class="row-item">
<h4 class="card-subheading">Total requested</h4>
<div class="amount">$2,720,000</div>
</div>
<div class="row-item">
<h4 class="card-subheading">Not approved</h4>
<div class="amount">$720,000</div>
</div>
</div>
</div>
</div>
<div class="line-chart">
<h4 class="card-subheading">
<span class="text">Awarded Funding</span>
</h4>
<div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
<div class="axis-y">
<ul class="axis-list"></ul>
</div>
<div class="graph">
<svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
</svg>
<div class="plot">
<svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
</div>
</div>
<div class="axis-x">
<ul class="axis-list">
<li class="axis-item">
<span class="text">1st Quarter</span>
</li>
<li class="axis-item">
<span class="text">2nd Quarter</span>
</li>
<li class="axis-item">
<span class="text">3rd Quarter</span>
</li>
<li class="axis-item">
<span class="text">4th Quarter</span>
</li>
</ul>
</div>
<div class="legend">
<h4 class="card-subheading">Legend</h4>
<ul class="legend-list">
<li class="legend-item">
<span class="text">Awarded 2017</span>
</li>
<li class="legend-item">
<span class="text">Funds Received 2017</span>
</li>
<li class="legend-item">
<span class="text">Awarded 2016</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-section card-right">
<div class="project-budgets">
<div class="card-heading">
<h4 class="card-subheading">
<span class="text">2017 faculty funding information</span>
<button type="button" class="btn btn-help js-tooltip-help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="help-text">A small amount of info about facult funding information.</div>
</button>
</h4>
</div>
<ul class="project-stats">
</ul>
<div class="see-all">
<a class="link link-strong" href="projects" title="See all faculties">See all faculties</a>
</div>
</div>
</div>
</div>
<div class="card my-commercials">
<div class="card-section card-left">
<h3 class="card-heading card-title">
<div class="text">2017 Research Funding</div>
</h3>
<div class="overview">
<div class="overview-section overview-left">
{{> '@chart--pie-expanded' }}
</div>
<div class="overview-section overview-right">
<!-- PROJECTS KEY -->
<div class="projects-key">
<h4 class="card-subheading">Projects Key</h4>
<ul class="projects-list">
{{#each projects }}
<li class="list-item">{{ title }}</li>
{{/each}}
<li class="list-item">Other Projects</li>
</ul>
</div>
</div>
</div>
<div class="funds-overview stats-overview">
<div class="stats-row">
<div class="row-left">
<div class="row-item">
<h4 class="card-subheading">Total awarded funds</h4>
<div class="amount -highlight">$2,000,000</div>
</div>
</div>
<div class="row-right">
<div class="row-item">
<h4 class="card-subheading">Approved</h4>
<div class="amount">$1,025,000</div>
</div>
<div class="row-item">
<h4 class="card-subheading">Approved ARC</h4>
<div class="amount">$975,000</div>
</div>
</div>
</div>
<div class="stats-row">
<div class="row-left">
<div class="row-item">
<h4 class="card-subheading">Total remaining</h4>
<div class="amount">$1,313,000</div>
</div>
</div>
<div class="row-right">
<div class="row-item">
<h4 class="card-subheading">Total requested</h4>
<div class="amount">$2,720,000</div>
</div>
<div class="row-item">
<h4 class="card-subheading">Not approved</h4>
<div class="amount">$720,000</div>
</div>
</div>
</div>
</div>
<div class="line-chart">
<h4 class="card-subheading">
<span class="text">Awarded Funding</span>
</h4>
<div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
<div class="axis-y">
<ul class="axis-list"></ul>
</div>
<div class="graph">
<svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
</svg>
<div class="plot">
<svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
</div>
</div>
<div class="axis-x">
<ul class="axis-list">
<li class="axis-item">
<span class="text">1st Quarter</span>
</li>
<li class="axis-item">
<span class="text">2nd Quarter</span>
</li>
<li class="axis-item">
<span class="text">3rd Quarter</span>
</li>
<li class="axis-item">
<span class="text">4th Quarter</span>
</li>
</ul>
</div>
<div class="legend">
<h4 class="card-subheading">Legend</h4>
<ul class="legend-list">
<li class="legend-item">
<span class="text">Awarded 2017</span>
</li>
<li class="legend-item">
<span class="text">Funds Received 2017</span>
</li>
<li class="legend-item">
<span class="text">Awarded 2016</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-section card-right">
<div class="project-budgets">
<div class="card-heading">
<h4 class="card-subheading">
<span class="text">2017 faculty funding information</span>
<button type="button" class="btn btn-help js-tooltip-help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="help-text">A small amount of info about facult funding information.</div>
</button>
</h4>
</div>
<ul class="project-stats">
{{#each projects }}
{{> @project-budget }}
{{/each}}
</ul>
<div class="see-all">
<a class="link link-strong" href="{{ basePath }}projects" title="See all faculties">See all faculties</a>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.my-commercials {
.card-left, .card-right {
width: 50%;
}
.card-left {
padding-bottom: 0;
background: $color-irma-white;
}
.overview {
margin-top: 6rem;
padding-bottom: 7.5rem;
}
.overview-section {
display: inline-block;
width: 49.5%;
vertical-align: top;
}
.overview-left {
.chart {
width: 60rem;
max-width: 100%;
}
}
.overview-right {
padding-left: 5rem;
}
.stats-overview {
padding: 7.5rem 0;
border-top: 1px solid $color-irma-silver;
.stats-row {
display: flex;
&:not(:first-child) {
margin-top: 4rem;
}
.row-right {
display: flex;
justify-content: flex-end;
text-align: right;
.row-item {
width: 30rem;
}
}
.row-item {
display: inline-block;
p {
opacity: 0.8;
}
}
.amount {
margin-top: 1.5rem;
@include font-size;
@include font-primary-bold;
&.-highlight {
margin-top: 0.5rem;
font-size: 8rem;
}
&.-students {
&::before {
content: '\f007';
display: inline-block;
vertical-align: middle;
margin-right: 1rem;
font-weight: normal;
@include font-icon;
}
}
}
}
}
.funds-overview {
.row-left {
width: 35%;
}
.row-right {
width: 65%;
}
}
.students-overview {
.row-left {
display: flex;
width: 65%;
.row-item {
&:first-child {
min-width: 33%;
}
&:last-child {
padding-left: 4rem;
}
}
}
.row-right {
width: 35%;
}
}
.line-chart {
position: relative;
padding: 7.5rem 0 10rem;
&::before {
content: '';
position: absolute;
left: -10rem;
top: 0;
display: block;
width: calc(100% + 20rem);
height: 100%;
background: rgba($color-irma-fog, 0.08);
}
.chart {
margin-top: 7.5rem;
}
}
.project-budgets {
.card-heading {
.card-subheading {
padding-top: 1rem;
}
}
.project-stats {
margin: 0;
padding: 0;
list-style-type: none;
.project-item {
margin-top: 6rem;
padding-bottom: 5rem;
border-bottom: 1px solid $color-irma-silver;
$projects: $color-project-1, $color-project-2, $color-project-3, $color-project-4, $color-project-5, $color-project-6;
@for $i from 1 through 6 {
&:nth-child(6n + #{$i}) {
.chart {
.meter {
color: nth($projects, $i);
transition-delay: #{$i * 0.2}s;
}
}
}
}
}
.project-title {
display: flex;
.text {
width: 60%;
padding-right: 4rem;
@include font-size;
@include font-primary-bold;
line-height: 1.2em;
}
.card-subheading {
width: calc(40% - 1.5rem);
max-width: 52rem;
text-align: center;
}
}
.stats-container {
display: flex;
margin-top: 3rem;
}
.stats-section {
display: inline-block;
vertical-align: top;
}
.stats-left {
width: 60%;
padding-right: 3rem;
.chart {
&:nth-last-child(3) {
.meter {
&::before {
background: $color-irma-gray;
}
}
.amount {
opacity: 0.7;
}
}
&:nth-last-child(2) {
.meter {
&::before {
opacity: 0.33;
background: currentColor;
}
}
}
&:last-child {
.meter {
&::before {
background: currentColor;
}
}
}
}
}
.stats-right {
display: flex;
flex-direction: column;
align-items: center;
width: calc(40% - 1.5rem);
line-height: 4.5rem;
// .status-notes {
// margin-top: 0.25em;
// color: rgba($color-irma-slate, 0.7);
// text-transform: capitalize;;
// a {
// @extend .link;
// }
// }
}
}
.see-all {
margin-top: 5rem;
@include font-size;
@include font-primary-bold;
}
}
.applications-stats {
width: 100%;
max-width: 52rem;
}
@mixin commercials-tablet {
$max-width: 160rem;
display: block;
.card-section {
width: 100% !important;
margin: 0 auto;
}
.card-left {
padding-bottom: 7.5rem;
}
.overview {
max-width: $max-width;
margin: 0 auto;
margin-top: 6rem;
}
.stats-overview {
.stats-row {
max-width: $max-width;
margin: 0 auto;
}
}
.line-chart {
max-width: $max-width;
margin: 0 auto;
}
.project-budgets {
.card-heading {
.card-subheading {
max-width: $max-width;
margin: 0 auto;
}
}
}
.project-item {
display: flex;
flex-direction: column;
align-items: center;
& > * {
max-width: $max-width;
width: 100%;
}
}
.see-all {
max-width: $max-width;
margin: 0 auto;
margin-top: 5rem;
}
}
@media screen and (max-width: #{$bp-tablet + 180}) {
body:not(.-nav-collapsed) & {
@include commercials-tablet;
}
}
@media screen and (max-width: $bp-tablet) {
@include commercials-tablet;
}
}
There are no notes for this item.