Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fellowship type pages #994

Merged
merged 9 commits into from
Jan 30, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "foundation-base.html" %}
{% extends "fellowships-base.html" %}

{% block body %}
fellows directory
Expand Down
6 changes: 3 additions & 3 deletions network-api/networkapi/fellows/templates/fellows_home.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "foundation-base.html" %}
{% extends "fellowships-base.html" %}

{% block hero_banner %}
<div class="row">
Expand Down Expand Up @@ -31,12 +31,12 @@ <h4 class="h4-light-black">Our Fellowships have 4 areas of focus:</h4>
<div class="col-md-6 mb-4">
<h3 class="h5-black my-2">Science</h3>
<p>Brief description of the theme of the Fellowship and defining characteristics of it.</p>
<a href="" class="cta-link">Learn More</a>
<a href="{% url 'fellowships-science' %}" class="cta-link">Learn More</a>
</div>
<div class="col-md-6 mb-4">
<h3 class="h5-black my-2">Open Web</h3>
<p>Brief description of the theme of the Fellowship and defining characteristics of it.</p>
<a href="" class="cta-link">Learn More</a>
<a href="{% url 'fellowships-open-web' %}" class="cta-link">Learn More</a>
</div>
<div class="col-md-6 mb-4">
<h3 class="h5-black my-2">Tech Policy</h3>
Expand Down
44 changes: 41 additions & 3 deletions network-api/networkapi/fellows/templates/fellows_openweb.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,43 @@
{% extends "foundation-base.html" %}
{% extends "fellows_type.html" %}

{% block body %}
open web fellows
{% block breadcrumb_fellowship_type %}
Open Web
{% endblock %}

{% block fellowship_type %}
Open Web
{% endblock %}

