Updates from old stolas image

.idea/dbnavigator.xml

@@ -2,7 +2,7 @@
 <project version="4">
   <component name="DBNavigator.Project.DataEditorManager">
     <record-view-column-sorting-type value="BY_INDEX" />
-    <value-preview-text-wrapping value="true" />
+    <value-preview-text-wrapping value="false" />
     <value-preview-pinned value="false" />
   </component>
   <component name="DBNavigator.Project.DataExportManager">
@@ -31,6 +31,9 @@
   <component name="DBNavigator.Project.EditorStateManager">
     <last-used-providers />
   </component>
+  <component name="DBNavigator.Project.ExecutionManager">
+    <retain-sticky-names value="false" />
+  </component>
   <component name="DBNavigator.Project.MethodExecutionManager">
     <method-browser />
     <execution-history>

copy.sh

@@ -1,4 +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/server/dist
+cp -r /home/martin/dev/Svelte/svelte-jobs/public/* /home/martin/dev/Server/jobscraper/server/dist

package-lock.json

@@ -1191,6 +1191,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fecha": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.0.tgz",
+      "integrity": "sha512-aN3pcx/DSmtyoovUudctc8+6Hl4T+hI9GBBHLjA76jdZl7+b1sgh5g4k+u/GL3dTy1/pnYzKp69FpJ0OicE3Wg=="
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",

package.json

@@ -1,33 +1,34 @@
 {
   "name": "svelte-app",
-  "version": "1.0.0",
+  "version": "1.0.6",
   "scripts": {
-    "build": "rollup -c",
+    "build": "vik patch && rollup -c",
     "dev": "rollup -c -w",
     "start": "sirv public"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "eslint": "^6.8.0",
     "eslint-plugin-svelte3": "^2.7.3",
-    "rollup": "^2.10.0",
-    "rollup-plugin-livereload": "^1.0.0",
+    "rollup": "^2.41.2",
+    "rollup-plugin-livereload": "^1.3.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"
+    "rollup-plugin-svelte": "^5.2.3",
+    "rollup-plugin-terser": "^5.3.1",
+    "svelte": "^3.35.0",
+    "svelte-preprocess": "^3.9.12"
   },
   "dependencies": {
-    "@rollup/plugin-json": "^4.0.3",
-    "autoprefixer": "^9.7.6",
+    "@rollup/plugin-json": "^4.1.0",
+    "autoprefixer": "^9.8.6",
     "cron": "^1.8.2",
-    "ms": "^2.1.2",
+    "fecha": "^4.2.0",
+    "ms": "^2.1.3",
     "node-sass": "^4.14.1",
     "redaxios": "^0.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "sirv-cli": "^0.4.4"
+    "sirv-cli": "^0.4.6"
   }
-}
+}

src/App.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <style lang="scss" global>
-    @import "./css/global.scss";
+    @import "./css/bronze.scss";
 
     .view {
         height:100vh;
@@ -17,7 +17,7 @@
 </style>
 
 <Header/>
-<div class="container fullWidth">
+<div class="container fullWidth noscroll">
     <div class="col-12">
         <Lister/>
         <Detail/>

src/components/Detail.svelte

@@ -1,53 +1,51 @@
 <script>
-    import {JobDetails, actions} from '../state/state';
+  import {JobDetails, actions} from '../state/state';
 
-    let jobDetail = {};
+  let jobDetail = {};
 
-    let visible = false;
-    let applied = false;
-    let jobtype = 0;
+  let visible = false;
+  let applied = false;
+  let jobtype = 0;
 
-    $: {
-        if (!isEmpty($JobDetails)) {
-            applied = typeof ($JobDetails.data.applied) === "number" && $JobDetails.data.applied === 1;
-            jobtype = $JobDetails.data.jobtype;
-        }
+  $: {
+    if (!isEmpty($JobDetails)) {
+      applied = typeof ($JobDetails.data.applied) === "number" && $JobDetails.data.applied !== 0;
+      jobtype = $JobDetails.data.jobtype;
     }
+  }
 
-    JobDetails.subscribe((v) => {
-        visible = !isEmpty(v);
+  JobDetails.subscribe((v) => {
+    visible = !isEmpty(v);
 
-        console.log(v);
+  })
 
-    })
+  function isEmpty(obj) {
+    for (const key in obj)
+      if (obj.hasOwnProperty(key)) return false;
 
-    function isEmpty(obj) {
-        for (const key in obj)
-            if (obj.hasOwnProperty(key)) return false;
+    return true;
+  }
 
-        return true;
-    }
+  function handleClick() {
+    actions.appliedJob($JobDetails._id);
+  }
 
-    function handleClick() {
-        actions.appliedJob($JobDetails._id);
-    }
+  function kill(w) {
+    console.log('>>kill',w);
+  }
 
-    function kill(w) {
-        console.log('>>kill',w);
-    }
+  function upvote() {
 
-    function upvote() {
+    console.log('Upvote', $JobDetails._id);
 
-      console.log('Upvote', $JobDetails._id);
+    actions.upVote($JobDetails._id);
+  }
 
-      actions.upVote($JobDetails._id);
-    }
+  function downvote() {
+    console.log('Downvote', $JobDetails._id);
 
-    function downvote() {
-        console.log('Downvote', $JobDetails._id);
-
-        actions.downVote($JobDetails._id);
-    }
+    actions.downVote($JobDetails._id);
+  }
 
 
 </script>
@@ -58,8 +56,8 @@
         width: 100%;
         border-top: 2px solid #e1e1e1;
 
-        height: 50vh;
-        max-height: 50vh;
+        height: 49.5vh;
+        max-height: 49.5vh;
         overflow-y: scroll;
 
     }
@@ -111,7 +109,7 @@
                 </div>
                 <div class="col-1-3rd">
                     Applied:
-                    {#if !$JobDetails.a}
+                    {#if !applied}
                         <button on:click={handleClick} class="btn btn-sm btn-primary">Applied</button>
                     {:else}
                         Applied!
@@ -123,7 +121,7 @@
 
             <div class="row">
                 <div class="col-1-3rd">
-                    Salary: <span class="text-primary">{$JobDetails.salary}</span>
+                    Salary: <span class="text-primary">{@html $JobDetails.salary}</span>
                 </div>
                 <div class="col-1-3rd">
                     Scraped: <span class="text-primary">{$JobDetails.date}</span>
@@ -135,7 +133,7 @@
             </div>
 
             <div class="row">
-                <div class="col-10">
+                <div class="col-12">
                     {#each $JobDetails.data.autoclass.words as word, _wid}
                         {#if $JobDetails.data.autoclass.good.indexOf(word) !== -1}
                             <span class="badge badge-success">{word}</span>
@@ -147,18 +145,18 @@
                     {/each}
 
                 </div>
-                <div class="col-1">
+                <!--<div class="col-1">
                     <button on:click={upvote} class="btn btn-sm btn-success">👍</button>
                 </div>
                 <div class="col-1">
                     <button on:click={downvote} class="btn btn-sm btn-danger">👎</button>
-                </div>
+                </div>-->
 
             </div>
 
 
         </div>
-        <blockquote>
+        <blockquote class="container noscroll">
             {@html $JobDetails.summary}
         </blockquote>
     </div>

src/components/Lister.svelte

@@ -1,39 +1,59 @@
 <script>
 
-    import {JobList, actions} from '../state/state';
+  import {JobList, actions} from '../state/state';
+  import { format } from 'fecha';
 
-    let prevRow;
+  let prevRow;
 
-    const handleClick = id => {
-        actions.loadJobDetail(id);
-    };
+  const handleClick = id => {
+    actions.loadJobDetail(id);
+  };
 
-    function clickEvent(event) {
-        const parent = event.target.parentElement;
-        const id = parent.dataset.id;
-        actions.loadJobDetail(id);
-        actions.touchJob(id);
-    }
+  function clickEvent(event) {
+    const parent = event.target.parentElement;
+    const id = parent.dataset.id;
+    actions.loadJobDetail(id);
+    actions.touchJob(id);
+  }
 
-    function ellipses(instr) {
-        return (instr.length <= 40) ? instr : `${instr.slice(0, 40)}…`
+  function ellipses(instr, maxChars = 40) {
+    return (instr.length <= maxChars) ? instr : `${instr.slice(0, maxChars)}…`
 
-    }
+  }
 
-    function haveRead(inval) {
-      return (inval.read !== 0) ? 'read' : '';
-    }
+  function ellipsisV2( str, n = 40, useWordBoundary = true ){
+    if (str.length <= n) { return str; }
+    const subString = str.substr(0, n-1); // the original check
+    return (useWordBoundary
+      ? subString.substr(0, subString.lastIndexOf(" "))
+      : subString) + "…";
+  }
 
-    function haveApplied(inval) {
-        return (inval.applied !== 0) ? 'applied' : '';
-    }
+  function haveRead(inval) {
+    return (inval.read !== 0) ? 'read' : '';
+  }
 
+  function haveApplied(inval) {
+    return (inval.applied !== 0) ? 'applied' : '';
+  }
+
+  function timeStamptoLocaleDate(inval) {
+    return new Date(inval).toLocaleString();
+  }
+
+  function timeOrDate(v) {
+    const now = Date.now();
+    const baseTime = (~~(now / 86400000)) * 86400000;
+
+    return (v > baseTime) ? format(new Date(v), 'shortTime') : format(new Date(v), 'isoDate');
+
+  }
 </script>
 
 <style>
     .lister {
-        height: 50vh;
-        max-height: 50vh;
+        height: 45vh;
+        max-height: 45vh;
         overflow-y: scroll;
     }
 
@@ -114,8 +134,8 @@
                     </div>-->
                 </td>
                 <td>{item.site}</td>
-                <td>{ellipses(item.company)}</td>
-                <td>{item.date}</td>
+                <td title={item.company}>{ellipsisV2(item.company,25)}</td>
+                <td title={timeStamptoLocaleDate(item.timestamp)}>{timeOrDate(item.timestamp)}</td>
             </tr>
         {/each}
         </tbody>

src/css/bronze.scss

@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+@import './nord.scss';
+
+// https://www.schemecolor.com/put-it-in-writing.php
+$bronze0: #30447D;
+$bronze1: #EAE3C7;
+$bronze2: #C8A16B;
+$bronze3: #A87F49;
+$bronze4: #76404C;
+
+$nord11: #bf616a;
+$nord14: #a3be8c;
+
+
+$navbar-height: 56px;
+$navbar-height-small: 36px;
+$admin-footer-height: 70px;
+$admin-nav-width: 250px;
+
+$primary-color: $nord10;
+$dark-color: $nord2;
+$light-color: $nord4;
+$danger-color: $nord11;
+$success-color: $nord14;
+
+$highlight-color: $bronze4;
+$highlight-color2: $nord13;
+
+@import './bronze/base';
+
+@import './bronze/padding';
+@import './bronze/grid';
+@import './bronze/text';
+@import './bronze/button';
+@import './bronze/table';
+@import './bronze/navbar';
+@import './bronze/margin';
+@import './bronze/cards';
+
+@import './bronze/_small';
+//@import './bronze/_xlarge';
+
+
+

src/css/bronze/_small.scss

@@ -0,0 +1,29 @@
+/* Larger than mobile */
+@media (max-width: 480px) {
+  .container{
+    max-width: 98vw;
+    padding: 0 0;
+    overflow-y: scroll;
+  }
+}
+
+@media (max-height: 480px) {
+  .navbar {
+    min-height: $navbar-height-small;
+  }
+
+  header + div.container {
+
+    position: relative;
+    top:$navbar-height-small;
+    max-height: calc(100vh - #{$navbar-height-small});
+
+  }
+
+  .navbar .navbar-brand {
+    font-size: 125%;
+    font-weight: bold;
+  }
+
+}
+

src/css/bronze/_xlarge.scss

@@ -0,0 +1,7 @@
+@media (min-height: 900px) {
+  body{
+    font-size: x-large;
+  }
+
+}
+

src/css/bronze/base.scss

@@ -0,0 +1,65 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100%;
+  overflow-x: hidden;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #666;
+}
+
+a.active{
+  color: $highlight-color;
+}
+
+ul {
+  list-style: none;
+}
+
+img {
+  width: 100%;
+}
+
+
+.container {
+  max-width: 1100px;
+  margin: auto;
+  overflow-y: scroll;
+  padding: 0 2rem;
+}
+
+.fullWidth {
+  max-width: 100vw;
+  padding: 0 0;
+}
+
+.noscroll {
+  overflow: hidden;
+}
+
+
+hr {
+  margin-top: 2.2rem;
+  margin-bottom: 2rem;
+  border-width: 0;
+  border-top: 1px solid $dark-color; }
+
+
+.flex {
+  display: flex;
+}

