Build system refactor + ES6 refactor + upgrade dependancies

.gitignore

@@ -1,13 +1,23 @@
 build
 static
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+package-lock.json
 node_modules
-dist
+
 *.egg-info
 *.pyc
 *.pyo
 *~
 .*
 !.git*
+!.babelrc
+!.eslintrc
+!.nvmrc
 /*env
 docs/_build
 *.ipynb

README.md

@@ -28,36 +28,53 @@ Running Votr
 
         sudo apt install virtualenv
 
-2.  Install node.js and npm. (Some Linux distributions bundle them together in
-    one package.) Check the version: npm 1 and 2 are too old. npm 3 and 4 are
-    probably OK. npm 5+ is ideal, but most Linux distributions don't have it yet
-    (including current Ubuntu and Debian). In that case, you can either:
-
-    *   Install npm 3 despite its age and hope for the best. E.g. on Ubuntu:
-        `sudo apt install nodejs-legacy npm`.
-    *   Use the unofficial up to date repositories from
-        https://nodejs.org/en/download/package-manager/, and install `nodejs`
-        (not `nodejs-legacy` and `npm`).
-
-3.  Create a virtualenv directory. A virtualenv is an isolated environment that
+2.  Create a virtualenv directory. A virtualenv is an isolated environment that
     contains Python libraries, so that you don't have to install them
     system-wide, and each project can use different versions without conflicts.
 
         virtualenv -p python3 venv
 
-4.  Activate the virtualenv. (Basically, this just adds `venv/bin` to your
+3.  Activate the virtualenv. (Basically, this just adds `venv/bin` to your
     current shell's `$PATH`. Instead, you could just use `venv/bin/python`
     instead of `python`, `venv/bin/pip` instead of `pip`, etc.)
 
         source venv/bin/activate
 
-5.  Install the latest version of `pip` (earlier versions don't support wheels),
+4.  Install the latest version of `pip` (earlier versions don't support wheels),
     and then use it to install Python dependencies.
 
         pip install -U pip
         pip install -r requirements.txt
 
-6.  Start Votr. Remember to activate the virtualenv first if you haven't done it
+5.  Gather/build your CSS files:
+
+        # copy pre-built CSS files to votrfront/static/
+        ./votrfront/buildcss.sh setup
+        # build the custom CSS
+        ./votrfront/buildcss.sh
+        # build the bootstrap custom base CSS - not needed in 99.99% cases
+        ./votrfront/buildcss.sh bootstrap
+
+6.  Install Node.js and npm/yarn. You can do so via
+    [NVM](https://github.com/creationix/nvm). Follow instructions on the NVM
+    website. After installing NVM, you may need to restart your
+    terminal / source .bashrc . Afterwards, run:
+
+        cd votrfront/js/
+        nvm use
+        npm i -g yarn
+        yarn
+        cd ../..
+
+7.  Start the Javascript bundler (you will need to have this open in another
+    terminal):
+
+        cd votrfront/js
+        yarn dev
+        # for production build, do
+        yarn build
+
+8.  Start Votr. Remember to activate the virtualenv first if you haven't done it
     yet in this terminal.
 
         ./console.py serve --debug
@@ -79,6 +96,7 @@ Some documentation is on the wiki: https://github.com/fmfi-svt/votr/wiki
 Some documentation is in docstrings in the source code and rendered with Sphinx:
 http://svt.fmph.uniba.sk/~tomi/votrdoc/
 
+
 Building documentation:
 
     pip install sphinx sphinx-rtd-theme

votrfront/buildcss.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+set -e
+
+if [ "${1:0:6}" == "--env=" ]; then
+  source "${1:6}/bin/activate"
+  shift
+fi
+
+cd "$(dirname "$0")"
+
+! [ -w "$HOME" ] && echo "HOME is not writable" && exit 1
+
+mkdir -p static
+
+if [ "$1" == "build" ] || [ "$1" == "" ]; then
+
+  sassc -s compressed css/src/main.scss css/dist/votr.css
+  cp css/dist/votr.css static/votr.css
+
+elif [ "$1" == "bootstrap" ]; then
+
+  if ! [ -d node_modules/bootstrap-sass ]; then
+    npm install bootstrap-sass@^3.3
+  fi
+  bs=node_modules/bootstrap-sass/assets
+
+  sed -i "
+    # Don't use pointer cursor on buttons.
+    # http://lists.w3.org/Archives/Public/public-css-testsuite/2010Jul/0024.html
+    s@cursor: pointer; // 3@@
+    # Don't inherit color and font on inputs and selects.
+    s@color: inherit; // 1@@
+    s@font: inherit; // 2@@
+    " $bs/stylesheets/bootstrap/_normalize.scss
+
+  compressed='-s compressed'
+  sassc $compressed -I $bs/stylesheets css/src/_votr-bootstrap.scss css/dist/bootstrap.custom.css
+  cp css/dist/bootstrap.custom.css static/bootstrap.custom.css
+
+elif [ "$1" == "setup" ]; then
+
+  cp css/dist/bootstrap.custom.css static/bootstrap.custom.css
+  cp css/dist/votr.css static/votr.css
+
+elif [ "$1" == "clean" ]; then
+
+  rm -rf node_modules static
+
+else
+  echo "usage: $0 [--env=path/to/venv] [build|clean]"
+  exit 1
+fi

votrfront/css/src/_mixins.scss

@@ -0,0 +1,40 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "mixins/hide-text";
+@import "mixins/opacity";
+@import "mixins/image";
+@import "mixins/labels";
+@import "mixins/reset-filter";
+@import "mixins/resize";
+@import "mixins/responsive-visibility";
+@import "mixins/size";
+@import "mixins/tab-focus";
+@import "mixins/reset-text";
+@import "mixins/text-emphasis";
+@import "mixins/text-overflow";
+@import "mixins/vendor-prefixes";
+
+// Components
+@import "mixins/alerts";
+@import "mixins/buttons";
+@import "mixins/panels";
+@import "mixins/pagination";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/progress-bar";
+@import "mixins/table-row";
+
+// Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/gradients";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/center-block";
+@import "mixins/nav-vertical-align";
+@import "mixins/grid-framework";
+@import "mixins/grid";

votrfront/css/src/_spinner.scss

@@ -0,0 +1 @@
+$spinner: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnPgogICAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogICAgPGc+PHJlY3QgaGVpZ2h0PSI4IiB3aWR0aD0iMi41IiBmaWxsPSIjMjMxRjIwIiB4PSIxNC43NSIvPjwvZz4KICAgIDxnPjxyZWN0IGhlaWdodD0iMi41IiB3aWR0aD0iOCIgZmlsbD0iIzQxNDA0MiIgdHJhbnNmb3JtPSJtYXRyaXgoMC41LDAuODY2LC0wLjg2NiwwLjUsOS44NTY0LC01Ljg1NjQpICIgeT0iNC4zNTgiIHg9IjYiLz48L2c+CiAgICA8Zz48cmVjdCBoZWlnaHQ9IjIuNSIgd2lkdGg9IjgiIGZpbGw9IiM1ODU5NUIiIHRyYW5zZm9ybT0ibWF0cml4KDAuODY2LDAuNSwtMC41LDAuODY2LDUuNzUxNywtMS40NjQ0KSAiIHk9IjguNzUiIHg9IjEuNjA5Ii8+PC9nPgogICAgPGc+PHJlY3QgaGVpZ2h0PSIyLjUiIHdpZHRoPSI4IiBmaWxsPSIjNkQ2RTcxIiB5PSIxNC43NSIvPjwvZz4KICAgIDxnPjxyZWN0IGhlaWdodD0iOCIgd2lkdGg9IjIuNSIgZmlsbD0iIzgwODI4NSIgdHJhbnNmb3JtPSJtYXRyaXgoMC40OTk4LDAuODY2MSwtMC44NjYxLDAuNDk5OCwyMS44NTk4LDYuMTQ1KSAiIHk9IjE4IiB4PSI0LjM1OSIvPjwvZz4KICAgIDxnPjxyZWN0IGhlaWdodD0iOCIgd2lkdGg9IjIuNSIgZmlsbD0iIzkzOTU5OCIgdHJhbnNmb3JtPSJtYXRyaXgoMC44NjYsMC41LC0wLjUsMC44NjYsMTQuNTM1OSwtMS40NjUxKSAiIHk9IjIyLjM5MiIgeD0iOC43NTIiLz48L2c+CiAgICA8Zz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSIyLjUiIGZpbGw9IiNBN0E5QUMiIHk9IjI0IiB4PSIxNC43NTIiLz48L2c+CiAgICA8Zz48cmVjdCBoZWlnaHQ9IjIuNSIgd2lkdGg9IjgiIGZpbGw9IiNCQ0JFQzAiIHRyYW5zZm9ybT0ibWF0cml4KDAuNTAwMSwwLjg2NiwtMC44NjYsMC41MDAxLDMzLjg1MjYsLTUuODYwMykgIiB5PSIyNS4xNDEiIHg9IjE4LjAwMyIvPjwvZz4KICAgIDxnPjxyZWN0IGhlaWdodD0iMi41IiB3aWR0aD0iOCIgZmlsbD0iI0QxRDNENCIgdHJhbnNmb3JtPSJtYXRyaXgoMC44NjYxLDAuNDk5OCwtMC40OTk4LDAuODY2MSwxNC41Mjg3LC0xMC4yNDc2KSAiIHk9IjIwLjc0NyIgeD0iMjIuMzk0Ii8+PC9nPgogICAgPGc+PHJlY3QgaGVpZ2h0PSIyLjUiIHdpZHRoPSI4IiBmaWxsPSIjRTZFN0U4IiB5PSIxNC43NDciIHg9IjI0LjAwMSIvPjwvZz4KICAgIDxnPjxyZWN0IGhlaWdodD0iOCIgd2lkdGg9IjIuNSIgZmlsbD0iI0U2RTdFOCIgdHJhbnNmb3JtPSJtYXRyaXgoMC41LDAuODY2LC0wLjg2NiwwLjUsMjEuODUzNiwtMTcuODU3NykgIiB5PSI1Ljk5NyIgeD0iMjUuMTQyIi8+PC9nPgogICAgPGc+PHJlY3QgaGVpZ2h0PSI4IiB3aWR0aD0iMi41IiBmaWxsPSIjRTZFN0U4IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjg2NjMsMC40OTk1LC0wLjQ5OTUsMC44NjYzLDUuNzQxNywtMTAuMjM5OSkgIiB5PSIxLjYwNiIgeD0iMjAuNzQ5Ii8+PC9nPgogICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCAxNiAxNiIgdG89IjM2MCAxNiAxNiIgYmVnaW49IjBzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvZz4KPC9zdmc+Cg==);