WIP on jobs board

app/app/settings.py

@@ -92,6 +92,7 @@
     'gitcoinbot',
     'external_bounties',
     'dataviz',
+    'jobs',
     'impersonate',
 ]
 

app/app/urls.py

@@ -38,6 +38,7 @@
 import external_bounties.views
 import faucet.views
 import gitcoinbot.views
+import jobs.views
 import linkshortener.views
 import marketing.views
 import marketing.webhookviews
@@ -46,6 +47,7 @@
 import tdi.views
 from dashboard.router import router as dbrouter
 from external_bounties.router import router as ebrouter
+from jobs.routers import router as job_router
 
 from .sitemaps import sitemaps
 
@@ -58,6 +60,7 @@
     url(r'^api/v0.1/faucet/save/?', faucet.views.save_faucet, name='save_faucet'),
     url(r'^api/v0.1/', include(dbrouter.urls)),
     url(r'^api/v0.1/', include(ebrouter.urls)),
+    url(r'^api/v0.1/', include(job_router.urls)),
     url(r'^actions/api/v0.1/', include(dbrouter.urls)),  # same as active, but not cached in cluodfront
 
     # dashboard views
@@ -364,6 +367,11 @@
 
     # gitcoinbot
     url(settings.GITHUB_EVENT_HOOK_URL, gitcoinbot.views.payload, name='payload'),
+
+    # Job urls goes below
+    path('jobs', jobs.views.list_jobs, name='job-list-template'),
+    path('jobs/<int:pk>/', jobs.views.job_detail, name='job-detail-template'),
+    path('jobs/new/', jobs.views.create_job, name='job-create-template'),
     url(r'^impersonate/', include('impersonate.urls')),
 ]
 

app/assets/v2/css/jobs.css

@@ -0,0 +1,206 @@
+body {
+  font-family: 'Muli', sans-serif;
+  background: #FFFFFF;
+}
+
+h3, h4 {
+  text-transform: none;
+}
+
+h4 {
+  text-align: left;
+}
+
+#filter {
+  color: #3e24fb;
+}
+
+#matches {
+  font-family: 'Muli', sans-serif;
+  font-weight: 300;
+  padding-left: 10px;
+}
+
+.title {
+  text-transform: capitalize;
+}
+
+.title-row {
+  display: flex;
+  margin-top: 2em;
+  padding-bottom: 5px;
+  border-bottom: 2px solid #3E24FB;
+}
+
+.body .row {
+  margin-left: 0px;
+}
+
+.body .avatar {
+  max-height: 50px;
+  max-width: 50px;
+}
+
+.job-row {
+  color: #000000;
+  text-decoration: none;
+  padding: 10px 20px 10px 4em;
+}
+
+.job-row:hover {
+  background-color: #F9F9F9;
+}
+
+.job-row .avatar-container {
+  text-align: right;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.job-row img {
+  margin-top: 6px;
+  margin-right: 20px;
+}
+
+.job-row .title {
+  margin-bottom: 2px;
+}
+
+.job-company-detail {
+  text-align: right;
+}
+
+.job-info {
+  top: 4px;
+  text-align: right;
+}
+
+.job-title {
+  padding-top: 2em;
+}
+
+.job-header {
+  padding-bottom: 6em;
+}
+
+#job-board-title {
+  text-transform: uppercase;
+  color: #00A55E;
+  text-align: center;
+  font-size: 3em;
+}
+
+.company-name,
+#exp-lang,
+#job-post-duration {
+  color: #717171;
+}
+
+.job-detail {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.job-type {
+  color: #00A55E;
+  text-transform: uppercase;
+  flex-grow: 1;
+}
+
+.job-location {
+  flex-grow: 1;
+  color: #666666;
+}
+
+.flex-grow-8 {
+  flex-grow: 8;
+}
+
+.job-type-loc {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 1em 0 1em 0;
+}
+
+.job-company-exp {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 1em 0 1em 0;
+  padding-bottom: 2em;
+}
+
+.job-posted {
+  flex-grow: 8;
+}
+
+.job-experience {
+  flex-grow: 1;
+}
+
+.job-company {
+  margin-right: 5px;
+  font-weight: bold;
+  color: #666666;
+}
+
+.job-skill {
+  color: #666666;
+}
+
+.job-tags {
+  margin: 1em 0 1em 0;
+}
+
+.tags {
+  display: flex;
+}
+
+.box {
+  padding: 14px;
+  border: 1px solid #DBDBDB;
+  border-radius: 3px;
+  margin: 0;
+}
+
+.btn-white {
+  border: 1px solid #979797;
+  color: #0D0764;
+  border-radius: 3px;
+  position: relative;
+}
+
+.job-apply-btn {
+  background-color: #0D0764;
+  color: #FFFFFF;
+  padding-left: 2em;
+  padding-right:2em;
+  margin-right: 1em;
+}
+
+.github-profile-btn {
+  color: #0D0764;
+}
+
+.tag.keyword {
+  min-width: 0;
+  font-size: 11px;
+  padding: 5px 10px;
+  background-color: #F2F6F9;
+  color: #6184AC;
+}
+
+@media (max-width: 768px) {
+
+  .job-info {
+    top: 10px;
+    font-size: 10px;
+    text-align: left;
+  }
+
+  .job-row {
+    padding-left: 1em;
+    padding-right: 2em;
+  }
+}

app/assets/v2/js/pages/job_details.js

@@ -0,0 +1,48 @@
+/* eslint block-scoped-var: "warn" */
+/* eslint no-redeclare: "warn" */
+
+var build_detail_page = function(result) {
+  result['created_at'] = timeDifference(new Date(), new Date(result['created_at']));
+  var template = $.templates('#job_detail');
+
+  html = template.render(result);
+
+  $('#rendered_job_detail').html(html);
+};
+
+var pull_job_from_api = function() {
+  var uri = '/api/v0.1/jobs/' + document.job_id + '/';
+
+  $.get(uri, function(result) {
+    result = sanitizeAPIResults(result);
+    var nonefound = true;
+
+    if (result) {
+      nonefound = false;
+      build_detail_page(result);
+      document.result = result;
+      $('#rendered_job_detail').css('display', 'block');
+    }
+    if (nonefound) {
+      $('#rendered_job_detail').css('display', 'none');
+      // is there a pending issue or not?
+      $('.nonefound').css('display', 'block');
+    }
+  }).fail(function() {
+    _alert({message: gettext('got an error. please try again, or contact [email protected]')}, 'error');
+    $('#rendered_job_detail').css('display', 'none');
+  }).always(function() {
+    $('.loading').css('display', 'none');
+  });
+};
+
+var main = function() {
+  setTimeout(function() {
+    pull_job_from_api();
+  }, 100);
+};
+
+
+window.addEventListener('load', function() {
+  main();
+});