src/css/bronze/button.scss

@@ -0,0 +1,140 @@
+.btn {
+  display: inline-block;
+  background: $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;
+
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.60;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+
+  &:enabled:hover {
+    opacity: 0.8;
+  }
+
+
+  &--slim {
+    @extend .btn;
+    padding: 0.4rem;
+  }
+}
+
+.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;
+
+  &--slim {
+    @extend .btn-sm;
+    padding: 0.3rem;
+  }
+}
+
+.badge {
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 0.1rem 0.4rem;
+  text-align: center;
+  margin: 0.3rem;
+  background: $light-color;
+  color: #333;
+  border-radius: 3px;
+}
+
+.alert {
+  padding: 0.7rem;
+  margin: 1rem 0;
+  opacity: 0.9;
+  background: $light-color;
+  color: #333;
+}
+
+.btn-primary,
+.bg-primary,
+.badge-primary,
+.alert-primary {
+  background: $primary-color;
+  color: #fff;
+}
+
+
+.btn-light,
+.bg-light,
+.badge-light,
+.alert-light {
+  background: $light-color;
+  color: #333;
+}
+
+.btn-dark,
+.bg-dark,
+.badge-dark,
+.alert-dark {
+  background: $dark-color;
+  color: #fff;
+}
+
+.btn-danger,
+.bg-danger,
+.badge-danger,
+.alert-danger {
+  background: $danger-color;
+  color: #fff;
+}
+
+.btn-success,
+.bg-success,
+.badge-success,
+.alert-success {
+  background: $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;
+}

