martin/svelte-jobs
martin/svelte-jobs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Martin Donnelly 2020-05-19 10:02:57 +01:00
commit ab80291ee3
24 changed files with 5474 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
.eslintrc.json Normal file
View File

@ -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": ["/"] }]
}
}

4
.gitignore vendored Normal file
View File

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

5
.idea/.gitignore vendored Normal file
View File

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

6
.idea/inspectionProfiles/Project_Default.xml Normal file
View File

@ -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>

6
.idea/jsLibraryMappings.xml Normal file
View File

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

6
.idea/misc.xml Normal file
View File

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

8
.idea/modules.xml Normal file
View File

@ -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>

12
.idea/svelte-jobs.iml Normal file
View File

@ -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>

6
.idea/vcs.xml Normal file
View File

@ -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>

106
README.md Normal file
View File

@ -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
```

4
copy.sh Executable file
View File

@ -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

3884
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

30
package.json Normal file
View File

@ -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"
}
}

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

0
public/global.css Normal file
View File

18
public/index.html Normal file
View File

@ -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>

91
rollup.config.js Normal file
View File

@ -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
});
}
}
};
}

34
src/App.svelte Normal file
View File

@ -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>

87
src/components/Detail.svelte Normal file
View File

@ -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}

54
src/components/Lister.svelte Normal file
View File

@ -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>

23
src/components/Menu.svelte Normal file
View File

@ -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>

968
src/css/global.scss Normal file
View File

@ -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; }
*/

11
src/main.js Normal file
View File

@ -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;

49
src/state/state.js Normal file
View File

@ -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 };