init
This commit is contained in:
commit
ab80291ee3
62
.eslintrc.json
Normal file
62
.eslintrc.json
Normal 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
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal 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
6
.idea/inspectionProfiles/Project_Default.xml
Normal 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
6
.idea/jsLibraryMappings.xml
Normal 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
6
.idea/misc.xml
Normal 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
8
.idea/modules.xml
Normal 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
12
.idea/svelte-jobs.iml
Normal 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
6
.idea/vcs.xml
Normal 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
106
README.md
Normal 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
4
copy.sh
Executable 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
3884
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal 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
BIN
public/favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
0
public/global.css
Normal file
0
public/global.css
Normal file
18
public/index.html
Normal file
18
public/index.html
Normal 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
91
rollup.config.js
Normal 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
34
src/App.svelte
Normal 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
87
src/components/Detail.svelte
Normal 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
54
src/components/Lister.svelte
Normal 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
23
src/components/Menu.svelte
Normal 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
968
src/css/global.scss
Normal 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
11
src/main.js
Normal 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
49
src/state/state.js
Normal 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 };
|
Loading…
Reference in New Issue
Block a user