{% block fellowship_description %}
{% lorem 2 p %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat

{% endblock %}

{% block fellowship_illustration %}
img
{% endblock %}

{% block benefit_illustration %}
img
{% endblock %}

{% block benefit_description %}
{% lorem 3 p %}
{% endblock %}

{% block benefit_list %}
<li>Corrupti quis facilis exercitationem iste. Eius debitis animi quam repellendus quo natus earum quis atque sint, dicta beatae a quaerat quibusdam est eligendi possimus in.</li>
<li>Oodit hic dolores atque ullam, laboriosam necessitatibus facere perferendis magnam fuga aliquam, officia placeat sequi eligendi, fugiat dolorem quos cumque ut reiciendis.</li>
<li>Anihil molestias velit praesentium mollitia perspiciatis officiis. Ratione ipsam quod enim dolores modi unde blanditiis aperiam, dolore non mollitia voluptatibus modi eaque beatae iste.</li>
<li>Corrupti quis facilis exercitationem iste. Eius debitis animi quam repellendus quo natus earum quis atque sint, dicta beatae a quaerat quibusdam est odit hic dolores atque ullam, laboriosam necessitatibus facere perferendis magnam fuga aliquam, officia placeat sequi eligendi, fugiat dolorem quos cumque ut reiciendis eligendi possimus in.</li>
{% endblock %}

{% block eligibility_list %}
<li>Corrupti quis facilis exercitationem iste. Eius debitis animi quam repellendus quo natus earum quis atque sint, dicta beatae a quaerat quibusdam est eligendi possimus in.</li>
<li>Oodit hic dolores atque ullam, laboriosam necessitatibus facere perferendis magnam fuga aliquam, officia placeat sequi eligendi, fugiat dolorem quos cumque ut reiciendis.</li>
<li>Anihil molestias velit praesentium mollitia perspiciatis officiis. Ratione ipsam quod enim dolores modi unde blanditiis aperiam, dolore non mollitia voluptatibus modi eaque beatae iste.</li>
<li>Corrupti quis facilis exercitationem iste. Eius debitis animi quam repellendus quo natus earum quis atque sint, dicta beatae a quaerat quibusdam est odit hic dolores atque ullam, laboriosam necessitatibus facere perferendis magnam fuga aliquam, officia placeat sequi eligendi, fugiat dolorem quos cumque ut reiciendis eligendi possimus in.</li>
{% endblock %}

{% block featured_fellow %}
<div id="featured-open-web-fellow" class="featured-fellow"></div>
{% endblock %}
52 changes: 49 additions & 3 deletions network-api/networkapi/fellows/templates/fellows_science.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,51 @@
{% extends "foundation-base.html" %}
{% extends "fellows_type.html" %}

{% block body %}
science fellows
{% block breadcrumb_fellowship_type %}
Science
{% endblock %}

{% block fellowship_type %}
Science
{% endblock %}

{% block fellowship_description %}
<p>The Mozilla Fellowships for Science present a unique opportunity for researchers who want to influence the future of open science and data sharing within their communities.</p>
<p>We're looking for researchers with a passion for open source and data sharing, already working to shift research practice to be more collaborative, iterative and open. Fellows will spend 10 months starting September 2017 as community catalysts at their institutions, mentoring the next generation of open data practitioners and researchers and building lasting change in the global open science community.</p>
<p>Throughout their fellowship term, chosen fellows will receive training and support from Mozilla to hone their skills around open source, data sharing, open science policy and licensing. They will also craft code, curriculum and other learning resources that help their local communities learn open data practices, and teach their institutional peers.</p>
{% endblock %}

{% block fellowship_illustration %}
img
{% endblock %}

{% block benefit_illustration %}
img
{% endblock %}

{% block benefit_description %}
<p>The Fellowships are designed to allow for flexibility for both Fellows and their families. The standard fellowship offers a stipend of $60,000 USD*, paid in 10 monthly installments. Fellows are responsible for remitting all applicable taxes and other government payments as required.</p>
<p>To help offset cost of living, the fellowship also provides supplements for childcare and health insurance, and helps pay for research/equipment and books. The fellowships also covers the costs of required travel for fellowship activities.</p>
{% endblock %}

{% block benefit_list %}
<li>a stipend of $60,000 USD*, paid in 10 monthly installments</li>
<li>a one-time health insurance supplement for Fellows and their families, ranging from $3,500 for single Fellows to $7,000 for a couple with two or more children</li>
<li>a one-time childcare allotment of up to $6,000 for families with children</li>
<li>an allowance of up to $3,000 towards the purchase of laptop computer, digital cameras, recorders and computer software; fees for continuing studies or other courses, research fees or payments, to the extent such purchases and fees are related to the fellowship
</li>
<li>coverage in full for all approved fellowship trips – domestic and international</li>
{% endblock %}

{% block eligibility_list %}
<li>be currently based at or affiliated with a research institution</li>
<li>have the ability to accept outside funds for this fellowship directly (i.e., not distributed through the institution)</li>
<li>be an early-career researcher (i.e., graduate students, post-docs, research scientists, lecturers)</li>
<li>specialize in scientific research: physical, life, social, library, or natural sciences</li>
<li>be able to travel</li>
<li>obtain support from their advisors. As fellows will be based at their home institutions, please note that a letter of support from their advisor is mandatory for consideration</li>
<li>have experience participating in open communities</li>
{% endblock %}

{% block featured_fellow %}
<div id="featured-science-fellow" class="featured-fellow"></div>
{% endblock %}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "foundation-base.html" %}
{% extends "fellowships-base.html" %}

{% block body %}
fellows support
Expand Down
91 changes: 91 additions & 0 deletions network-api/networkapi/fellows/templates/fellows_type.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
{% extends "fellowships-base.html" %}

{% block body %}

<div id="fellowship-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item small-gray">
<a href="{% url 'fellowships-home' %}" class="small-gray">Fellowships</a>
</li>
<li class="breadcrumb-item small-gray active">
{% block breadcrumb_fellowship_type %}{% endblock %} Fellowship
</li>
</ol>
</div>

