Related to #954 - fellowships application closed page & CSS cleanup f…

…or 'join-us' component
MozillaFoundation · Jan 30, 2018 · b04bdf4 · b04bdf4
1 parent 0e60574
commit b04bdf4
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 27 deletions.
diff --git a/network-api/networkapi/fellows/templates/fellows_apply.html b/network-api/networkapi/fellows/templates/fellows_apply.html
@@ -0,0 +1,21 @@
+{% extends "fellowships-base.html" %}
+
+{% block template_id %}fellows-apply{% endblock %}
+
+{% block body %}
+
+<div class="join-us full-page" data-cta-header="Application are closed for 2017" data-cta-description="Check back in [Month/Year]. You can also give us your e-mail address and we will notify you once the applications are open." data-newsletter=""></div>
+
+<div class="row mb-5">
+  <div class="col-md-6">
+    <h2 class="h4-light-black">Application cycle dates</h2>
+    <p>{% lorem 1 p %}</p>
+  </div>
+  <div class="col-md-6">
+    <h2 class="h4-light-black">More info regarding application</h2>
+    <p>{% lorem 1 p %}</p>
+  </div>
+</div>
+
+
+{% endblock %}
diff --git a/network-api/networkapi/fellows/urls.py b/network-api/networkapi/fellows/urls.py
@@ -9,4 +9,5 @@
     url(r'^support/$', views.fellows_support, name='fellowships-support'),
     url(r'^science/$', views.fellows_science, name='fellowships-science'),
     url(r'^open-web/$', views.fellows_openweb, name='fellowships-open-web'),
+    url(r'^apply/$', views.fellows_apply, name='fellowships-apply'),
 ]
diff --git a/network-api/networkapi/fellows/views.py b/network-api/networkapi/fellows/views.py
@@ -20,3 +20,7 @@ def fellows_science(request):
 
 def fellows_openweb(request):
     return render(request, 'fellows_openweb.html')
+
+
+def fellows_apply(request):
+    return render(request, 'fellows_apply.html')
diff --git a/network-api/networkapi/templates/fellowships-base.html b/network-api/networkapi/templates/fellowships-base.html
@@ -23,7 +23,7 @@
   <title>Mozilla Foundation – {{ page.meta_title }}</title>
 </head>
 
-<body id="view-opportunity">
+<body id="view-{% block template_id %}{% endblock %}">
   <div class="takeover"></div>
   <div id="primary-nav"></div>
   <div class="wrapper">
@@ -82,7 +82,7 @@
               <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>
+              <a href="{% url 'fellowships-apply' %}" class="{% fellowship_active_nav request 'fellowships-apply' %} mr-4">Apply to be a Fellow</a>
             </div>
           </div>
         </div>

diff --git a/source/js/components/join/join.jsx b/source/js/components/join/join.jsx
@@ -67,7 +67,7 @@ export default class JoinUs extends React.Component {
     });
 
     let signupState = classNames({
-      'row py-5 px-md-2': true,
+      'row py-5': true,
       'signup-success': this.state.signupSuccess && this.state.userSubmitted,
       'signup-fail': !this.state.signupSuccess && this.state.userSubmitted
     });
@@ -77,7 +77,7 @@ export default class JoinUs extends React.Component {
         <div className="col text-center mb-2 join-graphic">
           <img src={`/_images/burst${this.state.signupSuccess ? `2` : `1`}.svg`}/>
         </div>
-        <div className="col">
+        <div className="col join-main-content">
           <div className="row">
             <div className="col-12 join-content">
               <div className="mb-5 join-page-title">

diff --git a/source/js/components/join/join.scss b/source/js/components/join/join.scss
@@ -61,8 +61,7 @@
     }
 
     @media (min-width: $bp-md) {
-      padding-top: 1em;
-      padding-bottom: 1em;
+      padding: 1em 2rem;
 
       .join-btn {
         width: auto;
@@ -94,9 +93,6 @@
   }
 
   &.full-page {
-    margin-top: 2rem;
-    margin-bottom: 3rem;
-
     .join-graphic {
       display: block;
 
@@ -130,21 +126,8 @@
         }
       }
 
-      .join-content,
-      .join-form {
-        @include make-col-pull(6);
-      }
-    }
-
-    @media (min-width: $bp-lg) {
-      .join-content,
-      .join-form {
-        @include make-col-pull(5);
-        @include make-col(10);
-      }
-
-      .join-graphic {
-        @include make-col-push(7);
+      .join-main-content {
+        @include make-col-pull(4);
       }
     }
   }

diff --git a/source/pug/views/sign-up.pug b/source/pug/views/sign-up.pug
@@ -6,4 +6,6 @@ block masterParams
 
 block content
   .container
-    .join-us.full-page
+    .row.justify-content-center.my-5
+      .col-10
+        .join-us.full-page
diff --git a/source/pug/views/style-guide.pug b/source/pug/views/style-guide.pug
@@ -51,7 +51,7 @@ block content
 
         h3.my-5 Components
 
-        h4 jump-bar
+        h4 .jump-bar
 
         ul.jump-bar.mb-3
           li.no-link Featured
@@ -62,6 +62,15 @@ block content
           li
             a(href=`https://www.mozillapulse.org/issues/open-innovation`) Open Innovation
 
-        h4 hr-gradient
+        h4 .hr-gradient
 
         hr.hr-gradient
+
+        h4 .join-us
+        .join-us
+
+        h4 .join-us.full-width
+        .join-us.full-width
+
+        h4 .join-us.full-page 
+        .join-us.full-page