Merge pull request #425 from hasgeek/service-worker

hasjob PWA

.gitignore

@@ -24,3 +24,4 @@ hasjob/static/gen
 *.sql
 *.gz
 *.bz2
+hasjob/assets/node_modules

README.md

@@ -100,7 +100,7 @@ Hasjob makes use of subdomains to serve different sub-boards for jobs. To set it
 
 Hasjob runs on [Python](https://www.python.org) with the [Flask](http://flask.pocoo.org/) microframework.
 
-##### Virutalenv + pip
+##### Virutalenv + pip + webpack
 
 If you are going to use a computer on which you would work on multiple Python based projects, [Virtualenv](docs.python-guide.org/en/latest/dev/virtualenvs/) is strongly recommended to ensure Hasjob’s elaborate and sometimes version-specific requirements doesn't clash with anything else.
 
@@ -122,6 +122,16 @@ Finish configuration with:
 
     $ python manage.py db create
 
+You will need to install all dependencies listed in `package.json`
+     
+    $ cd hasjob/assets
+    $ npm install
+
+You will need to run Webpack to bundle CSS, JS files & generate the service-worker.js
+
+    $ cd hasjob/assets
+    $ yarn build
+
 Before you run the server in development mode, make sure you have Postgres server and Redis server running as well. To start Hasjob:
 
     $ python runserver.py

hasjob/__init__.py

@@ -17,16 +17,14 @@
 
 # First, make an app and config it
 
-app = Flask(__name__, instance_relative_config=True, static_folder=None)
+app = Flask(__name__, instance_relative_config=True)
 app.static_folder = 'static'
 mail = Mail()
 lastuser = Lastuser()
 redis_store = FlaskRedis()
 
 # Second, setup assets
 version = Version(__version__)
-assets['hasjob.js'][version] = 'js/app.js'
-assets['hasjob.css'][version] = 'css/app.css'
 
 # Third, after config, import the models and views
 
@@ -47,11 +45,9 @@
 
 RQ(app)
 
-baseframe.init_app(app, requires=['hasjob'],
-    ext_requires=['baseframe-bs3',
-        ('jquery.autosize', 'jquery.sparkline', 'jquery.liblink', 'jquery.wnumb', 'jquery.nouislider'),
-        'baseframe-firasans', 'fontawesome>=4.3.0', 'bootstrap-multiselect', 'nprogress', 'ractive',
-        'jquery.appear', 'hammer'])
+baseframe.init_app(app, requires=['baseframe-bs3', 'jquery.autosize', 'jquery.liblink',
+    'jquery.wnumb', 'jquery.nouislider', 'baseframe-firasans', 'fontawesome>=4.3.0',
+    'bootstrap-multiselect', 'nprogress', 'ractive', 'jquery.appear', 'hammer'])
 # TinyMCE has to be loaded by itself, unminified, or it won't be able to find its assets
 app.assets.register('js_tinymce', assets.require('!jquery.js', 'tinymce.js>=4.0.0', 'jquery.tinymce.js>=4.0.0'))
 app.assets.register('css_editor', Bundle('css/editor.css',

hasjob/static/js/app.js → hasjob/assets/js/app.js

@@ -215,6 +215,7 @@ window.Hasjob.StickieList = {
 
     //rgba - RGBA values at a particular point in the canvas.
     var rgba = window.Hasjob.Config[funnelName].canvasContext.getImageData(value, 1, 1, 1).data;
+    var colourHex;
     if (rgba[0] > 255 || rgba[1] > 255 || rgba[2] > 255) {
       // rgb value is invalid, hence return white
       colourHex ="#FFFFFF";
@@ -245,16 +246,24 @@ window.Hasjob.StickieList = {
   },
   initFunnelViz: function() {
     window.addEventListener('onStickiesInit', function (e) {
-      Hasjob.StickieList.createGradientColour();
-      Hasjob.StickieList.renderGradientColour();
+      /* Check for MaxCounts since on job post page it is assigned much later
+      when related job posts are loaded. */
+      if (window.Hasjob.Config.MaxCounts) {
+        Hasjob.StickieList.createGradientColour();
+        Hasjob.StickieList.renderGradientColour();
+      }
     }, false);
 
     window.addEventListener('onStickiesRefresh', function (e) {
-      Hasjob.StickieList.renderGradientColour();
+      if (window.Hasjob.Config.MaxCounts) {
+        Hasjob.StickieList.renderGradientColour();
+      }
     }, false);
 
     window.addEventListener('onStickiesPagination', function (e) {
-      Hasjob.StickieList.renderGradientColour();
+      if (window.Hasjob.Config.MaxCounts) {
+        Hasjob.StickieList.renderGradientColour();
+      }
     }, false);
   }
 };
@@ -687,9 +696,7 @@ $(function() {
   window.Hasjob.Filters.init();
   window.Hasjob.JobPost.handleStarClick();
   window.Hasjob.JobPost.handleGroupClick();
-  if (window.Hasjob.Config.MaxCounts) {
-    window.Hasjob.StickieList.initFunnelViz();
-  }
+  window.Hasjob.StickieList.initFunnelViz();
 
   var getCurrencyVal = function() {
     return $("input[type='radio'][name='currency']:checked").val();

hasjob/assets/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "hasjob",
+  "version": "0.0.1",
+  "description": "Hasjob is India’s premier job board for tech startups",
+  "main": "app.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "dev": "NODE_ENV=development node_modules/.bin/webpack --progress --profile --colors",
+    "build": "NODE_ENV=production node_modules/.bin/webpack --progress --profile --colors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hasgeek/hasjob.git"
+  },
+  "author": "HasGeek team",
+  "license": "AGPLv3",
+  "bugs": {
+    "url": "https://github.com/hasgeek/hasjob/issues"
+  },
+  "homepage": "https://github.com/hasgeek/hasjob#readme",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.18",
+    "compass-mixins": "^0.12.10",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.9",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.9",
+    "filemanager-webpack-plugin": "^1.0.25",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.20.2",
+    "webpack": "^3.11.0",
+    "workbox-webpack-plugin": "^2.1.2"
+  }
+}

hasjob/static/sass/_40x.scss → hasjob/assets/sass/_40x.scss

@@ -16,6 +16,12 @@
   letter-spacing: -0.2em;
   margin-left: -0.2em; // This must match letter-spacing
 }
+#i40x.offline {
+  font-size: 80px;
+  letter-spacing: 0;
+  margin-left: 0em;
+  margin-right: 0;
+}
 #i40x:after {
   display: block;
   color: $color-title-jobs;

hasjob/static/sass/_footer.sass → hasjob/assets/sass/_footer.sass

@@ -14,7 +14,7 @@ footer
 
 footer .footer-inner
   background: #ebe7e4
-  +box-shadow(0 -1px 5px $color-shadow)
+  box-shadow: 0 -1px 5px $color-shadow
 
 footer .container
   padding-bottom: 0

hasjob/static/sass/_header.sass → hasjob/assets/sass/_header.sass

@@ -1,6 +1,6 @@
 body
   font-family: $font-default
-  background: #e8e7e6 image-url("canvas.jpg")
+  background: #e8e7e6 url("~/static/img/canvas.jpg")
 
 header
   margin-bottom: 0
@@ -11,6 +11,7 @@ header
     font-size: 16px
     margin-top: 10px
     margin-bottom: 10px
+
     small
       display: inline-block
       color: $color-title-geek
@@ -22,14 +23,10 @@ header
       text-decoration: none
       border-bottom: none
 
-    a:hover, a:focus, a:active
-      // background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, $color-title-jobs 8px, $color-title-jobs 13px, rgba(0, 0, 0, 0) 13px)
-      background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 12%, $color-title-jobs 12%, $color-title-jobs 23%, rgba(0, 0, 0, 0) 23%)
-
   #hgnav
     background: #ebe7e4
     border-bottom: 1px solid rgba(0,0,0,0.1)
-    +box-shadow(0 1px 5px $color-shadow)
+    box-shadow: 0 1px 5px $color-shadow
     min-height: 62px
 
     .container
@@ -41,29 +38,47 @@ header
       background-color: $color-title-geek
       border-color: $color-title-geek
       border-bottom: 2px solid $color-title-geek-darker
-      margin-top: 6px
+      margin-top: 15px
       margin-right: 4px
       padding: 0 15px
       color: #fff
 
     .btn-post-job:hover
       background-color: $color-title-geek-dark
 
+    a#hg-login-btn
+      margin-top: 19px
+
+    .nav>li>button
+      margin-top: 13px
+
     .hg-header-app-nav
       max-width: 58%
       overflow: hidden
+      margin-top: 4px
 
       h1 a, h1 a small
-        display: block
         overflow: hidden
         text-overflow: ellipsis
         white-space: nowrap
 
+    .hasjob-mobile-logo
+      height: 40px
+      width: 40px
+      margin: 5px 5px 0 0
+
+    .hasjob-large-logo
+      display: none
+
+    .board-title
+      position: relative
+      top: -4px
+
     .board-caption
-      position: absolute
-      left: 15px
-      right: 15px
-      top: 28px
+      position: relative
+      left: -50px
+      top: 14px
+      line-height: 1
 
     .board-caption h1 a
       width: 100%
@@ -116,12 +131,12 @@ header
   border-bottom: none
 
 #logo
-  +replace-text-with-dimensions('logo-star.png')
+  +replace-text-with-dimensions('~/static/img/logo-star.png')
 
 .filters-wrapper
   width: 100%
   background: #ebe7e4
-  margin: 20px 0 0
+  margin: 8px 0 0
 
   label
     font-weight: normal
@@ -212,6 +227,10 @@ header
 .job-filter-location-search-clear
   cursor: pointer
 
+@media (min-width: 360px)
+  header #hgnav .board-caption
+    left: -60px
+
 @media (min-width: 480px)
   header #hgnav .hg-header-app-nav
     max-width: 70%
@@ -230,13 +249,34 @@ header
     #hgnav 
       min-height: 0
 
+      .hasjob-large-logo
+        height: 30px
+        width: 30px
+        margin: -4px 5px 0 0
+        display: inline-block
+
+      .hasjob-mobile-logo
+        display: none
+
+      .btn-post-job
+        margin-top: 10px
+
+      a#hg-login-btn
+        margin-top: 10px
+
+      .nav>li>button
+        padding-top: 5px
+        margin-top: 0
+
       .container
         height: auto
 
       .hg-header-app-nav
         max-width: 76%
+        margin-top: 4px
 
-      .board-caption
+      .board-caption,
+      .board-title
         position: static
 
       .hg-header-app-nav h1 a small
@@ -247,7 +287,7 @@ header
 
       .filters-wrapper
         width: 100%
-        padding: 10px 0 5px
+        padding: 2px 0 9px
         min-height: 0
         margin: 0
 
@@ -291,6 +331,7 @@ header
 
   .filters
     padding: 0 10px 0 0
+    margin-bottom: 0
     width: 19.8%
 
   .filters-col1

hasjob/static/sass/_popup.sass → hasjob/assets/sass/_popup.sass

@@ -41,7 +41,7 @@
     top: -3.4em
     margin: 0
     padding: 1em
-    @include box-shadow(0 2px 10px $color-shadow)
+    box-shadow: 0 2px 10px $color-shadow
 
     & > *:last-child
       margin-bottom: 0