Fellowships work (#996)

* Set stage for fellowships pages w/ django template (#961)

* Set stage for fellowships pages w/ django template

* Adding some stub urls for the fellowships site. (#971)

* Adding some stub urls for the fellowships site.

* Update some of the urls a bit more

* fellowships homepage wireframe (#965)

* Fix review apps for fellows (#1010)

* Test commit

* Find out which url is it resolving to

* Fix stuff

* Remove debugging stuff

* fixed rebase conflicts

* Fellowships support page (#1006)

Fellowships support page

* fixed rebase conflicts

* Responsive fellowships nav & better multi-page nav on mobile (#1020)

* Related to #1019 - repsonsive fellowships nav + #977 - better multi-page nav on mobile

* Updated fellowships homepage (#1042)

* updated fellowships homepage

* updated fellowships support page (#1049)

* Fellowships directory pages (#1046)

* Related to #955 - fellowships directory pages

* Update fellowships type pages (#1059)

* added illustration to fellowship types page and fellowships support page (#1061)

* made fellowships work use the new master template (#1069)

* updated /apply page so it's in 'application open' state (#1070)

* More assets (#1073)

* added more assets & created a svg sub-folder

* added hero image to fellowships homepage

* Related to #1062 - hide affiliation meta from front end (#1075)

* design tweaks (#1081)

* design tweaks

* show fellow location in fellowships directory (#1103)

* Added loading icon (#1093)

* Related to #1045 - added loading icon

* Featured fellows (#1112)

* added featured fellows on fellowships homehomepomepage (hardcoded)

* hide some incomplete content for now (#1113)

* Fixes #1092 - added back missing icon & ran task to optimize svgs (#1108)

* Added placeholder headshot to Person component (#1119)

* Related #1114 - added placeholder headshot

* Updated fellowships homepage content and layout again (#1122)

* Related to #1120 - updated fellowships homepage content and layout again
* Related to #1124 - hero banner adjustment

* Fixed #1096 - replaced a svg (#1123)

* Content changes to apply page (#1127)

* Related to #1116 - content changes to apply page

* Fixed broken 'see work' link (#1129)

* Fixed #1128 - fixed broken 'see work' link

* Fixes #1144 - fixed a fellow's social link (#1145)

* remmoved 'senior fellow' section from directory pages (#1150)

* redirected /fellowship to /fellowships (#1149)

* redirected /fellowship to /fellowships

* removed an extra line

* Fellowships improvements (#1157)

* code improvement

* removed a few empty files

.eslintrc.yaml

@@ -13,3 +13,4 @@ parserOptions:
 
 rules:
   react/jsx-uses-vars: [2]
+  react/jsx-uses-react: [2]

README.md

@@ -117,7 +117,7 @@ You can run the tests using the following command
 
 HTML for the majority of the site is generated from [Pug](https://pugjs.org) templates.
 
-Some templates used by Mezzanine (at the time of writing: Opportunity and Campaign pages) are written as Django templates but extend blocks from a common base template (`network-api/networkapi/templates/pages/base-compiled.html`) that is generated from Pug (see `source/pug/templates/base-for-django.pug`). This allows code sharing for the overall HTML "shell" of the site between Pug and Django templates as we migrate away from Pug.
+Some templates used by Mezzanine (at the time of writing: Opportunity, Campaign, and Fellowships pages) are written as Django templates but extend blocks from a common base template (`network-api/networkapi/templates/pages/base-compiled.html`) that is generated from Pug (see `source/pug/templates/base-for-django.pug`). This allows code sharing for the overall HTML "shell" of the site between Pug and Django templates as we migrate away from Pug.
 
 Localized strings are pulled from [Java .properties](https://en.wikipedia.org/wiki/.properties) files located in `/locales`.
 

network-api/networkapi/fellows/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class FellowsConfig(AppConfig):
+    name = 'fellows'

network-api/networkapi/fellows/templates/application_cta_banner.html

@@ -0,0 +1,13 @@
+<div id="fellowships-application-cta-banner" class="p-3 p-md-5">
+  <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
+    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
+      <img class="mr-sm-4 hidden-sm-down" src="/_images/fellowships/svg/applications-open-fellows-optm.svg">
+      <div>
+        <h3 class="h3-cta-black">Applications are open</h3>
+        <p>Ready to become a Mozilla fellow? Apply today.</p>
+      </div>
+    </div>
+    <a href="{% url 'fellowships-apply' %}" class="btn btn-normal">Apply here</a>
+  </div>
+</div> 
+

network-api/networkapi/fellows/templates/contact_banner.html

@@ -0,0 +1,5 @@
+<hr class="my-2">
+<div class="opp-foot d-flex align-items-center"><img class="mr-3" src="/_images/fellowships/svg/mini_contact_us-fellows-with-gradient.svg" width="47" height="42">
+  <p class="body-black mb-0">Do you have any questions about this program? <a href="mailto:[email protected]">Contact us</a>.</p>
+</div>
+<hr class="my-2">

network-api/networkapi/fellows/templates/fellows_apply.html

@@ -0,0 +1,36 @@
+{% extends "./pages/fellowships.html" %}
+
+{% block bodyID %}fellows-apply{% endblock %}
+
+{% block mainContent %}
+
+
+<div class="row mb-5">
+  <div class="col-md-8 offset-md-2">
+    <div class="row">
+      <div class="col-12">
+        <h1 class="h1-white text-capitalize">Be a fellow</h1>
+        <p>Mozilla Fellowships provide resources, tools, community and amplification to those building a more ​humane​ ​digital​ ​world. During their tenure, Fellows use their skill sets — in technology, in advocacy, in law — to lay the groundwork for a more open and inclusive internet. Mozilla Fellows hail from a range of disciplines and geographies, and are awarded competitive compensation and benefits.</p>
+        <h3 class="h5-black mb-1">Science</h3>
+        <p class="mb-4">Our science-focused fellows are researchers who want to increase the openness of data sharing of science research communities.</p>
+        <h3 class="h5-black mb-1">Open Web</h3>
+        <p class="mb-4">Our fellows working on issues to support the growing field of public interest technology are passionate about working increasing transparency, privacy and security in the open web.</p>
+        <h3 class="h5-black mb-1">Tech Policy</h3>
+        <p class="mb-4">Our fellows focused on technology policy-related issues around the world that are central to open public policy at the intersection of legal, academic, and governmental action.</p>
+        <h3 class="h5-black mb-1">Media</h3>
+        <p class="mb-4">Our fellows in open media are creators and media-makers inspired by the open web to explore the boundaries of technology privacy, politics, public awareness, and surveillance.</p>
+      </div>
+      <div class="col-12 mt-2 mb-5">
+        <a href="https://mozilla.fluxx.io/apply/2018fellows" class="btn btn-normal">Apply to be a fellow today</a>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        {% include 'contact_banner.html' %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+

network-api/networkapi/fellows/templates/fellows_directory.html

@@ -0,0 +1,16 @@
+{% extends "./pages/fellowships.html" %}
+
+{% block bodyID %}fellows-directory{% endblock %}
+
+{% block mainContent %}
+<div class="row">
+  <div class="col-md-12 col-lg-9">
+    <div class="mb-4">
+      <h1 class="h1-white">Fellows Directory</h1>
+    </div>
+  </div>
+</div>
+
+<div id="fellows-directory-featured-fellows">
+</div>
+{% endblock %}

network-api/networkapi/fellows/templates/fellows_directory_type.html

@@ -0,0 +1,27 @@
+{% extends "./pages/fellowships.html" %}
+
+{% block bodyID %}fellows-directory-{{type|slugify}}{% endblock %}
+
+{% block mainContent %}
+<div id="fellowship-breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item small-gray">
+      <a href="{% url 'fellowships-directory' %}" class="small-gray">Directory</a>
+    </li>
+    <li class="breadcrumb-item small-gray active text-capitalize">
+      {{ type }} Fellows
+    </li>
+  </ol>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div class="mb-4">
+      <h1 class="h1-white text-capitalize">{{ type }} Fellows</h1>
+    </div>
+  </div>
+</div>
+
+<div id="fellows-directory-fellows-by-type" data-type="{{type}}">
+</div>
+{% endblock %}

network-api/networkapi/fellows/templates/fellows_home.html

@@ -0,0 +1,173 @@
+{% extends "./pages/fellowships.html" %}
+
+{% block bodyID %}fellows-home{% endblock %}
+
+{% block heroGuts %}
+<div class="row">
+  <div class="col-md-12 col-lg-6 py-5">
+    <div class="mb-4">
+      <h1 class="h1-white">Mozilla Fellowships</h1>
+    </div>
+    <p class="lead-black">Mozilla Fellows uphold the internet as a force for good.</p>
+  </div>
+  <div class="col-md-12 col-lg-6 text-right">
+    <div class="d-flex h-100 hidden-md-down">
+      <div class="align-self-end ml-auto mb-3">
+        <strong>Hang Do Thi Duc</strong><br>
+        Mozilla Media Fellow - 2017
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block mainContent %}
+<div class="row mb-5">
+  <div class="col-12 mt-2 mb-5">
+    <hr class="hr-gradient mt-0">
+    <h2 class="h2-headings-white">What are the Mozilla Fellowship?</h2>
+  </div>
+  <div class="col-12 mb-4">
+    <div class="row">
+      <div class="col-md-9">
+        <p>The internet today is pervasive: It shapes economies, influences governments, and is layered into billions of lives.</p>
+        <p>A pervasive internet has the potential to uplift society — it can promote democracy, open markets, and free expression. But it can also promote polarization, mass surveillance, and misinformation.</p>
+        <p>More than ever, we need a movement to ensure the internet remains a force for good. Mozilla Fellows work on the front lines of that movement, developing new thinking on how to address emerging threats and challenges facing a healthy internet. Here’s how:</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-12">
+    <div class="row mb-4">
+      <div class="col-md-9">
+        <h3 class="h5-black">Fellows put individuals in control of their personal data</h3>
+        <p>Mozilla Fellow <a href="https://www.mozillapulse.org/profile/288">Hang Do Thi Duc</a> created Data Selfie, a browser extension that provides an intimate window into data mining, predictive analytics, and Facebook consumption. Fellow <a href="https://twitter.com/LinetData">Linet Kwamboka</a> researches policies that guide data collection and dissemination across East Africa. And Fellow <a href="https://www.mozillapulse.org/profile/282">Rebecca Ricks</a> works with Human Rights Watch to explore how people use encryption online. </p>
+      </div>
+      <div class="col-md-3 mb-4 mb-md-0 d-flex justify-content-center align-items-center hidden-sm-down">
+        <img src="/_images/fellowships/svg/illustration-personal-data.svg">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-md-9">
+        <h3 class="h5-black">Fellows help connect the unconnected</h3>
+        <p>Mozilla Fellow <a href="https://twitter.com/amina_fazlullah">Amina Fazlullah</a> promotes policies that support broadband connectivity in rural and vulnerable U.S. communities. Fellow <a href="https://twitter.com/stevesong">Steve Song</a> examines regulatory and policy barriers associated with bringing the next billion online. And Fellow <a href="https://www.mozillapulse.org/profile/312">Sarah Kiden</a> researches last-mile connectivity in East Africa.</p>
+      </div>
+      <div class="col-md-3 mb-4 mb-md-0 d-flex justify-content-center align-items-center hidden-sm-down">
+        <img src="/_images/fellowships/svg/illustration-connect-unconnected.svg">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-md-9">
+        <h3 class="h5-black">Fellows keep artificial intelligence accountable</h3>
+        <p>Mozilla Fellow <a href="https://twitter.com/lawgeek">Jason Schultz</a> analyzes the impact of machine learning on civil liberties. Fellow <a href="https://twitter.com/terahlyons">Terah Lyons</a> coordinates international governance of AI. And Fellow <a href="https://twitter.com/suchanaseth">Suchana Seth</a> works alongside Data & Society to research biased algorithms.</p>
+      </div>
+      <div class="col-md-3 mb-4 mb-md-0 d-flex justify-content-center align-items-center hidden-sm-down">
+        <img src="/_images/fellowships/svg/illustration-artificial-intelligence.svg">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-md-9">
+        <h3 class="h5-black">Fellows make scientific research more open </h3>
+        <p>Mozilla Fellow <a href="https://twitter.com/amelghouila">Amel Ghouila</a> leverages open-source data and tools to bolster biomedical research across the African continent. And Fellow <a href="https://twitter.com/chartgerink">Chris Hartgerink</a> explores how to make scholarly communication more collaborative, accurate, and open.</p>
+      </div>
+      <div class="col-md-3 mb-4 mb-md-0 d-flex justify-content-center align-items-center hidden-sm-down">
+        <img src="/_images/fellowships/svg/illustration-open-scientific-research.svg">
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-9">
+        <p>Mozilla Fellowships provide resources, tools, community and amplification to those building a more ​humane​ ​digital​ ​world. During their tenure, Fellows use their skill sets — in technology, in advocacy, in law — to design products, run campaigns, influence policy and ultimately lay the groundwork for a more open and inclusive internet.</p>
+        <p>Mozilla Fellows hail from a range of disciplines and geographies: They are policymakers in Kenya, journalists in Brazil, engineers in Germany, privacy activists in the United States, and data scientists in the Netherlands. Fellows work on individual projects, but also collaborate on cross-disciplinary solutions to the internet’s biggest challenges. Fellows are awarded competitive compensation and benefits.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-12">
+    <hr class="hr-gradient mt-0">
+  </div>
+  <div class="col-md-12 mb-5">
+    <h2 class="h2-headings-white">Meet Some of the Mozilla Fellows</h2>
+  </div>
+  <div class="featured-person col-6 col-sm-4 col-md-3 mb-4 mb-sm-0">
+    <img src="/_images/fellowships/headshot/OrlandoDelAguila.jpg" class="img-fluid d-block" src="" alt="Headshot"/>
+    <h2 class="h5-black my-2">Orlando Del Aguila</h2>
+    <p class="small-gray">a software engineer, entrepreneur and a consultant who is experienced in high scalability projects</p>
+    <div class="person-social-links mt-3">
+      <a href="https://twitter.com/eatcodetravel" class="twitter gray small mr-4"></a>
+      <a href="https://www.linkedin.com/in/orlandodelaguila/" class="linkedIn gray small mr-4"></a>
+    </div>
+  </div>
+  <div class="featured-person col-6 col-sm-4 col-md-3 mb-4 mb-sm-0">
+    <img src="/_images/fellowships/headshot/AmbaKak.jpg" class="img-fluid d-block" src="" alt="Headshot"/>
+    <h2 class="h5-black my-2">Amba Kak</h2>
+    <p class="small-gray">works to understand how India's experience with protecting the open Internet can inform the global debate and will bring comparative insights to ongoing policy processes in India</p>
+    <div class="person-social-links mt-3">
+      <a href="https://twitter.com/ambaonadventure" class="twitter gray small mr-4"></a>
+      <a href="https://www.linkedin.com/in/amba-kak-48569b108/" class="linkedIn gray small mr-4"></a>
+    </div>
+  </div>
+  <div class="featured-person col-6 col-sm-4 col-md-3 mb-4 mb-sm-0">
+    <img src="/_images/fellowships/headshot/LinetKwamboka.jpg" class="img-fluid d-block" src="" alt="Headshot"/>
+    <h2 class="h5-black my-2">Linet Kwamboka</h2>
+    <p class="small-gray">works on understanding the policies that guide data collection and dissemination in East Africa (Kenya, Uganda, Tanzania and Rwanda). Through this, she aims to publish policy recommendations on existing policies, proposed policy</p>
+    <div class="person-social-links mt-3">
+      <a href="https://twitter.com/linetdata" class="twitter gray small mr-4"></a>
+    </div>
+  </div>
+  <div class="featured-person col-6 col-sm-4 col-md-3 mb-4 mb-sm-0">
+    <img src="/_images/fellowships/headshot/AnMeChung.jpg" class="img-fluid d-block" src="" alt="Headshot"/>
+    <h2 class="h5-black my-2">An-Me Chung</h2>
+    <p class="small-gray">a Senior Fellow of Web Literacy and Internet Health, and formerly Director of Strategic Partnerships at the Mozilla Foundation</p>
+    <div class="person-social-links mt-3">
+      <a href="https://twitter.com/anmechung" class="twitter gray small mr-4"></a>
+      <a href="https://www.linkedin.com/in/an-me-chung-0b95632a/" class="linkedIn gray small mr-4"></a>
+    </div>
+  </div>
+  <div class="col-md-12 text-center my-5">
+    <a href="{% url 'fellowships-directory' %}" class="btn btn-ghost">See Fellows Directory</a>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-12">
+    <div class="row">
+      <div class="col-md-12 mb-5">
+        <hr class="hr-gradient mt-0">
+        <h2 class="h2-headings-white">Why Become a Fellow?</h2>
+      </div>
+    </div>
+  </div>
+  <div class="col-12">
+    <div class="row flex-column-reverse flex-md-row">
+      <div class="col-md-6">
+        <p>Mozilla Fellowships are a transformative experience for emerging leaders. As a Fellow, you will:</p>
+        <ul class="fellowships-list">
+          <li>Expand your network and sphere of influence. <a href="{% url 'fellowships-directory' %}">Meet the Mozilla Fellows</a>.</li>
+          <li>Design impactful projects with the potential to reach millions. <a href="https://{{pulse_domain}}/featured">See what Fellows and their collaborators are working on</a>.</li>
+          <li>Learn from and collaborate with a global community of Mozillians. <a href="https://www.mozilla.org/contribute/">Meet more than 10,000 Mozilla contributors around the world</a>.</li>
+        </ul>
+      </div>
+      <div class="col-md-6 mb-4 mb-md-0">
+        <img src="/_images/fellowships/[email protected]">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-12">
+  {% include 'application_cta_banner.html' %}
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-12">
+    <hr class="my-2">
+    <div class="opp-foot d-flex align-items-center"><img class="mr-3" src="/_images/fellowships/svg/mini_support_hand-fellows-with-gradient.svg">
+      <p class="body-black mb-0">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. <a href="{% url 'fellowships-support' %}">Find out how to support</a>.</p>
+    </div>
+    <hr class="my-2">
+  </div>
+</div>
+{% endblock %}

network-api/networkapi/fellows/templates/fellows_host_org.html

@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+  <div class="col-6 col-md-3 logo"><img src="/_images/fellowships/logo/[email protected]"></div>
+</div>

network-api/networkapi/fellows/templates/fellows_media.html

@@ -0,0 +1,35 @@
+{% extends "fellows_type.html" %}
+
+{% block fellowship_description %}
+{% lorem 2 p %}
+{% endblock %}
+
+{% block fellowship_illustration %}
+<img src="/_images/fellowships/svg/media-focus-fellowship-optim.svg">
+{% endblock %}
+
+{% block benefit_illustration %}
+<img src="/_images/fellowships/[email protected]">
+{% endblock %}
+
+{% block benefit_description %}
+{% lorem 2 p %}
+{% endblock %}
+
+{% block benefit_list %}
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+{% endblock %}
+
+{% block eligibility_list %}
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+<li>bullet list item</li>
+{% endblock %}