init

.eslintrc.json

@@ -0,0 +1,62 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "plugins": [
+    "svelte3"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.svelte"
+      ],
+      "processor": "svelte3/svelte3"
+    }
+  ],
+  "rules": {
+    "arrow-spacing": "error",
+    "block-scoped-var": "error",
+    "block-spacing": "error",
+    "brace-style": ["error", "stroustrup", {}],
+    "camelcase": "error",
+    "comma-dangle": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "comma-style": [1, "last"],
+    "consistent-this": [1, "_this"],
+    "curly": [1, "multi"],
+    "eol-last": 1,
+    "eqeqeq": 1,
+    "func-names": 1,
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "lines-around-comment": ["error", { "beforeBlockComment": true, "allowArrayStart": true }],
+    "max-len": [1, 240, 2], // 2 spaces per tab, max 80 chars per line
+    "new-cap": 1,
+    "newline-before-return": "error",
+    "no-array-constructor": 1,
+    "no-inner-declarations": [1, "both"],
+    "no-mixed-spaces-and-tabs": 1,
+    "no-multi-spaces": 2,
+    "no-new-object": 1,
+    "no-shadow-restricted-names": 1,
+    "object-curly-spacing": ["error", "always"],
+    "padded-blocks": ["error", { "blocks": "never", "switches": "always" }],
+    "prefer-const": "error",
+    "prefer-template": "error",
+    "one-var": 0,
+    "quote-props": ["error", "always"],
+    "quotes": [1, "single"],
+    "radix": 1,
+    "semi": [1, "always"],
+    "space-before-blocks": [1, "always"],
+    "space-infix-ops": 1,
+    "vars-on-top": 1,
+    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+    "spaced-comment": ["error", "always", { "markers": ["/"] }]
+  }
+
+}

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/svelte-jobs.iml" filepath="$PROJECT_DIR$/.idea/svelte-jobs.iml" />
+    </modules>
+  </component>
+</project>

.idea/svelte-jobs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

README.md