src/css/bronze/cards.scss

@@ -0,0 +1,39 @@
+/* Cards */
+.card {
+  padding: 1rem;
+  border: #ccc 1px dotted;
+  margin: 0.7rem 0;
+
+  &--slim {
+    @extend .card;
+    padding: 5px;
+  }
+}
+
+.cardTitle {
+  border-bottom-color: #eee;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  margin-bottom: 15px
+}
+
+.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;*/
+}
+
+.seemore {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cardLink {
+  color: #2196F3;
+  margin-top: 10px;
+}

src/css/bronze/dropdown.scss

@@ -0,0 +1,126 @@
+$mui-use-rem:         false !default;
+@function mui-rem($px) {
+  $x: $px;
+
+  @if $mui-use-rem == true {
+    $x: ($px / 16px) * 1rem;
+    $x: round(1000 * $x) / 1000;
+  }
+
+  @return $x;
+}
+
+/**
+ * MUI Dropdown module
+ */
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+.mui-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+// Toggle element
+[data-mui-toggle="dropdown"] {
+  outline: 0;
+}
+
+
+
+
+// ============================================================================
+// MENU ELEMENT
+// ============================================================================
+.mui-dropdown__menu {
+ // @extend .mui--z1;
+  box-shadow: 0 1px 3px rgba(21,21,21, 0.12),
+  0 1px 2px rgba(21,21,21, 0.24);
+
+  // IE10+ bugfix
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    border-top: 1px solid rgba(21,21,21, 0.12);
+    border-left: 1px solid rgba(21,21,21, 0.12);
+  }
+
+  // Edge
+  @supports (-ms-ime-align:auto) {
+    border-top: 1px solid rgba(21,21,21, 0.12);
+    border-left: 1px solid rgba(21,21,21, 0.12);
+  }
+
+  position: absolute;
+  display: none;
+  min-width: mui-rem(160px);
+  padding: mui-rem(5px) 0;
+  margin: mui-rem(2px) 0 0;  // override default ul
+  list-style: none;
+  font-size: $mui-base-font-size;
+  text-align: left;
+  background-color: $mui-dropdown-bg-color;
+  border-radius: $mui-dropdown-border-radius;
+  z-index: 100;
+  background-clip: padding-box;
+
+  // open state
+  &.mui--is-open {
+    display: block;
+  }
+
+  // links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: mui-rem(3px) mui-rem(20px);
+    clear: both;
+    font-weight: normal;
+    line-height: $mui-base-line-height;
+    color: $mui-dropdown-link-font-color;
+    text-decoration: none;
+    white-space: nowrap;
+
+    // hover & focus state
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $mui-dropdown-link-font-color-hover;
+      background-color: $mui-dropdown-link-bg-color-hover;
+    }
+  }
+
+  > .mui--is-disabled > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $mui-dropdown-link-font-color-disabled;
+    }
+
+    // nuke hover & focus effects
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: transparent;
+      background-image: none;
+      cursor: $mui-cursor-disabled;
+    }
+  }
+}
+
+// right align
+.mui-dropdown__menu--right {
+  left: auto;
+  right: 0;
+}
+
+// alternative positions
+.mui-dropdown--up > .mui-dropdown__menu {
+  margin: 0 0 mui-rem(2px);
+}
+
+.mui-dropdown--right > .mui-dropdown__menu {
+  margin: 0 0 0 mui-rem(2px);
+}
+
+.mui-dropdown--left > .mui-dropdown__menu {
+  margin: 0 mui-rem(2px) 0 0;
+}