<div class="row mb-5">
<div class="col-md-12 my-b">
<h1 class="h1-white">{% block fellowship_type %}{% endblock %} Fellowship</h1>
</div>
<div class="col-md-9">
{% block fellowship_description %}{% endblock %}
</div>
<div class="col-md-3">{% block fellowship_illustration %}{% endblock %}</div>
</div>

<div class="row mb-5">
<div class="col-md-12 my-5">
<hr class="hr-gradient mt-0">
<h4 class="h2-headings-white">Stipend and Financial Benefits</h4>
</div>
<div class="col-md-6">{% block benefit_illustration %}{% endblock %}</div>
<div class="col-md-6">
{% block benefit_description %}{% endblock %}
</div>
<div class="col-md-12">
<p>Fellows will receive:</p>
<ul class="fellowships-list two-column">
{% block benefit_list %}
{% endblock %}
</ul>
</div>
</div>

<div class="row mb-5">
<div class="col-md-12 my-5">
<hr class="hr-gradient mt-0">
<h4 class="h2-headings-white">Eligibility Criteria</h4>
</div>
<div class="col-md-8">
<p>Fellows must be:</p>
<ul class="fellowships-list">
{% block eligibility_list %}
{% endblock %}
</ul>
</div>
<div class="col-md-4">img</div>
</div>

{% block featured_fellow %}
{% endblock %}

<div class="row py-5 px-md-2">
<div class="col-md-2">img</div>
<div class="col-md-10">
<div class="d-flex flex-column flex-md-row justify-content-around">
<div>
<h2 class="h3-cta-black">Application are open</h2>
<p>short copy short copy short copy short copy short copy short copy short copy short copy short copy</p>
</div>
<div class="ml-md-5 align-self-center">
<button class="btn btn-normal">I want to be a Fellow</button>
</div>
</div>
</div>
</div>

<div class="row py-5 px-md-2">
<div class="col-md-1">img</div>
<div class="col-md-11">
<div class="d-flex flex-column flex-md-row justify-content-around">
<div>
<p>Want to support the incredible work Fellows are doing? Either as a host organization or a funder, you can join us to keep the Internet healthy.</p>
</div>
<div class="ml-md-5 align-self-center">
<button class="btn btn-ghost">Ways to Support</button>
</div>
</div>
</div>
</div>

{% endblock %}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- This is a copy/paste of landing-page.html, modified to be useful for fellowships to start. Ideally the entire site will extend this template eventually -->
<!DOCTYPE html>
<html>{% load settings_value %}{% load active_nav %}
<html>{% load settings_value %}{% load fellowship_active_nav %}

<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -74,14 +74,14 @@
</div>
</div>
</div>
<div id="fellowships-nav" class="nav-links mt-5">
<div id="fellowships-nav" class="my-4">
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex flex-row align-items-center">
<a href="{% url 'fellowships-home' %}" class="{% active_nav request 'fellowships-home' %} mr-4">Fellowships</a>
<a href="{% url 'fellowships-directory' %}" class="{% active_nav request 'fellowships-directory' %} mr-4">Directory</a>
<a href="{% url 'fellowships-support' %}" class="{% active_nav request 'fellowships-support' %} mr-4">Support the Program</a>
<a href="{% url 'fellowships-home' %}" class="{% fellowship_active_nav request 'fellowships-home fellowships-science fellowships-open-web' %} mr-4">Fellowships</a>
<a href="{% url 'fellowships-directory' %}" class="{% fellowship_active_nav request 'fellowships-directory' %} mr-4">Directory</a>
<a href="{% url 'fellowships-support' %}" class="{% fellowship_active_nav request 'fellowships-support' %} mr-4">Support the Program</a>
<a href="" class="mr-4">Apply to be a Fellow</a>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@
register = template.Library()


@register.simple_tag(name='active_nav')
def active_nav(request, view_name):
@register.simple_tag(name='fellowship_active_nav')
def fellowship_active_nav(request, view_name):

from django.core.urlresolvers import resolve, Resolver404
path = resolve(request.path_info)
if not request:
return ""
try:
return "active" if path.url_name == view_name else ""
matched = [vn for vn in view_name.split() if path.url_name == vn]

