basic template design
This commit is contained in:
commit
0423ad2514
130
.gitignore
vendored
Normal file
130
.gitignore
vendored
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
1388
assets/delete-icon.ai
Normal file
1388
assets/delete-icon.ai
Normal file
File diff suppressed because one or more lines are too long
1208
assets/edit-icon.ai
Normal file
1208
assets/edit-icon.ai
Normal file
File diff suppressed because one or more lines are too long
7725
package-lock.json
generated
Normal file
7725
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "doorlock_webmini",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"@webpack-cli/serve": "^1.6.1",
|
||||||
|
"css-loader": "^6.6.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"sass": "^1.49.8",
|
||||||
|
"sass-loader": "^12.6.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
|
"webpack": "^5.69.1",
|
||||||
|
"webpack-cli": "^4.9.2",
|
||||||
|
"webpack-dev-server": "^4.7.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lodash": "^4.17.21"
|
||||||
|
}
|
||||||
|
}
|
||||||
181
public/index.html
Normal file
181
public/index.html
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Doorlock</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<div class="header">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Login</h1>
|
||||||
|
<div id="hamburger-button" class="hamburger">
|
||||||
|
<hr />
|
||||||
|
<hr />
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="login-screen" class="page">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<form id="login_form">
|
||||||
|
<p>
|
||||||
|
Bitte melden Sie sich mit ihren Nutzerdaten an.
|
||||||
|
</p>
|
||||||
|
<div class="input-box">
|
||||||
|
<input id="name" type="text" placeholder="Username" />
|
||||||
|
<label for="name">Benutzername</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-box">
|
||||||
|
<input id="pass" type="password" placeholder="Passwort" />
|
||||||
|
<label for="pass">Password</label>
|
||||||
|
</div>
|
||||||
|
<input type="button" value="Submit" />
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="status-screen" class="page">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Gerät</a> </li>
|
||||||
|
<li><a href="#">Status</a> </li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p><b>Laufzeit: </b> 1 Tag 5Stunden 10 Minuten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="user-screen" class="page">
|
||||||
|
<div class="container">
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Benutzer</a> </li>
|
||||||
|
<li><a href="#">Benutzerliste</a> </li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>Filter</span>
|
||||||
|
<input id="user-filter" type="text"/>
|
||||||
|
<button>+</button>
|
||||||
|
</div>
|
||||||
|
<div class="user-list-item">
|
||||||
|
<div class="user-attributes">
|
||||||
|
<span><b>UID:</b> 123</span> <span>(<b>Aktiv</b>)</span><br>
|
||||||
|
<span><b>Vorname:</b> Max</span><br>
|
||||||
|
<span><b>Nachname:</b> Müller</span><br>
|
||||||
|
<span><b>RFID:</b> 0XABCDE</span>
|
||||||
|
<span><b>PIN:</b> 1023</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn-trash">Löschen</button>
|
||||||
|
<button class="btn-edit">Bearbeiten</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-list-item">
|
||||||
|
<div class="user-attributes">
|
||||||
|
<span><b>UID:</b> 123</span> <span>(<b>Aktiv</b>)</span><br>
|
||||||
|
<span><b>Vorname:</b> Max</span><br>
|
||||||
|
<span><b>Nachname:</b> Müller</span><br>
|
||||||
|
<span><b>RFID:</b> 0XABCDE</span>
|
||||||
|
<span><b>PIN:</b> 1023</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn-trash">Löschen</button>
|
||||||
|
<button class="btn-edit">Bearbeiten</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-list-item">
|
||||||
|
<div class="user-attributes">
|
||||||
|
<span><b>UID:</b> 123</span> <span>(<b>Aktiv</b>)</span><br>
|
||||||
|
<span><b>Vorname:</b> Max</span><br>
|
||||||
|
<span><b>Nachname:</b> Müller</span><br>
|
||||||
|
<span><b>RFID:</b> 0XABCDE</span>
|
||||||
|
<span><b>PIN:</b> 1023</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn-trash">Löschen</button>
|
||||||
|
<button class="btn-edit">Bearbeiten</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-list-item">
|
||||||
|
<div class="user-attributes">
|
||||||
|
<span><b>UID:</b> 123</span> <span>(<b>Aktiv</b>)</span><br>
|
||||||
|
<span><b>Vorname:</b> Max</span><br>
|
||||||
|
<span><b>Nachname:</b> Müller</span><br>
|
||||||
|
<span><b>RFID:</b> 0XABCDE</span>
|
||||||
|
<span><b>PIN:</b> 1023</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn-trash">Löschen</button>
|
||||||
|
<button class="btn-edit">Bearbeiten</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-nav-bar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">1</a></li>
|
||||||
|
<li><a href="#">2</a></li>
|
||||||
|
<li><a href="#">3</a></li>
|
||||||
|
<li><a href="#">4</a></li>
|
||||||
|
<li><a href="#">5</a></li>
|
||||||
|
<li><a href="#">></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<div>
|
||||||
|
<input id="new_uid" placeholder="Benutzernummer" type="text">
|
||||||
|
<label for="new_uid">Benutzernummer</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new_first_name" placeholder="Vorname" type="text">
|
||||||
|
<label for="new_first_name">Vorname</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new_last_name" placeholder="Nachname" type="text">
|
||||||
|
<label for="new_last_name">Nachname</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new_rfid" placeholder="RFID" type="text">
|
||||||
|
<label for="new_rfid">RFID</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new_pin" placeholder="PIN" type="text">
|
||||||
|
<label for="new_pin">PIN</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input id="new_enabled" type="checkbox">
|
||||||
|
<label for="new_enabled">Enabled</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="menu-screen" class="page">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" onclick="chPage(document.getElementById('status-screen'))">Übersicht</a></li>
|
||||||
|
<li><a href="#" onclick="chPage(document.getElementById('user-screen'))">Benutzer</a></li>
|
||||||
|
<li><a href="#">Backup</a></li>
|
||||||
|
<li><a href="#">System</a></li>
|
||||||
|
<li><a href="#" onclick="chPage(document.getElementById('login-screen'))">Abmelden</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
52
src/_breadcrumb.sass
Normal file
52
src/_breadcrumb.sass
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
@mixin breadcrumb
|
||||||
|
padding: 1em 0
|
||||||
|
ul
|
||||||
|
display: flex
|
||||||
|
background: #eee
|
||||||
|
box-shadow: inset 0 0 .3em #ccc, 0 0 .5em #ddd
|
||||||
|
padding: .3em
|
||||||
|
border: 0.05em solid #fff
|
||||||
|
border-radius: .3em
|
||||||
|
list-style-type: none
|
||||||
|
li
|
||||||
|
a
|
||||||
|
position: relative
|
||||||
|
display: inline-flex
|
||||||
|
vertical-align: middle
|
||||||
|
text-align: center
|
||||||
|
align-items: center
|
||||||
|
text-decoration: none
|
||||||
|
color: #fff
|
||||||
|
background: #ccc
|
||||||
|
height: 2em
|
||||||
|
padding: .5em .5em
|
||||||
|
&::after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 100%
|
||||||
|
border-top: 1em solid transparent
|
||||||
|
border-bottom: 1em solid transparent
|
||||||
|
border-left: 1em solid #ccc
|
||||||
|
|
||||||
|
z-index: 2
|
||||||
|
&:hover
|
||||||
|
background-color: #777
|
||||||
|
&::after
|
||||||
|
border-left: 1em solid #777
|
||||||
|
&:first-child a
|
||||||
|
border-top-left-radius: .3em
|
||||||
|
border-bottom-left-radius: .3em
|
||||||
|
|
||||||
|
&:not(:first-child) a
|
||||||
|
margin-left: .2em
|
||||||
|
padding-left: 1.5em
|
||||||
|
&::before
|
||||||
|
z-index: 1
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0%
|
||||||
|
border-top: 1em solid transparent
|
||||||
|
border-bottom: 1em solid transparent
|
||||||
|
border-left: 1em solid #eee
|
||||||
39
src/_hamburger.sass
Normal file
39
src/_hamburger.sass
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
@mixin hamburger-rect
|
||||||
|
width: 3em
|
||||||
|
height: .5em
|
||||||
|
border: none
|
||||||
|
margin: 0
|
||||||
|
background: #fff
|
||||||
|
border-radius: .2em
|
||||||
|
box-shadow: inset 0 0 .2em #000
|
||||||
|
position: relative
|
||||||
|
transition: 250ms all
|
||||||
|
@mixin hamburger-rect-active
|
||||||
|
background: black
|
||||||
|
box-shadow: 0 0 .1em #000
|
||||||
|
@mixin hamburger-rect-transparent
|
||||||
|
|
||||||
|
@mixin hamburger
|
||||||
|
width: 3em
|
||||||
|
display: inline-block
|
||||||
|
position: relative
|
||||||
|
float: right
|
||||||
|
hr
|
||||||
|
@include hamburger-rect
|
||||||
|
&:nth-child(1)
|
||||||
|
transform-origin: 0% 0%
|
||||||
|
&:nth-child(2)
|
||||||
|
margin: .5em 0
|
||||||
|
&:nth-child(3)
|
||||||
|
transform-origin: 0% 100%
|
||||||
|
|
||||||
|
&-active
|
||||||
|
hr:nth-child(1)
|
||||||
|
transform: translate(.25em, 0em) rotate(45deg)
|
||||||
|
@include hamburger-rect-active
|
||||||
|
hr:nth-child(2)
|
||||||
|
opacity: 0
|
||||||
|
transform: rotate(0deg) scale(0.2, 0.2)
|
||||||
|
hr:nth-child(3)
|
||||||
|
transform: translate(.25em, 0em) rotate(-45deg)
|
||||||
|
@include hamburger-rect-active
|
||||||
40
src/_login.sass
Normal file
40
src/_login.sass
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
@mixin text-input
|
||||||
|
position: relative
|
||||||
|
input
|
||||||
|
display: block
|
||||||
|
width: 100%
|
||||||
|
border-radius: none
|
||||||
|
outline: none
|
||||||
|
border: none
|
||||||
|
font-size: 1.5em
|
||||||
|
padding: .7em
|
||||||
|
+ label
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
cursor: text
|
||||||
|
transition: 250ms all
|
||||||
|
|
||||||
|
&::placeholder
|
||||||
|
color: transparent
|
||||||
|
&:placeholder-shown + label
|
||||||
|
color: grey
|
||||||
|
font-size: 1.5em
|
||||||
|
position: absolute
|
||||||
|
padding: .7em
|
||||||
|
|
||||||
|
@mixin login-form
|
||||||
|
|
||||||
|
padding: 1em
|
||||||
|
margin: 0 auto
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
.input-box
|
||||||
|
@include text-input
|
||||||
|
p
|
||||||
|
font-size: 2em
|
||||||
|
|
||||||
|
input[type=button]
|
||||||
|
border: none
|
||||||
|
border-radius: none
|
||||||
|
font-size: 2em
|
||||||
28
src/_menu.sass
Normal file
28
src/_menu.sass
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
@mixin nav
|
||||||
|
ul
|
||||||
|
list-style: none
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
li a
|
||||||
|
display: block
|
||||||
|
position: relative
|
||||||
|
padding: 1em
|
||||||
|
font-size: 2em
|
||||||
|
font-style: none
|
||||||
|
text-decoration: none
|
||||||
|
color: #666
|
||||||
|
//text-shadow: 0 0 .2em #000
|
||||||
|
width: 100%
|
||||||
|
//background: #ccc
|
||||||
|
&::after
|
||||||
|
top: 100%
|
||||||
|
left: 0
|
||||||
|
z-index: 2
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
width: 100%
|
||||||
|
height: .1em
|
||||||
|
background: #8a8080
|
||||||
|
//border-bottom-left-radius: 2em 1em
|
||||||
17
src/assets/delete-icon.svg
Normal file
17
src/assets/delete-icon.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M-1.06,500"/>
|
||||||
|
<path stroke="#000000" stroke-miterlimit="10" d="M427,119.8H30.85v354.94h0.11c-0.07,0.22-0.11,0.44-0.11,0.66
|
||||||
|
c0,11.38,88.68,20.61,198.08,20.61S427,486.79,427,475.41c0-0.22-0.05-0.44-0.11-0.66H427V119.8z"/>
|
||||||
|
<ellipse fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="228.92" cy="119.14" rx="198.08" ry="20.61"/>
|
||||||
|
<ellipse stroke="#000000" stroke-miterlimit="10" cx="229.59" cy="117.81" rx="192.09" ry="19.28"/>
|
||||||
|
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M554.5,88.5"/>
|
||||||
|
<path stroke="#FEFFF8" stroke-miterlimit="10" d="M425.83,65.99c1.43-0.64,2.17-1.27,2.15-1.88c-0.1-4.16-34.43-8.22-83.97-8.97
|
||||||
|
c1.65-3.51,2.43-7.42,2.07-11.46l-0.44-4.96c-1.18-13.22-13.96-22.88-28.54-21.57L116.98,35.07c-14.58,1.3-25.43,13.08-24.25,26.3
|
||||||
|
l0.44,4.96c0.38,4.29,2.01,8.2,4.5,11.49c-49.05,9.88-82.04,20.23-81.37,24.36c0.07,0.44,0.53,0.81,1.35,1.12
|
||||||
|
c-4.19,1.14-6.4,2.14-6.32,2.95c0.47,5.3,96.3,1.06,214.04-9.48s212.79-23.38,212.32-28.69C437.58,66.99,433.41,66.3,425.83,65.99z
|
||||||
|
M323.02,39.65c0.41,4.62-3.38,8.74-8.48,9.2L126.44,65.69c-5.1,0.46-9.57-2.92-9.98-7.54l-0.54-6.07c-0.41-4.62,3.38-8.74,8.48-9.2
|
||||||
|
l188.09-16.84c5.1-0.46,9.57,2.92,9.98,7.54L323.02,39.65z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
11
src/assets/delete-icon2.svg
Normal file
11
src/assets/delete-icon2.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<circle fill="#232323" stroke="#000000" stroke-miterlimit="10" cx="250" cy="250" r="233"/>
|
||||||
|
<path fill="#FFFFFF" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M349.5,421.5h-199c-8.28,0-15-6.72-15-15
|
||||||
|
v-255h229v255C364.5,414.78,357.78,421.5,349.5,421.5z"/>
|
||||||
|
<path fill="#FFFFFF" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M386.81,99.5H314.5V80.38
|
||||||
|
c0-9.88-8.01-17.88-17.88-17.88h-92.24c-9.88,0-17.88,8.01-17.88,17.88V99.5h-73.31c-5.35,0-9.69,4.34-9.69,9.69v20.62
|
||||||
|
c0,5.35,4.34,9.69,9.69,9.69h273.62c5.35,0,9.69-4.34,9.69-9.69v-20.62C396.5,103.84,392.16,99.5,386.81,99.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 965 B |
10
src/assets/delete-icon3.svg
Normal file
10
src/assets/delete-icon3.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<path fill="#CCCCCC" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M349.5,421.5h-199c-8.28,0-15-6.72-15-15
|
||||||
|
v-255h229v255C364.5,414.78,357.78,421.5,349.5,421.5z"/>
|
||||||
|
<path fill="#CCCCCC" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M386.81,99.5H314.5V80.38
|
||||||
|
c0-9.88-8.01-17.88-17.88-17.88h-92.24c-9.88,0-17.88,8.01-17.88,17.88V99.5h-73.31c-5.35,0-9.69,4.34-9.69,9.69v20.62
|
||||||
|
c0,5.35,4.34,9.69,9.69,9.69h273.62c5.35,0,9.69-4.34,9.69-9.69v-20.62C396.5,103.84,392.16,99.5,386.81,99.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 874 B |
53
src/assets/edit-icon.svg
Normal file
53
src/assets/edit-icon.svg
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="33.5" y1="250" x2="466.5" y2="250">
|
||||||
|
<stop offset="0.3265" style="stop-color:#FFFFFF"/>
|
||||||
|
<stop offset="1" style="stop-color:#000000;stop-opacity:0.4"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="33" y1="250" x2="467" y2="250">
|
||||||
|
<stop offset="0" style="stop-color:#FFFFFF"/>
|
||||||
|
<stop offset="1" style="stop-color:#000000"/>
|
||||||
|
</linearGradient>
|
||||||
|
<path display="none" fill="url(#SVGID_1_)" stroke="url(#SVGID_2_)" stroke-miterlimit="10" d="M434.46,466.5H65.54
|
||||||
|
c-17.7,0-32.04-14.35-32.04-32.04V65.54c0-17.7,14.35-32.04,32.04-32.04h368.92c17.7,0,32.04,14.35,32.04,32.04v368.92
|
||||||
|
C466.5,452.15,452.15,466.5,434.46,466.5z"/>
|
||||||
|
<path d="M79.41,432.16c9.3-3.23,18.81-5.91,28.49-7.97l3.63-0.77l3.65-0.67l3.66-0.63l3.69-0.52c1.23-0.16,2.46-0.37,3.69-0.5
|
||||||
|
l3.71-0.39c2.47-0.31,4.96-0.4,7.45-0.55c9.96-0.51,20.06-0.16,30,1.84c4.96,1.02,9.9,2.32,14.63,4.27l3.55,1.43
|
||||||
|
c1.15,0.56,2.29,1.15,3.43,1.73c1.15,0.56,2.22,1.27,3.33,1.9c1.12,0.62,2.17,1.35,3.23,2.06c4.23,2.86,8.07,6.2,11.67,9.59
|
||||||
|
c3.61,3.39,7,6.85,10.85,9.29c0.47,0.33,0.98,0.53,1.48,0.81l0.75,0.4c0.25,0.12,0.52,0.2,0.77,0.3c0.52,0.18,1.03,0.41,1.57,0.56
|
||||||
|
l1.63,0.34c2.19,0.3,4.51,0.38,6.72-0.18c2.21-0.51,4.32-1.47,6.28-2.73c1.92-1.32,3.72-2.88,5.34-4.63
|
||||||
|
c3.2-3.55,5.96-7.58,8.48-11.76l7.53-12.68c1.31-2.1,2.63-4.2,4.11-6.22c1.45-2.04,2.99-4.03,4.75-5.87
|
||||||
|
c1.73-1.86,3.67-3.58,5.85-5.02c1.06-0.77,2.25-1.34,3.42-1.96c1.23-0.49,2.44-1.05,3.75-1.35c5.13-1.53,10.78-1.05,15.76,0.71
|
||||||
|
c4.99,1.79,9.37,4.59,13.43,7.49c4.1,2.89,7.91,5.97,11.82,8.81c3.9,2.83,7.84,5.53,11.98,7.71c8.23,4.49,17.32,6.86,26.56,6.84
|
||||||
|
c9.18-0.07,18.66-1.93,26.52-6.24c3.95-2.13,7.49-4.93,10.43-8.32c2.94-3.38,5.27-7.32,7.1-11.54c1.82-4.23,3.08-8.76,3.95-13.41
|
||||||
|
c0.91-4.66,1.38-9.39,1.84-14.34c0.15-1.28,0.22-2.45,0.62-4.09c0.07-0.24,0.12-0.44,0.25-0.75c0.05-0.13,0.11-0.28,0.22-0.48
|
||||||
|
l0.16-0.28c0.05-0.09,0.18-0.25,0.27-0.37c0.12-0.13,0.19-0.23,0.36-0.38c0.19-0.16,0.4-0.31,0.62-0.42
|
||||||
|
c0.42-0.24,1.17-0.4,1.67-0.32c0.27,0.03,0.54,0.09,0.79,0.18c0.18,0.08,0.36,0.17,0.53,0.27c0.4,0.24,0.48,0.37,0.7,0.57
|
||||||
|
c0.21,0.21,0.26,0.31,0.38,0.46l0.15,0.22l0.1,0.18l0.19,0.35l0.14,0.3c0.18,0.41,0.3,0.77,0.41,1.12c0.42,1.39,0.65,2.64,0.88,3.9
|
||||||
|
c0.22,1.26,0.39,2.5,0.55,3.74c0.64,4.95,1.01,9.87,1.33,14.79c0.34,4.92,0.53,9.84,0.71,14.75c0.18,4.92,0.33,9.83,0.38,14.75
|
||||||
|
l-0.7,0.05l-1.93-14.61l-2.02-14.57c-0.71-4.84-1.45-9.68-2.35-14.42c-0.23-1.18-0.47-2.36-0.75-3.5c-0.27-1.13-0.58-2.29-0.94-3.23
|
||||||
|
c-0.09-0.24-0.18-0.45-0.26-0.6l-0.06-0.11c-0.01-0.02-0.03-0.03-0.04-0.05l-0.01-0.02c0,0.01,0.01,0.02,0.01,0.03
|
||||||
|
c0.03,0.04,0-0.01,0.09,0.11c0.1,0.1,0.09,0.1,0.34,0.28c0.1,0.07,0.22,0.12,0.33,0.16c0.18,0.07,0.37,0.12,0.57,0.14
|
||||||
|
c0.35,0.05,0.94-0.06,1.23-0.24c0.16-0.08,0.31-0.18,0.43-0.3c0.11-0.1,0.14-0.13,0.21-0.21c0.05-0.05,0.12-0.17,0.14-0.19
|
||||||
|
c0.02-0.02,0.04-0.05,0.05-0.07c0.04-0.07,0.04-0.08,0.04-0.06c0.01-0.03-0.01,0.08-0.03,0.13c-0.15,0.76-0.23,2.05-0.29,3.21
|
||||||
|
c-0.22,4.84-0.44,9.92-1.18,14.94c-0.75,5.03-1.94,10.06-3.82,14.93c-1.86,4.87-4.49,9.54-7.93,13.64
|
||||||
|
c-3.42,4.1-7.63,7.58-12.27,10.2c-4.65,2.63-9.7,4.32-14.76,5.46c-5.09,1.11-10.23,1.7-15.46,1.56c-5.2-0.1-10.41-0.86-15.43-2.28
|
||||||
|
c-5.03-1.41-9.81-3.53-14.26-6.08c-8.96-5.06-16.44-11.84-23.97-17.81c-1.89-1.49-3.79-2.92-5.75-4.19
|
||||||
|
c-1.95-1.28-3.95-2.45-6.04-3.34c-2.09-0.88-4.25-1.49-6.46-1.75c-1.1-0.16-2.22-0.14-3.34-0.14c-1.11,0.13-2.24,0.16-3.32,0.45
|
||||||
|
c-1.11,0.18-2.16,0.6-3.24,0.94c-1.03,0.48-2.09,0.9-3.06,1.52c-1.02,0.53-1.94,1.26-2.89,1.92c-0.89,0.75-1.82,1.48-2.65,2.33
|
||||||
|
c-3.45,3.25-6.28,7.23-8.97,11.27c-2.69,4.06-5.11,8.33-7.72,12.52c-1.3,2.09-2.64,4.18-4.02,6.24c-1.42,2.04-2.92,4.04-4.59,5.93
|
||||||
|
c-1.7,1.86-3.5,3.66-5.58,5.19c-2.1,1.5-4.48,2.68-7.01,3.42c-2.53,0.8-5.22,0.92-7.88,0.71l-2-0.3c-0.66-0.14-1.29-0.36-1.94-0.54
|
||||||
|
c-0.32-0.1-0.65-0.18-0.97-0.3l-0.92-0.39c-0.6-0.28-1.25-0.5-1.81-0.83c-4.67-2.5-8.44-5.89-12.22-8.93
|
||||||
|
c-3.76-3.09-7.55-5.97-11.58-8.43c-1-0.62-1.99-1.26-3.04-1.79c-1.05-0.54-2.05-1.16-3.12-1.63c-1.07-0.5-2.14-0.97-3.19-1.49
|
||||||
|
l-3.29-1.29c-2.16-0.94-4.45-1.55-6.71-2.25c-0.57-0.17-1.13-0.35-1.7-0.51l-1.73-0.41l-3.46-0.83c-2.32-0.49-4.69-0.84-7.03-1.25
|
||||||
|
c-2.38-0.24-4.75-0.57-7.14-0.75c-4.78-0.36-9.6-0.57-14.42-0.48c-19.35,0.22-38.7,3.45-57.96,7.26L79.41,432.16z"/>
|
||||||
|
<g>
|
||||||
|
<path stroke="#000000" stroke-miterlimit="10" d="M413.32,17.28L26.6,403.99c-1.18,1.18-1.18,3.1,0,4.29l66.16,66.16
|
||||||
|
c1.18,1.18,3.1,1.18,4.29,0L483.77,87.73c1.18-1.18,1.18-3.1,0-4.29L417.6,17.28C416.42,16.09,414.5,16.09,413.32,17.28z"/>
|
||||||
|
<path stroke="#000000" stroke-miterlimit="10" d="M29.53,474.5h55.41c2.7,0,4.05-3.26,2.14-5.17l-55.41-55.41
|
||||||
|
c-1.91-1.91-5.17-0.56-5.17,2.14v55.41C26.5,473.14,27.86,474.5,29.53,474.5z"/>
|
||||||
|
</g>
|
||||||
|
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M81.5,437.5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
13
src/assets/edit-icon2.svg
Normal file
13
src/assets/edit-icon2.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<circle fill="#232323" stroke="#000000" stroke-miterlimit="10" cx="250" cy="250" r="233"/>
|
||||||
|
<polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="181.5,395.5 86.5,395.5 86.5,300.5 "/>
|
||||||
|
<g>
|
||||||
|
|
||||||
|
<rect x="355.37" y="40.63" transform="matrix(0.7071 -0.7071 0.7071 0.7071 31.9186 294.7199)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="32.69" height="136.4"/>
|
||||||
|
|
||||||
|
<rect x="94.59" y="168.11" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.5647 241.9146)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="299.29" height="136.4"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 930 B |
12
src/assets/edit-icon3.svg
Normal file
12
src/assets/edit-icon3.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" viewBox="0 0 500 500" overflow="visible" xml:space="preserve">
|
||||||
|
<polyline fill="#CCCCCC" stroke="#000000" stroke-miterlimit="10" points="181.5,395.5 86.5,395.5 86.5,300.5 "/>
|
||||||
|
<g>
|
||||||
|
|
||||||
|
<rect x="355.37" y="40.63" transform="matrix(0.7071 -0.7071 0.7071 0.7071 31.9147 294.7168)" fill="#CCCCCC" stroke="#000000" stroke-width="1" stroke-miterlimit="9.9999" width="32.69" height="136.4"/>
|
||||||
|
|
||||||
|
<rect x="94.59" y="168.11" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.5641 241.9096)" fill="#CCCCCC" stroke="#000000" stroke-width="1" stroke-miterlimit="9.9999" width="299.29" height="136.4"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 881 B |
39
src/index.js
Normal file
39
src/index.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import "./style.sass"
|
||||||
|
var menu_screen = document.getElementById("menu-screen");
|
||||||
|
var login_screen = document.getElementById("login-screen");
|
||||||
|
var hamburger_button = document.getElementById("hamburger-button");
|
||||||
|
|
||||||
|
var current_page = login_screen;
|
||||||
|
function component() {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
var login = document.getElementById("login-screen");
|
||||||
|
login.style.display = "flex";
|
||||||
|
hamburger_button.addEventListener("click",menu);
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
function menu(){
|
||||||
|
var menu = document.getElementById("menu-screen");
|
||||||
|
if(hamburger_button.classList.contains("hamburger-active")){
|
||||||
|
hamburger_button.classList.remove("hamburger-active");
|
||||||
|
menu_screen.style.display = "none";
|
||||||
|
current_page.style.display = "flex";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
hamburger_button.classList.add("hamburger-active");
|
||||||
|
menu_screen.style.display = "flex";
|
||||||
|
current_page.style.display = "none";
|
||||||
|
}
|
||||||
|
console.log("Button works");
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeCurrent(page_new){
|
||||||
|
menu_screen.style.display = "none";
|
||||||
|
current_page=page_new;
|
||||||
|
current_page.style.display = "flex";
|
||||||
|
hamburger_button.classList.remove("hamburger-active");
|
||||||
|
}
|
||||||
|
window.menu = menu;
|
||||||
|
window.chPage = changeCurrent;
|
||||||
|
document.body.appendChild(component());
|
||||||
|
|
||||||
146
src/style.sass
Normal file
146
src/style.sass
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@use 'hamburger'
|
||||||
|
@use 'menu'
|
||||||
|
@use 'login'
|
||||||
|
@use 'breadcrumb'
|
||||||
|
*
|
||||||
|
//border: red 1px dotted
|
||||||
|
box-sizing: border-box
|
||||||
|
html
|
||||||
|
font-family: Helvetica, sans-serif
|
||||||
|
font-size: 16px
|
||||||
|
body
|
||||||
|
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
background-color: white
|
||||||
|
//min-height: 100vh
|
||||||
|
width: 100%
|
||||||
|
#wrapper
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-start
|
||||||
|
align-items: stretch
|
||||||
|
min-height: 100%
|
||||||
|
width: 100%
|
||||||
|
.header
|
||||||
|
z-index: 100
|
||||||
|
position: fixed
|
||||||
|
width: 100%
|
||||||
|
height: 4em
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: flex-end
|
||||||
|
padding: .5em 0
|
||||||
|
margin: 0 0 0 0
|
||||||
|
background: linear-gradient(#9e9e9e 0% , #d1d1d1 100%)
|
||||||
|
box-shadow: 0 0 .2em #444
|
||||||
|
h1
|
||||||
|
display: inline-block
|
||||||
|
margin: 0 0
|
||||||
|
color: white
|
||||||
|
.hamburger
|
||||||
|
font-size: 1em
|
||||||
|
@include hamburger.hamburger
|
||||||
|
|
||||||
|
.container
|
||||||
|
width: clamp(5ch, 100%,75ch)
|
||||||
|
margin: 0 auto
|
||||||
|
.breadcrumb
|
||||||
|
@include breadcrumb.breadcrumb
|
||||||
|
|
||||||
|
.page
|
||||||
|
//overflow: auto
|
||||||
|
display: none
|
||||||
|
background: white
|
||||||
|
width: 100%
|
||||||
|
padding-top: 3em
|
||||||
|
.menu
|
||||||
|
@include menu.nav
|
||||||
|
|
||||||
|
#login_form
|
||||||
|
@include login.login-form
|
||||||
|
|
||||||
|
.page-nav-bar
|
||||||
|
text-align: center
|
||||||
|
//background-color: #ccc
|
||||||
|
margin: 1em
|
||||||
|
ul
|
||||||
|
list-style: none
|
||||||
|
justify-content: center
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
display: flex
|
||||||
|
li a
|
||||||
|
text-decoration: none
|
||||||
|
font-weight: bold
|
||||||
|
padding: .2em .5em
|
||||||
|
margin: .3em
|
||||||
|
border-radius: .3em
|
||||||
|
background: #eee
|
||||||
|
color: #ccc
|
||||||
|
border: .1em solid #ccc
|
||||||
|
&:hover
|
||||||
|
color: #333
|
||||||
|
background: #fff
|
||||||
|
border: .1em solid #ccc
|
||||||
|
.user-list-item
|
||||||
|
overflow: hidden
|
||||||
|
display: flex
|
||||||
|
flex-direction: row
|
||||||
|
background: #eee
|
||||||
|
padding: .5em 0
|
||||||
|
border-radius: .3em
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: .5em
|
||||||
|
.user-attributes
|
||||||
|
padding: .5em
|
||||||
|
.btn-group
|
||||||
|
margin-left: auto
|
||||||
|
display: inline-flex
|
||||||
|
flex-direction: column
|
||||||
|
align-self: flex-end
|
||||||
|
justify-self: flex-end
|
||||||
|
@mixin button()
|
||||||
|
position: relative
|
||||||
|
border: none
|
||||||
|
margin-left: auto
|
||||||
|
background: #eee
|
||||||
|
//background-size: 80% 80%
|
||||||
|
background-repeat: no-repeat
|
||||||
|
background-position: left
|
||||||
|
background-origin: border-box
|
||||||
|
transition: 150ms background-size, 200ms padding, 100ms width
|
||||||
|
padding: 0em
|
||||||
|
padding-left: 3em
|
||||||
|
width: 3em
|
||||||
|
height: 3em
|
||||||
|
border-bottom-left-radius: 1.5em
|
||||||
|
border-top-left-radius: 1.5em
|
||||||
|
&:not(:last-of-type)
|
||||||
|
margin-bottom: .5em
|
||||||
|
&:hover
|
||||||
|
width: auto
|
||||||
|
filter: invert(120%)
|
||||||
|
padding-right: .5em
|
||||||
|
background-color: #000
|
||||||
|
color: #ccc
|
||||||
|
box-shadow: 0 0 .5em #333
|
||||||
|
background-position: 00%
|
||||||
|
//background-size: 90% 90%
|
||||||
|
&::before
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
bottom: 0
|
||||||
|
right: 0
|
||||||
|
content: ''
|
||||||
|
border-radius: 50%
|
||||||
|
//border: .1em solid #333
|
||||||
|
|
||||||
|
.btn-trash
|
||||||
|
@include button()
|
||||||
|
background-image: url("assets/delete-icon3.svg")
|
||||||
|
|
||||||
|
.btn-edit
|
||||||
|
@include button()
|
||||||
|
background-image: url("assets/edit-icon3.svg")
|
||||||
68
webpack.config.js
Normal file
68
webpack.config.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
// App directory
|
||||||
|
const appDirectory = fs.realpathSync(process.cwd());
|
||||||
|
|
||||||
|
// Gets absolute path of file within app directory
|
||||||
|
const resolveAppPath = relativePath => path.resolve(appDirectory, relativePath);
|
||||||
|
|
||||||
|
// Host
|
||||||
|
const host = process.env.HOST || 'localhost';
|
||||||
|
|
||||||
|
// Required for babel-preset-react-app
|
||||||
|
process.env.NODE_ENV = 'development';
|
||||||
|
module.exports = {
|
||||||
|
|
||||||
|
// Environment mode
|
||||||
|
mode: 'development',
|
||||||
|
|
||||||
|
// Entry point of app
|
||||||
|
entry: resolveAppPath('src'),
|
||||||
|
|
||||||
|
output: {
|
||||||
|
|
||||||
|
// Development filename output
|
||||||
|
filename: 'static/js/bundle.js',
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
|
||||||
|
// Serve index.html as the base
|
||||||
|
|
||||||
|
// Enable compression
|
||||||
|
compress: true,
|
||||||
|
|
||||||
|
// Enable hot reloading
|
||||||
|
hot: true,
|
||||||
|
|
||||||
|
host,
|
||||||
|
|
||||||
|
port: 8080,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Re-generate index.html with injected script tag.
|
||||||
|
// The injected script tag contains a src value of the
|
||||||
|
// filename output defined above.
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: true,
|
||||||
|
template: resolveAppPath('public/index.html'),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
// Creates `style` nodes from JS strings
|
||||||
|
"style-loader",
|
||||||
|
// Translates CSS into CommonJS
|
||||||
|
"css-loader",
|
||||||
|
// Compiles Sass to CSS
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user