src/css/bronze/forms.scss

@@ -0,0 +1,55 @@
+/* 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);
+}

src/css/bronze/grid.scss

@@ -0,0 +1,188 @@
+/* Grid */
+
+.grid {
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  /*margin-left: -.4rem;
+  margin-right: -.4rem;*/
+
+  &--1 {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 1rem;
+  }
+
+  &--2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 1rem;
+  }
+
+  &--3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1px;
+  }
+
+  &--4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 1rem;
+  }
+
+}
+
+
+.row {
+  margin-left: 3px;
+  margin-right: 3px;
+
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+
+  &: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%;
+}

src/css/bronze/list.scss

@@ -0,0 +1,12 @@
+/* List */
+.list {
+  margin: 0.5rem 0;
+}
+
+.list li {
+  padding-bottom: 0.3rem;
+}
+
+.dataRow {
+  cursor: pointer;
+}

src/css/bronze/margin.scss

@@ -0,0 +1,103 @@
+/* Margin */
+.m {
+  margin: 0.5rem;
+
+  &--1 {
+    margin: 1rem;
+  }
+
+  &--2 {
+    margin: 2rem;
+  }
+
+  &--3 {
+    margin: 3rem;
+  }
+
+}
+
+.mb {
+  margin-bottom: .1rem !important;
+
+  &--1 {
+    margin-bottom: .2rem !important;
+  }
+
+  &--2 {
+    margin-bottom: .4rem !important;
+  }
+
+}
+
+.ml {
+  margin-left: .1rem !important;
+
+  &--1 {
+    margin-left: .2rem !important;
+  }
+
+  &--2 {
+    margin-left: .4rem !important;
+  }
+
+}
+
+
+.mr {
+  margin-right: .1rem !important;
+
+  &--1 {
+    margin-right: .2rem !important;
+  }
+
+  .mr-2 {
+    margin-right: .4rem !important;
+  }
+
+}
+
+.mt {
+  margin-top: .1rem !important;
+
+  &--1 {
+    margin-top: .2rem !important;
+  }
+
+  &--2 {
+    margin-top: .4rem !important;
+  }
+
+}
+
+.mx {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+
+  &--1 {
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
+  }
+
+  &--2 {
+    margin-left: 2rem !important;
+    margin-right: 2rem !important;
+  }
+
+}
+
+.my {
+  margin: 0.5rem 0;
+
+  &--1 {
+    margin: 1rem 0;
+  }
+
+  &--2 {
+    margin: 2rem 0;
+  }
+
+  &--3 {
+    margin: 3rem 0;
+  }
+
+}