return "active" if matched else ""

except Resolver404:
return ""
3 changes: 2 additions & 1 deletion source/js/components/people/people.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
#people {
#people,
.featured-fellow {
.headshot {
width: 100%;
}
Expand Down
9 changes: 8 additions & 1 deletion source/js/components/people/person.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,19 @@ export default class Person extends React.Component {
</div>
</div>
<div className="row person-social-links mt-3 justify-content-between">
<div>{socialLinks}</div>
{socialLinks.length > 0 &&
<div>{socialLinks}</div>
}
{this.props.metadata.links.interview &&
<div>
<a className="cta-link" href={this.props.metadata.links.interview}>Read Interview</a>
</div>
}
{this.props.metadata.fellow_directory_link &&
<div>
<a href={this.props.metadata.fellow_directory_link.link} className="cta-link">See all {this.props.metadata.fellow_directory_link.type} fellows</a>
</div>
}
</div>
</div>
</div>
Expand Down
47 changes: 47 additions & 0 deletions source/js/fellowships.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "React" }] */

import React from 'react';
import ReactDOM from 'react-dom';

import Person from './components/people/person.jsx';

// Embed various Fellowships pages related React components
function injectReactComponents() {
// Science Fellowship
if (document.getElementById(`featured-science-fellow`)) {
let metadata = {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alanmoo

We could feed these hardcoded metadata via HTML data-* attributes... but some of them aren't string. It's more troublesome to hardcode array and object as data-* values... and it'll make the HTML code less readable. I can't find a DRYer way to do this... at least not now as these values are hardcoded.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that this is in a separate file it makes a lot more sense.

featured: true,
'internet_health_issues': [ `Decentralization`, `Open Innovation` ],
links: [],
name: `Firstname Surname`,
role: `[Area Fellowship] Fellow, [Year]`,
location: `City, Country`,
image: `https://images.pexels.com/photos/264206/pexels-photo-264206.jpeg?w=500`,
quote: `Quote quote quote quote quote quote quote quote quote quote quote quote.`,
affiliations: [`Stanford University Professor; YouthLAB founder`],
'fellow_directory_link': { type: `science`, link: `/fellowships/directory` }
};

ReactDOM.render(<Person metadata={metadata} />, document.getElementById(`featured-science-fellow`));
}

// Open Web Fellowship
if (document.getElementById(`featured-open-web-fellow`)) {
let metadata = {
featured: true,
'internet_health_issues': [ `Decentralization`, `Open Innovation` ],
links: [],
name: `Firstname Surname`,
role: `[Area Fellowship] Fellow, [Year]`,
location: `City, Country`,
image: `https://images.pexels.com/photos/264206/pexels-photo-264206.jpeg?w=500`,
quote: `Quote quote quote quote quote quote quote quote quote quote quote quote.`,
affiliations: [`Stanford University Professor; YouthLAB founder`],
'fellow_directory_link': { type: `science`, link: `/fellowships/directory` }
};

ReactDOM.render(<Person metadata={metadata} />, document.getElementById(`featured-open-web-fellow`));
}
}

export default { injectReactComponents };
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exporting a named function here. I think we'll end up having more functions in this module in the future.

5 changes: 5 additions & 0 deletions source/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import HomeNews from './components/home-news/home-news.jsx';
import News from './components/news/news.jsx';
import Upcoming from './components/upcoming/upcoming.jsx';

import fellowships from './fellowships';

const SHOW_MEMBER_NOTICE = false;

// To be populated via XHR...
Expand Down Expand Up @@ -231,6 +233,9 @@ let main = {
if (document.querySelector(`#news`)) {
ReactDOM.render(<News env={env}/>, document.querySelector(`#news`));
}

// Fellowships pages related components
fellowships.injectReactComponents();
}
};

Expand Down
1 change: 1 addition & 0 deletions source/sass/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,4 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
@import './views/about';
@import './views/contact';
@import './views/projects';
@import './views/fellowships/shared';
Loading