finish?

Author: 4shub

README.md

@@ -26,14 +26,17 @@ To run this website, you will need to have installed `python 2.7` or higher, `vi
   ```
 
 5. Modify and update env.json with your sample data
+```bash
+$ vi env.json
+```
 
 6. Run server
   To start the webserver type the following:
   ```bash
   $ npm start
   ```
 
-  The website should run on [localhost:5000](http://localhost:5000)
+  The website should run on [localhost:4220](http://localhost:4220)
 
 7. Cleanup
   Remember to deactivate your virtual environment when you are done

index.py

@@ -1,2 +1,2 @@
 from src import app
-app.run(debug=True)
+app.run(debug=False)

package.json

@@ -4,6 +4,7 @@
   "description": "This repository will store the transition website for HackMerced 2017F. It is written in Python with the Flask framewrork and will be used to server some basic files as well as enable a microservice to list jobs from our internal filesystem. This readme will be updated on the full uses of this website and how to use it.",
   "main": "index.js",
   "dependencies": {
+    "jquery": "^3.2.1",
     "normalize.css": "^5.0.0"
   },
   "devDependencies": {
@@ -19,8 +20,9 @@
   "scripts": {
     "test": "",
     "setup": "pip install -r py_deps.txt  && npm install && npm run build && python ./tools/build.py",
-    "build":"gulp production",
+    "build": "gulp production",
     "start": "python index.py",
+    "jobs": "python ./tools/pullJobs.py",
     "gulp": "gulp"
   },
   "repository": {

serve/css/general/index.scss

@@ -23,7 +23,7 @@ aside{
   z-index: 1;
 }
 
-.information{
+.information, .join{
   max-width: 600px;
   width: 100%;
 }

serve/css/general/join.scss

@@ -0,0 +1,59 @@
+.role--lower{
+  display: inline;
+
+  * {
+    display: inline;
+    margin-right: 15px;
+    font-size: 14px;
+    color: $grey;
+  }
+}
+
+.role-title{
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  max-width: 350px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+
+button.role-filter{
+  margin: 10px 20px 10px 0px;
+}
+
+.role{
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0px 20px;
+}
+
+.join{
+  h5{
+    margin: 15px 0px 0px;
+  }
+
+  p{
+    margin:0px 0px;
+  }
+}
+
+.role-details{
+  background: #1F2335;
+  padding: 1px 20px 20px;
+  margin-bottom: 20px;
+  display: none;
+
+  li{
+    margin-left: 30px;
+  }
+
+  button{
+    margin: 20px 0px 0px;
+    padding: 10px 25px;
+    width: 150px;
+  }
+
+}

serve/css/general/z_mobile.scss

@@ -0,0 +1,60 @@
+@media (max-width:600px) {
+  header{
+    display: block;
+  }
+
+  .toTheRight{
+    width: 100%;
+    min-width: 250px;
+    max-width: 100%;
+    padding: 20px;
+  }
+
+  nav{
+    line-height: 40px;
+    text-align: center;
+  }
+
+  .logo{
+    margin: 0 auto 20px;
+
+  }
+
+  h1{
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1.2;
+
+  }
+
+  h4{
+    margin: 25px 0px 15px;
+    line-height: 1.5;
+  }
+
+  aside{
+    display: none;
+  }
+
+  .role{
+    display: block;
+  }
+
+  nav{
+    text-align: center;
+  }
+
+
+  .role--learn-more.slim {
+    margin-top: 15px;
+  }
+
+  button{
+    width: 100%;
+  }
+
+  .role-details button{
+    width: 100%;
+  }
+
+}

serve/img/logo.png

@@ -1,4 +1,5 @@
 
 document.addEventListener("DOMContentLoaded", function(event) {
   imageSlider();
+  findRoles();
 });

serve/js/app.js

@@ -0,0 +1,51 @@
+$(document).on("click", ".role--learn-more", function(){
+    const $this = $(this);
+
+    $this.parent().parent().find(".role-details").toggle();
+});
+
+let roles = {};
+function generateRole(role){
+  role = $.trim(role);
+
+  if(!roles[role]){
+    $("#filter-roles").append(`<button data-type='${role.replace(" ", "-")}' class='role-filter slim'>${role}</button>`);
+
+    roles[role] = true;
+  }
+}
+
+// load Roles
+function findRoles(){
+  $(".role-type").each(function(){
+    generateRole($(this).text());
+  })
+}
+
+
+let filter = {};
+$(document).on("click", ".role-filter", function(){
+  let type = $(this).data("type");
+  filter[type] = (filter[type]) ? false : true;
+  $(this).toggleClass("selected");
+  updateFilter();
+});
+
+function updateFilter(){
+  let vis = 0;
+  $(".role-container").css("display", "none");
+
+  for(let i in filter){
+    if(filter[i]){
+      $(".role--type-" + i).css("display", "block");
+      vis++;
+    }
+
+  }
+
+  if(vis === 0){
+    $(".role-container").css("display", "block");
+  }
+
+
+}

serve/js/general/index.js

@@ -1,17 +1,31 @@
 # do all the work here
-
 from flask import Flask, render_template
+import os
+import inspect
+import json
 app = Flask(__name__)
 
+# get directory
+filename = inspect.getframeinfo(inspect.currentframe()).filename
+os.chdir(os.path.dirname(os.path.abspath(filename)))
+os.chdir("..")
+path = os.path.abspath(os.curdir)
+
+
+
 @app.route('/')
 def index():
-    return render_template('general/index.html', jobs = 0)
+    return render_template('general/index.html')
+
+
+positions = open(path + "/src/static/jobs.json", "r").read()
+positions = json.loads(positions)
 
-@app.route('/work')
+@app.route('/join')
 def jobs():
-    return render_template('general/work.html', jobs = 1)
+    return render_template('general/join.html', jobs=positions )
 
 
 #hello
 if __name__ == "__main__":
-    app.run()
+    app.run(port=4220)

serve/js/general/join.js

@@ -14,7 +14,7 @@ <h4>HackMerced Leadership Information</h4>
         <p>
           HackMerced is looking for a talented group of individuals who want to build the future of our event. Come to our info-session on March 21, 2017 at COB2 130 at UC Merced to learn more. Anyone can help lead our event, as long as you are enrolled in a four-year university.
         </p>
-        <a href="https://www.facebook.com/groups/580850972124303/?fref=nf">
+        <a class='disable-hover' href="https://www.facebook.com/events/270082940100937/">
     <button>Join Event on Facebook</button> </a>
       </article>
     </section>

src/__init__.py

@@ -1,6 +1,6 @@
 {% extends "layout.html" %}
 {% block body %}
-  <div class='information'>
+  <div class='join'>
     <h1>Build HackMerced</h1>
     <section>
       <article>
@@ -11,12 +11,54 @@ <h4>We’re looking for people like you!</h4>
           We also have an FAQ for you below the job listings!
         </p>
       </article>
-      <article>
+      <article class='leadership-list'>
         <h4>HackMerced Leadership Information</h4>
         <h5>Filter Role</h5>
-        <div id='filter-jobs'></div>
+        <div id='filter-roles'></div>
         <h5>Role Listings</h5>
-        <div id='job-listing'></div>
+        <div id='role-listing'>
+          {% for job in jobs['jobs'] %}
+            <div class='role-container role--type-{{job.Division.replace(" ", "-")}}'>
+              <div class='role'>
+                <div class='role-left'>
+                  <div class='role-title'>
+                    {{ job.Role }}
+                  </div>
+                  <div class='role--lower'>
+                    <div class='role--lower-item role-type'>
+                      {{ job.Division }}
+                    </div>
+                    {% if job.Leadership == "Yes" %}
+                      <div class='role--lower-item'>
+                        Leadership
+                      </div>
+                    {% endif %}
+                  </div>
+                </div>
+                <button class='role--learn-more slim'>
+                  Learn More
+                </button>
+              </div>
+              <div class='role-details'>
+                <h5>Description</h5>
+                <div class='role-description'>
+                  {{ job.Description }}
+                </div>
+                <h5>What we look for:</h5>
+                {% for reqs in job.Requirements %}
+                  <li> {{ reqs }} </li>
+                {% endfor %}
+                <h5>Things that aren't required but will help your application:</h5>
+                {% for opts in job.Optional %}
+                  <li> {{ opts }} </li>
+                {% endfor %}
+                <a target='_blank' class='disable-hover' href='https://docs.google.com/forms/d/e/1FAIpQLSe7WG24hMWQvsqNpeiEkJW78d3OjRsg0VO4Toxd4Y-I3RRzRw/viewform?usp=pp_url&entry.2139628244={{job.Role}}&entry.1781500597&entry.1640447617&entry.297979220&entry.2040870261'>
+                  <button>Apply now</button>
+                </a>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
       </article>
       <article>
         <h4>FAQ</h4>

src/templates/general/index.html

@@ -2,7 +2,7 @@
   <div class='logo'></div>
   <nav>
     <li><a fakelink href='/'>Home</a></li>
-    <li><a fakelink href='/jobs'>Work with us!</a></li>
+    <li><a fakelink href='/join'>Join us!</a></li>
     <li><a href='https://github.com/HackMerced'>Open Source</a></li>
     <li><a href='https://www.facebook.com/hackmerced/messages/?initialClientFilter=unanswered&threadid=1695866600&timestamp=1487195154514#'>Contact</a></li>
   </nav>