src/css/bronze/modal.scss

@@ -0,0 +1,22 @@
+.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;
+}

src/css/bronze/mouse.scss

@@ -0,0 +1,38 @@
+// 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;}

src/css/bronze/navbar.scss

@@ -0,0 +1,58 @@
+/* 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: $navbar-height;
+}
+
+
+.navbar ul {
+  display: flex;
+}
+
+.navbar a {
+  color: #fff;
+  padding: 0.45rem;
+  margin: 0 0.25rem;
+}
+
+.navbar a:hover {
+  color: $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: 200%;
+  font-weight: bold;
+}
+
+header + div.container {
+  position: relative;
+  top:$navbar-height;
+  max-height: calc(100vh - #{$navbar-height});
+}
+

src/css/bronze/padding.scss

@@ -0,0 +1,66 @@
+/* Padding */
+.pad {
+  padding: 0.5rem;
+
+  &--1 {
+    padding: 1rem;
+  }
+
+  &--2 {
+    padding: 2rem;
+  }
+
+  &--3 {
+    padding: 3rem;
+  }
+}
+
+.pady {
+  padding: 0.5rem 0;
+
+  &--top {
+    padding-top: 0.5rem;
+  }
+
+  &--bottom {
+    padding-bottom: 0.5rem;
+  }
+
+
+  &--1 {
+    padding: 1rem 0;
+  }
+
+  &--2 {
+    padding: 2rem 0;
+  }
+
+  &--3 {
+    padding: 3rem 0;
+  }
+
+}
+
+.padx {
+  padding: 0 0.5rem;
+
+  &--right {
+    padding-right: 0.5rem;
+  }
+
+  &--left {
+    padding-left: 0.5rem;
+  }
+
+  &--1 {
+    padding: 0 1rem;
+  }
+
+  &--2 {
+    padding: 0 2rem;
+  }
+
+  &--3 {
+    padding: 0 3rem;
+  }
+}