@@ -0,0 +1,106 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# Updates
+
+## 2020-04-17
+
+Added [svelte-preprocess](https://www.npmjs.com/package/svelte-preprocess) preprocessor with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.
+
+Added [rollup-plugin-node-builtins](https://www.npmjs.com/package/rollup-plugin-node-builtins)  Allows the node builtins to be required/imported. Doing so gives the proper shims to support modules that were designed for Browserify, some modules require rollup-plugin-node-globals.
+
+Added [rollup-plugin-node-globals](https://www.npmjs.com/package/rollup-plugin-node-globals) Plugin to insert node globals including so code that works with browserify should work even if it uses process or buffers.
+
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+
+## Deploying to the web
+
+### With [now](https://zeit.co/now)
+
+Install `now` if you haven't already:
+
+```bash
+npm install -g now
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+now deploy --name my-project
+```
+
+As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

copy.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+# rm -rf /home/martin/dev/menuserver/dist/*
+cp -r /home/martin/dev/svelte-jobs/public/* /home/martin/dev/jobscraper/live

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-svelte3": "^2.7.3",
+    "rollup": "^2.10.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^5.1.2",
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^3.7.1"
+  },
+  "dependencies": {
+    "autoprefixer": "^9.7.6",
+    "node-sass": "^4.14.1",
+    "redaxios": "^0.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "sirv-cli": "^0.4.4"
+  }
+}

public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>

rollup.config.js

@@ -0,0 +1,91 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import replace from 'rollup-plugin-replace';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import builtins from 'rollup-plugin-node-builtins';
+import globals from 'rollup-plugin-node-globals';
+
+const production = !process.env.ROLLUP_WATCH;
+
+const preprocess = sveltePreprocess({
+  'scss': {
+    'includePaths': ['src']
+  },
+  'postcss': {
+    'plugins': [require('autoprefixer')]
+  }
+});
+
+export default {
+  'input': 'src/main.js',
+  'output': {
+    'sourcemap': (!production),
+    'format': 'iife',
+    'name': 'app',
+    'file': 'public/build/bundle.js'
+  },
+  'plugins': [
+    globals(),
+    builtins(),
+    svelte({
+      // enable run-time checks when not in production
+      'dev': !production,
+      preprocess,
+      // we'll extract any component CSS out into
+      // a separate file - better for performance
+      'css': css => {
+        css.write('public/build/bundle.css');
+      }
+    }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      'browser': true,
+      'dedupe': ['svelte']
+    }),
+    commonjs(),
+    replace({
+      'exclude': 'node_modules/**',
+      '__ENV__': JSON.stringify(production ? 'production' : 'development')
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  'watch': {
+    'clearScreen': false
+  }
+};
+
+function serve() {
+  let started = false;
+
+  return {
+    writeBundle() {
+      if (!started) {
+        started = true;
+
+        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+          'stdio': ['ignore', 'inherit', 'inherit'],
+          'shell': true
+        });
+      }
+    }
+  };
+}

src/App.svelte

@@ -0,0 +1,34 @@
+<script>
+    import Menu from "./components/Menu.svelte";
+    import Lister from "./components/Lister.svelte";
+    import Detail from "./components/Detail.svelte";
+</script>
+
+<style lang="scss" global>
+    @import "./css/global.scss";
+
+    .view {
+        height:100vh;
+    }
+
+
+
+</style>
+
+
+<main>
+    <!--<Menu/>
+    <div class='dataPane splitContainerGrid'>
+        <Lister/>
+        <Detail/>
+    </div>-->
+    <div class="grid view">
+        <div class="col-2">
+            <Menu/>
+        </div>
+        <div class="col-10">
+            <Lister/>
+            <Detail/>
+        </div>
+    </div>
+</main>

src/components/Detail.svelte

@@ -0,0 +1,87 @@
+<script>
+    import {JobDetails, actions} from '../state/state';
+
+    let jobDetail = {};
+
+    let visible = false;
+
+    JobDetails.subscribe((v) => {
+        visible = !isEmpty(v);
+
+    })
+
+    function isEmpty(obj) {
+        for(const key in obj)
+            if(obj.hasOwnProperty(key)) return false;
+
+        return true;
+    }
+</script>
+
+<style>
+    .detail {
+        /*flex-grow:1;*/
+        width: 100%;
+        border-top: 2px solid #e1e1e1;
+
+        height: 50vh;
+        max-height: 50vh;
+        overflow-y: scroll;
+
+    }
+    .detailHead {
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin-right: auto;
+        margin-left: auto;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .row {
+        margin: 1% 0;
+        overflow: auto;
+        display:flex;
+    }
+</style>
+
+
+{#if visible}
+<div class="detail">
+    <div class="detailHead bg-light">
+        <div class="row">
+            <div class="col-12 text-primary lead">
+                {$JobDetails.title}
+            </div>
+
+        </div>
+        <div class="row">
+            <div class="col-6">
+                Company: <span class="text-primary">{$JobDetails.company}</span>
+            </div>
+            <div class="col-6">
+                Location: <span class="text-primary">{$JobDetails.location}</span>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-1-3rd">
+                Salary: <span class="text-primary">{$JobDetails.salary}</span>
+            </div>
+            <div class="col-1-3rd">
+                Scraped: <span class="text-primary">{$JobDetails.date}</span>
+            </div>
+            <div class="col-1-3rd">
+                Site: <a href={$JobDetails.url} class="text-capitalize" target="_blank">{$JobDetails.site}</a>
+            </div>
+
+        </div>
+
+
+    </div>
+    <blockquote>
+        {$JobDetails.summary}
+    </blockquote>
+</div>
+
+{/if}

src/components/Lister.svelte

@@ -0,0 +1,54 @@
+<script>
+
+    import {JobList, actions} from '../state/state';
+
+    const handleClick = id => {
+        actions.loadJobDetail(id);
+    };
+</script>
+
+<style>
+    .lister {
+        height: 50vh;
+        max-height: 50vh;
+        overflow-y: scroll;
+    }
+
+    .hide {
+        display: none;
+    }
+</style>
+
+
+<div class="lister">
+    <table class="">
+        <thead>
+        <tr>
+            <th class="col-5">
+                Title
+            </th>
+            <th class="col-2">
+                Site
+            </th>
+            <th class="col-3">
+                Company
+            </th>
+            <th class="col-2">
+                Date
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each $JobList as item, _id}
+            <tr on:click={handleClick(item._id)} class="dataRow">
+                <td>{item.title}</td>
+                <td>{item.site}</td>
+                <td>{item.company}</td>
+                <td>{item.date}</td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+</div>
+
+

src/components/Menu.svelte

@@ -0,0 +1,23 @@
+<script>
+
+    function handleClick(){
+
+    }
+
+</script>
+
+<style>
+    menu {
+
+        border-right: 2px solid #e1e1e1;
+        background-color: #f4f4f4;
+        height:100vh;
+    }
+</style>
+
+<menu>
+    <h2>Jobs</h2>
+    <hr/>
+
+    <button>Indeed</button>
+</menu>

src/css/global.scss

@@ -0,0 +1,968 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+
+/* Global Styles */
+
+
+
+:root {
+  --primary-color: #607D8B;
+  --dark-color: #294c5d;
+  --light-color: #CFD8DC;
+  --danger-color: #dc3545;
+  --success-color: #28a745;
+  --highlight-color: #dcc894;
+  --highlight-color2: #dca394;
+
+  --navbar-height: 4rem;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  background-color: #fff;
+  color: #333;
+  padding:0;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: #666;
+}
+
+a.active{
+  color: var(--highlight-color);
+}
+
+ul {
+  list-style: none;
+}
+
+img {
+  width: 100%;
+}
+
+.dataRow {
+  cursor: pointer;
+}
+
+/* Utilities */
+.container {
+  max-width: 1100px;
+  margin: auto;
+  overflow: hidden;
+  padding: 0 2rem;
+}
+
+/* Text Styles*/
+.x-large {
+  font-size: 4rem;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+.large {
+  font-size: 3rem;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+.lead {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-primary {
+  color: var(--primary-color);
+}
+
+.text-dark {
+  color: var(--dark-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-danger {
+  color: var(--danger-color);
+}
+
+.text-highlight {
+  color: var(--highlight-color);
+}
+
+.text-highlight2 {
+  color: var(--highlight-color2);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-title, h3 {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.text-subhead, h4 {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.text-body2, h5 {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.text-body1 {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.text-caption {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* Center All */
+.all-center {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+/* Cards */
+.card {
+  padding: 1rem;
+  border: #ccc 1px dotted;
+  margin: 0.7rem 0;
+}
+
+/* List */
+.list {
+  margin: 0.5rem 0;
+}
+
+.list li {
+  padding-bottom: 0.3rem;
+}
+
+/* Padding */
+.p {
+  padding: 0.5rem;
+}
+.p-1 {
+  padding: 1rem;
+}
+.p-2 {
+  padding: 2rem;
+}
+.p-3 {
+  padding: 3rem;
+}
+.py {
+  padding: 0.5rem 0;
+}
+.py-1 {
+  padding: 1rem 0;
+}
+.py-2 {
+  padding: 2rem 0;
+}
+.py-3 {
+  padding: 3rem 0;
+}
+
+/* Margin */
+.m {
+  margin: 0.5rem;
+}
+.m-1 {
+  margin: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: .2rem !important;
+}
+
+.ml-1 {
+  margin-left: .2rem !important;
+}
+
+.mr-1 {
+  margin-right: .2rem !important;
+}
+
+.mt-1 {
+  margin-top: .2rem !important;
+}
+
+.mx-1 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+
+.m-2 {
+  margin: 2rem;
+}
+
+.mb-2 {
+  margin-bottom: .4rem !important;
+}
+
+.ml-2 {
+  margin-left: .4rem !important;
+}
+
+.mr-2 {
+  margin-right: .4rem !important;
+}
+
+.mt-2 {
+  margin-top: .4rem !important;
+}
+
+.mx-2 {
+  margin-left: 2rem !important;
+  margin-right: 2rem !important;
+}
+
+.m-3 {
+  margin: 3rem;
+}
+.my {
+  margin: 0.5rem 0;
+}
+.my-1 {
+  margin: 1rem 0;
+}
+.my-2 {
+  margin: 2rem 0;
+}
+.my-3 {
+  margin: 3rem 0;
+}
+
+.grid {
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  /*margin-left: -.4rem;
+  margin-right: -.4rem;*/
+}
+
+/* Grid */
+.grid-1 {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-gap: 1rem;
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 1rem;
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1rem;
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1rem;
+}
+
+.row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+.row:before, .row:after {
+  content: " ";
+  display: table;
+}
+
+.row:after {
+  clear: both;
+}
+
+/*.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-3rd, .col-2-3rd, .col-half {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}*/
+
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .col-1 {
+    width: 8.33333%;
+  }
+
+.col-2 {
+  width: 16.66667%;
+}
+
+.col-3 {
+  width: 25%;
+}
+
+.col-4 {
+  width: 33.33333%;
+}
+
+.col-5 {
+  width: 41.66667%;
+}
+
+.col-6 {
+  width: 50%;
+}
+
+.col-7 {
+  width: 58.33333%;
+}
+
+.col-8 {
+  width: 66.66667%;
+}
+
+.col-9 {
+  width: 75%;
+}
+
+.col-10 {
+  width: 83.33333%;
+}
+
+.col-11 {
+  width: 91.66667%;
+}
+
+.col-12 {
+  width: 100%;
+  margin-left: 0;
+}
+
+.col-1-3rd {
+  width: 32.666667%;
+}
+
+.col-2-3rd {
+  width: 65.3333333333%;
+}
+
+.col-half {
+  width: 48%;
+}
+
+/* Offsets */
+.offset-1-col {
+  margin-left: 8.66666666667%;
+}
+
+.offset-2-col {
+  margin-left: 17.3333333333%;
+}
+
+.offset-3-col {
+  margin-left: 26%;
+}
+
+.offset-4-col {
+  margin-left: 34.6666666667%;
+}
+
+.offset-5-col {
+  margin-left: 43.3333333333%;
+}
+
+.offset-6-col {
+  margin-left: 52%;
+}
+
+.offset-7-col {
+  margin-left: 60.6666666667%;
+}
+
+.offset-8-col {
+  margin-left: 69.3333333333%;
+}
+
+.offset-9-col {
+  margin-left: 78.0%;
+}
+
+.offset-10-col {
+  margin-left: 86.6666666667%;
+}
+
+.offset-11-col {
+  margin-left: 95.3333333333%;
+}
+
+.offset-1-3rd-col {
+  margin-left: 34.6666666667%;
+}
+
+.offset-2-3rd-col {
+  margin-left: 69.3333333333%;
+}
+
+.offset-half-col {
+  margin-left: 52%;
+}
+
+
+
+.btn {
+  display: inline-block;
+  background: var(--light-color);
+  color: #333;
+  padding: 0.4rem 1.3rem;
+  font-size: 1rem;
+  border: none;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  transition: opacity 0.2s ease-in;
+  outline: none;
+}
+
+.btn-link {
+  background: none;
+  padding: 0;
+  margin: 0;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn-sm {
+  font-size: 0.8rem;
+  padding: 0.3rem 1rem;
+  margin-right: 0.2rem;
+}
+
+.badge {
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 0.1rem 0.4rem;
+  text-align: center;
+  margin: 0.3rem;
+  background: var(--light-color);
+  color: #333;
+  border-radius: 3px;
+}
+
+.alert {
+  padding: 0.7rem;
+  margin: 1rem 0;
+  opacity: 0.9;
+  background: var(--light-color);
+  color: #333;
+}
+
+.btn-primary,
+.bg-primary,
+.badge-primary,
+.alert-primary {
+  background: var(--primary-color);
+  color: #fff;
+}
+
+
+.btn-light,
+.bg-light,
+.badge-light,
+.alert-light {
+  background: var(--light-color);
+  color: #333;
+}
+
+.btn-dark,
+.bg-dark,
+.badge-dark,
+.alert-dark {
+  background: var(--dark-color);
+  color: #fff;
+}
+
+.btn-danger,
+.bg-danger,
+.badge-danger,
+.alert-danger {
+  background: var(--danger-color);
+  color: #fff;
+}
+
+.btn-success,
+.bg-success,
+.badge-success,
+.alert-success {
+  background: var(--success-color);
+  color: #fff;
+}
+
+.btn-white,
+.bg-white,
+.badge-white,
+.alert-white {
+  background: #fff;
+  color: #333;
+  border: #ccc solid 1px;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.60;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+
+.btn:enabled:hover {
+  opacity: 0.8;
+}
+
+.bg-light,
+.badge-light {
+  border: #ccc solid 1px;
+}
+
+.round-img {
+  border-radius: 50%;
+}
+
+/* Forms */
+input {
+  margin: .2rem 0;
+}
+
+.form-text {
+  display: block;
+  margin-top: 0.3rem;
+  color: #888;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='password'],
+input[type='date'],
+select,
+textarea {
+  display: block;
+  width: 100%;
+  padding: 0.1rem;
+  /*font-size: 1.2rem;*/
+  border: 1px solid #ccc;
+}
+
+input[type='submit'],
+button {
+  font: inherit;
+}
+
+label,
+legend {
+  display: block;
+  margin-bottom: .1rem;
+  font-weight: 600; }
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal;
+background-color: #dcc894;
+}
+
+
+table th,
+table td {
+  padding: 1rem;
+  text-align: left;
+}
+
+table th {
+  background: var(--light-color);
+}
+
+/* Navbar */
+.navbar {
+  position:fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.7rem 0rem;
+  z-index: 2;
+  width: 100%;
+  opacity: 0.9;
+  margin-bottom: 1rem;
+  min-height: var(--navbar-height);
+}
+
+
+.navbar ul {
+  display: flex;
+}
+
+.navbar a {
+  color: #fff;
+  padding: 0.45rem;
+  margin: 0 0.25rem;
+}
+
+.navbar a:hover {
+  color: var(--light-color);
+}
+
+.navbar .welcome span {
+  margin-right: 0.6rem;
+}
+
+.navbar .navbar-section {
+  align-items: center;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex: 1 0 0;
+  flex: 1 0 0;
+  -ms-flex-align: center;
+}
+
+.navbar .navbar-section:not(:first-child):last-child {
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.navbar .navbar-brand {
+  font-size: 125%;
+  font-weight: bold;
+}
+
+
+/* Mobile Styles */
+@media (max-width: 700px) {
+  .hide-sm {
+    display: none;
+  }
+
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  /* Text Styles */
+  .x-large {
+    font-size: 3rem;
+  }
+
+  .large {
+    font-size: 2rem;
+  }
+
+  .lead {
+    font-size: 1rem;
+  }
+
+  /* Navbar */
+  .navbar {
+    display: flex;
+    text-align: center;
+  }
+
+  .navbar ul {
+    text-align: center;
+    justify-content: center;
+  }
+}
+
+
+/*:root {
+  --primary-color: #64B5F6;
+  --dark-color: #333333;
+  --light-color: #f4f4f4;
+  --danger-color: #dc3545;
+  --success-color: #28a745;
+  --medium-color: #999999;
+}*/
+
+.table-responsive {
+
+  display: block;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.cardV2 {
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,.14), 0 3px 4px 0 rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
+  /*display: flex;
+  flex-direction: column;*/
+  min-width: 0;
+  /*position: relative;
+  word-wrap: break-word;*/
+}
+
+table {
+  max-width: 100%;
+  width: 100%;
+  border: 0;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+}
+
+tr {
+  border-top: 1px solid #ccc;
+}
+
+tbody tr:nth-of-type(odd){
+  background-color: rgba(0,0,0,0.04);
+}
+
+tbody td {
+  border-top: 1px solid #e1e1e1;
+}
+
+hr {
+  margin-top: 2.2rem;
+  margin-bottom: 2rem;
+  border-width: 0;
+  border-top: 1px solid var(--dark-color); }
+
+
+
+.modalWindow {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,0.2);
+  z-index: 99999;
+  opacity:0;
+  pointer-events: none;
+  text-align:center;
+}
+.modalWindow:target {
+  opacity:1;
+  pointer-events: auto;
+}
+.modalWindow > div {
+  width: 500px;
+  position: relative;
+  margin: 10% auto;
+  background: #fff;
+}
+
+header + div.container {
+  position: relative;
+  top:var(--navbar-height);
+  min-height: calc(100vh - var(--navbar-height));
+}
+
+
+/**
+ * MUI Dropdown module
+ */
+.mui-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+[data-mui-toggle="dropdown"] {
+  outline: 0;
+}
+
+.mui-dropdown__menu {
+  position: absolute;
+  display: none;
+  min-width: 160px;
+  padding: 5px 3px;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #FFF;
+  border-radius: 2px;
+  z-index: 1;
+  background-clip: padding-box;
+  border: 1px solid var(--light-color);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+  0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .mui-dropdown__menu {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    border-left: 1px solid rgba(0, 0, 0, 0.12);
+  }
+}
+
+@supports (-ms-ime-align: auto) {
+  .mui-dropdown__menu {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    border-left: 1px solid rgba(0, 0, 0, 0.12);
+  }
+}
+
+.mui-dropdown__menu.mui--is-open {
+  display: block;
+}
+
+.mui-dropdown__menu > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.429;
+  color: rgba(0, 0, 0, 0.87);
+  text-decoration: none;
+  white-space: nowrap;
+
+}
+
+.mui-dropdown__menu > li > a:hover, .mui-dropdown__menu > li > a:focus {
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #EEEEEE;
+}
+
+.mui-dropdown__menu > .mui--is-disabled > a, .mui-dropdown__menu > .mui--is-disabled > a:hover, .mui-dropdown__menu > .mui--is-disabled > a:focus {
+  color: #EEEEEE;
+}
+
+.mui-dropdown__menu > .mui--is-disabled > a:hover, .mui-dropdown__menu > .mui--is-disabled > a:focus {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none;
+  cursor: not-allowed;
+}
+
+.mui-dropdown__menu--right {
+  left: auto;
+  right: 0;
+}
+
+.mui-dropdown--up > .mui-dropdown__menu {
+  margin: 0 0 2px;
+}
+
+.mui-dropdown--right > .mui-dropdown__menu {
+  margin: 0 0 0 2px;
+}
+
+.mui-dropdown--left > .mui-dropdown__menu {
+  margin: 0 2px 0 0;
+}
+
+
+// Mouse pointers
+
+.alias {cursor: alias;}
+.all-scroll {cursor: all-scroll;}
+.auto {cursor: auto;}
+.cell {cursor: cell;}
+.context-menu {cursor: context-menu;}
+.col-resize {cursor: col-resize;}
+.copy {cursor: copy;}
+.crosshair {cursor: crosshair;}
+.default {cursor: default;}
+.e-resize {cursor: e-resize;}
+.ew-resize {cursor: ew-resize;}
+.grab {cursor: grab;}
+.grabbing {cursor: grabbing;}
+.help {cursor: help;}
+.move {cursor: move;}
+.n-resize {cursor: n-resize;}
+.ne-resize {cursor: ne-resize;}
+.nesw-resize {cursor: nesw-resize;}
+.ns-resize {cursor: ns-resize;}
+.nw-resize {cursor: nw-resize;}
+.nwse-resize {cursor: nwse-resize;}
+.no-drop {cursor: no-drop;}
+.none {cursor: none;}
+.not-allowed {cursor: not-allowed;}
+.pointer {cursor: pointer;}
+.progress {cursor: progress;}
+.row-resize {cursor: row-resize;}
+.s-resize {cursor: s-resize;}
+.se-resize {cursor: se-resize;}
+.sw-resize {cursor: sw-resize;}
+.text {cursor: text;}
+.url {cursor: url(myBall.cur),auto;}
+.w-resize {cursor: w-resize;}
+.wait {cursor: wait;}
+.zoom-in {cursor: zoom-in;}
+.zoom-out {cursor: zoom-out;}
+
+
+/*
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+*/

src/main.js

@@ -0,0 +1,11 @@
+import App from './App.svelte';
+
+import { actions } from './state/state';
+
+const app = new App({
+  'target': document.body
+});
+
+actions.getJobList();
+
+export default app;

src/state/state.js

@@ -0,0 +1,49 @@
+/**
+ * Created by WebStorm.
+ * User: martin
+ * Date: 18/05/2020
+ * Time: 14:00
+
+ */
+import { writable, get } from 'svelte/store';
+
+import axios from 'redaxios';
+
+// const baseUrl = (__ENV__ === 'production') ? (`${location.protocol }//${ location.hostname}`) : 'http://localhost:3000';
+const baseUrl = 'http://localhost:3000';
+const urls = {
+  'jobs': baseUrl.concat('/jobs')
+};
+
+const JobList = writable([]);
+const JobDetails = writable({});
+
+const actions = {
+  getJobList() {
+    axios.get(urls.jobs).then((d) => {
+      // console.log('>> retrieved', d);
+      const data = JSON.parse(d.data);
+      
+      JobList.set(data);
+    }).catch((err) => {
+      console.error('getJobList', err);
+    });
+  },
+  
+  loadJobDetail(id) {
+    console.log(`loadJobDetail: ${id}`);
+    if (id) {
+      const u = `${urls.jobs}/${id}`;
+      axios.get(u).then((d) => {
+        const data = JSON.parse(d.data);
+
+        JobDetails.set(data);
+      }).catch((err) => {
+        console.error('loadJobDetail', err);
+      });
+    }
+  }
+
+};
+
+export { JobList, JobDetails, actions };