src/css/bronze/panel.scss

@@ -0,0 +1,25 @@
+/* Panel */
+
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  border-radius: 0;
+  background-color: #FFF;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12);
+}
+
+.panel:before, .panel:after {
+  content: " ";
+  display: table;
+}
+
+.panel:after {
+  clear: both;
+}
+
+.glassy {
+  background-color: rgba(31, 28, 23, 0.6);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(2px);
+}

src/css/bronze/table.scss

@@ -0,0 +1,39 @@
+.table-responsive {
+
+  display: block;
+  overflow-x: auto;
+  width: 100%;
+}
+
+
+
+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;
+}
+
+
+table th,
+table td {
+  padding: 1rem;
+  text-align: left;
+}
+
+table th {
+  background: $light-color;
+}

src/css/bronze/text.scss

@@ -0,0 +1,125 @@
+.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-primary {
+  color: $primary-color;
+}
+
+.text-dark {
+  color: $dark-color;
+}
+
+.text-light {
+  color: $dark-color;
+}
+
+.text-success {
+  color: $success-color;
+}
+
+.text-danger {
+  color: $danger-color;
+}
+
+.text-highlight {
+  color: $highlight-color;
+}
+
+.text-highlight2 {
+  color: $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-display1, h1 {
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 40px;
+}
+
+.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;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+/* Center All */
+.all-center {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.text-justify        { text-align: justify !important; }
+.text-nowrap         { white-space: nowrap !important; }
+
+.align-baseline      { vertical-align: baseline !important; }
+.align-top           { vertical-align: top !important; }
+.align-bottom        { vertical-align: bottom !important; }

src/css/lineloader.scss

@@ -0,0 +1,34 @@
+@keyframes loader-animation {
+  0% {
+    left: -100%;
+    background-color: green;
+
+  }
+  49% {
+    left: 100%;
+    background-color: yellow;
+  }
+  50% {
+    left: 100%;
+    background-color: red;
+  }
+  100% {
+    left: -100%;
+    background-color: blue;
+  }
+}
+.loader {
+  height: 5px;
+  width: 100%;
+  overflow: hidden;
+}
+.loader .bar {
+  position: relative;
+  height: 5px;
+  width: 100%;
+  background-color: var(--primary-color);
+  animation-name: loader-animation;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}

src/css/nord.scss

@@ -0,0 +1,235 @@
+// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
+// Copyright (c) 2016-present Sven Greb <development@svengreb.de>
+
+// Project:    Nord
+// Version:    0.2.0
+// Repository: https://github.com/arcticicestudio/nord
+// License:    MIT
+// References:
+//   http://sass-lang.com
+//   http://sassdoc.com
+
+////
+/// An arctic, north-bluish color palette.
+/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
+/// highlighting and UI.
+/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
+/// ambiance.
+///
+/// @author Arctic Ice Studio <development@arcticicestudio.com>
+////
+
+/// Base component color of "Polar Night".
+///
+/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* For dark ambiance themes */
+///   .background {
+///     background-color: $nord0;
+///   }
+///   /* For light ambiance themes */
+///   .text {
+///     color: $nord0;
+///   }
+/// @group polarnight
+/// @since 0.1.0
+$nord0: #2e3440;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as a lighter background color for UI elements like status bars.
+///
+/// @access public
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord1: #3b4252;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as line highlighting in the editor.
+/// In the UI scope it may be used as selection- and highlight color.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* Code Syntax Highlighting scope */
+///   .editor {
+///     &.line {
+///       background-color: $nord2;
+///     }
+///   }
+///
+///   /* UI scope */
+///   button {
+///     &:selected {
+///       background-color: $nord2;
+///     }
+///   }
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord2: #434c5e;
+
+/// Lighter shade color of the base component color.
+///
+/// Used for comments, invisibles, indent- and wrap guide marker.
+/// In the UI scope used as pseudoclass color for disabled elements.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* Code Syntax Highlighting scope */
+///   .editor {
+///     &.indent-guide,
+///     &.wrap-guide {
+///       &.marker {
+///         color: $nord3;
+///       }
+///     }
+///   }
+///   .comment,
+///   .invisible {
+///     color: $nord3;
+///   }
+///
+///   /* UI scope */
+///   button {
+///     &:disabled {
+///       background-color: $nord3;
+///     }
+///   }
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord3: #4c566a;
+
+/// Base component color of "Snow Storm".
+///
+/// Main color for text, variables, constants and attributes.
+/// In the UI scope used as semi-light background depending on the theme shading design.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* For light ambiance themes */
+///   .background {
+///     background-color: $nord4;
+///   }
+///   /* For dark ambiance themes */
+///   .text {
+///     color: $nord4;
+///   }
+/// @group snowstorm
+/// @since 0.1.0
+$nord4: #d8dee9;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as a lighter background color for UI elements like status bars.
+/// Used as semi-light background depending on the theme shading design.
+///
+/// @access public
+/// @group snowstorm
+/// @see $nord4
+/// @since 0.1.0
+$nord5: #e5e9f0;
+
+/// Lighter shade color of the base component color.
+///
+/// Used for punctuations, carets and structuring characters like curly- and square brackets.
+/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
+///
+/// @access public
+/// @group snowstorm
+/// @see $nord4
+/// @since 0.1.0
+$nord6: #eceff4;
+
+/// Bluish core color.
+///
+/// Used for classes, types and documentation tags.
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord7: #8fbcbb;
+
+/// Bluish core accent color.
+///
+/// Represents the accent color of the color palette.
+/// Main color for primary UI elements and methods/functions.
+///
+/// Can be used for
+///   - Markup quotes
+///   - Markup link URLs
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord8: #88c0d0;
+
+/// Bluish core color.
+///
+/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
+/// punctuations like (semi)colons,commas and braces.
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord9: #81a1c1;
+
+/// Bluish core color.
+///
+/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord10: #5e81ac;
+
+/// Colorful component color.
+///
+/// Used for errors, git/diff deletion and linter marker.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord11: #bf616a;
+
+/// Colorful component color.
+///
+/// Used for annotations.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord12: #d08770;
+
+/// Colorful component color.
+///
+/// Used for escape characters, regular expressions and markup entities.
+/// In the UI scope used for warnings and git/diff renamings.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord13: #ebcb8b;
+
+/// Colorful component color.
+///
+/// Main color for strings and attribute values.
+/// In the UI scope used for git/diff additions and success visualizations.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord14: #a3be8c;
+
+/// Colorful component color.
+///
+/// Used for numbers.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord15: #b48ead;

src/state/state.js

@@ -12,9 +12,9 @@ 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'),
-  'apply': baseUrl.concat('/apply'),
-  'readall' : baseUrl.concat('/readall'),
+  'jobs': baseUrl.concat('/v2/jobs'),
+  'apply': baseUrl.concat('/v2/apply'),
+  'readall' : baseUrl.concat('/v2/readall'),
   'kill' : baseUrl.concat('/kill'),
   'upvote' : baseUrl.concat('/vote/up'),
   'downvote' : baseUrl.concat('/vote/down')
@@ -28,13 +28,13 @@ const actions = {
     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) {
@@ -54,7 +54,7 @@ const actions = {
     if (id) {
       const u = `${urls.jobs}/${id}`;
       await axios.put(u).then((d) => {
-        if (d.status !== 200) 
+        if (d.status !== 200)
           console.error(d);
       }).catch((err) => {
         console.error('touchJob', err);
@@ -87,16 +87,19 @@ const actions = {
       await axios.put(u).then((d) => {
         if (d.status !== 200)
           console.error(d);
+        else {
+          
+        }
       }).catch((err) => {
         console.error('appliedJob', err);
       });
 
-      const _id = parseInt(id, 10);
-
+      const _id = id;
+      
       JobList.update((data) => {
         data.map((v) => {
           if (v._id === _id) {
-            v.a = now;
+            v.applied = now;
 
             return v;
           }
@@ -106,7 +109,7 @@ const actions = {
       });
 
       JobDetails.update((v) => {
-        v.a = now;
+        v.data.applied = now;
 
         return v;
       });
@@ -163,7 +166,6 @@ const actions = {
     });
   }
 
-
 };
 
 export { JobList, JobDetails, actions };