Add assets
This commit is contained in:
parent
f59939daff
commit
167f1d3366
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
.idea
|
.idea
|
||||||
|
public
|
||||||
|
dist
|
||||||
10
assets/config.json
Normal file
10
assets/config.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"bundles": {
|
||||||
|
"app": "js/app.js",
|
||||||
|
"layout": "sass/layout.scss",
|
||||||
|
"error": "sass/error.scss",
|
||||||
|
"logo": "img/logo.svg",
|
||||||
|
"logo_png": "img/logox128.png",
|
||||||
|
"logo_png_xxl": "img/logox1024.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
71
assets/img/logo.svg
Normal file
71
assets/img/logo.svg
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="logo.svg"
|
||||||
|
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
|
||||||
|
inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox128.png"
|
||||||
|
inkscape:export-xdpi="512"
|
||||||
|
inkscape:export-ydpi="512">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="2560"
|
||||||
|
inkscape:window-height="1381"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="45.254834"
|
||||||
|
inkscape:cx="9.0192696"
|
||||||
|
inkscape:cy="11.978294"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg6">
|
||||||
|
<inkscape:grid
|
||||||
|
spacingx="0.5"
|
||||||
|
spacingy="0.5"
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4542" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00766c;fill-opacity:1;fill-rule:nonzero;stroke:#00766c;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 4.6020263,4.6020261 c -4.08077722,4.0820101 -4.08077722,10.7139369 0,14.7959479 m 0,0 0.6656889,-0.665689 c -3.7210992,-3.722224 -3.7210992,-9.7423466 0,-13.4645699 L 4.6020263,4.6020261 m 14.7959477,0 -0.665689,0.665689 c 3.721099,3.7222233 3.721099,9.7423459 0,13.4645699 l 0.665689,0.665689 m 0,0 c 4.080777,-4.082011 4.080777,-10.7139378 0,-14.7959479 M 8.0959735,15.904026 c -2.1644289,-2.162022 -2.1644289,-5.655225 0,-7.8172472 m 0,0 L 7.4302847,7.419251 c -2.5246945,2.5218873 -2.5246945,6.628577 0,9.150465 l 0.6656888,-0.66569 M 15.904026,8.0959736 c 2.164429,2.1620214 2.164429,5.6552244 0,7.8172474 m 0,0 0.66569,0.667527 c 2.524693,-2.521887 2.524693,-6.6285761 0,-9.1504633 l -0.66569,0.6656889"
|
||||||
|
id="path4"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccccccccccccccccccc" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/img/logox1024.png
Normal file
BIN
assets/img/logox1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/img/logox128.png
Normal file
BIN
assets/img/logox128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
6
assets/js/app.js
Normal file
6
assets/js/app.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import './external_links';
|
||||||
|
import './message_icons';
|
||||||
|
|
||||||
|
import '../sass/app.scss';
|
||||||
|
|
||||||
|
console.log('Hello world!');
|
||||||
9
assets/js/external_links.js
Normal file
9
assets/js/external_links.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import feather from "feather-icons";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('a[target="_blank"]').forEach(el => {
|
||||||
|
el.innerHTML += `<i data-feather="external-link"></i>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
feather.replace();
|
||||||
|
});
|
||||||
21
assets/js/message_icons.js
Normal file
21
assets/js/message_icons.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import feather from "feather-icons";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const messageTypeToIcon = {
|
||||||
|
info: 'info',
|
||||||
|
success: 'check',
|
||||||
|
warning: 'alert-triangle',
|
||||||
|
error: 'x-circle',
|
||||||
|
question: 'help-circle',
|
||||||
|
};
|
||||||
|
document.querySelectorAll('.message').forEach(el => {
|
||||||
|
const type = el.dataset['type'];
|
||||||
|
const icon = el.querySelector('.icon');
|
||||||
|
const svgContainer = document.createElement('div');
|
||||||
|
svgContainer.innerHTML = feather.icons[messageTypeToIcon[type]].toSvg();
|
||||||
|
el.insertBefore(svgContainer.firstChild, icon);
|
||||||
|
icon.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
feather.replace();
|
||||||
|
});
|
||||||
81
assets/sass/_fonts.scss
Normal file
81
assets/sass/_fonts.scss
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5iU1EQVg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5jU1EQVg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cceyI9tScg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5iU1EQVg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5jU1EQVg.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Nunito Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
23
assets/sass/_vars.scss
Normal file
23
assets/sass/_vars.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
$primary: #1e2932;
|
||||||
|
$primaryForeground: #f0f0f0;
|
||||||
|
$secondary: #00766c;
|
||||||
|
$secondaryForeground: $primaryForeground;
|
||||||
|
|
||||||
|
$backgroundColor: $primary;
|
||||||
|
$defaultTextColor: $primaryForeground;
|
||||||
|
|
||||||
|
$info: #49fb;
|
||||||
|
$infoText: darken($info, 42%);
|
||||||
|
$infoColor: desaturate($infoText, 50%);
|
||||||
|
|
||||||
|
$success: #5f5b;
|
||||||
|
$successText: darken($success, 45%);
|
||||||
|
$successColor: desaturate($successText, 50%);
|
||||||
|
|
||||||
|
$warning: #fc0b;
|
||||||
|
$warningText: darken($warning, 30%);
|
||||||
|
$warningColor: desaturate($warningText, 50%);
|
||||||
|
|
||||||
|
$error: #f00b;
|
||||||
|
$errorText: darken($error, 30%);
|
||||||
|
$errorColor: desaturate($errorText, 50%);
|
||||||
1
assets/sass/app.scss
Normal file
1
assets/sass/app.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "layout";
|
||||||
90
assets/sass/error.scss
Normal file
90
assets/sass/error.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@import "layout";
|
||||||
|
|
||||||
|
header, footer {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-instructions {
|
||||||
|
margin-top: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "Oops";
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
font-size: #{'min(50vh, 40vw)'};
|
||||||
|
opacity: 0.025;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
color: $defaultTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background-image: url(../img/logo.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 64px;
|
||||||
|
|
||||||
|
opacity: 0.075;
|
||||||
|
filter: contrast(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
512
assets/sass/layout.scss
Normal file
512
assets/sass/layout.scss
Normal file
@ -0,0 +1,512 @@
|
|||||||
|
@import "vars";
|
||||||
|
@import 'fonts';
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: $defaultTextColor;
|
||||||
|
background-color: $backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
$headerHeight: 64px;
|
||||||
|
height: $headerHeight;
|
||||||
|
line-height: $headerHeight;
|
||||||
|
|
||||||
|
$headerBackground: darken($primary, 1.75%);
|
||||||
|
background-color: $headerBackground;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
padding: 0 24px 0 16px;
|
||||||
|
font-size: 32px;
|
||||||
|
color: $defaultTextColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($defaultTextColor, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $headerHeight;
|
||||||
|
height: $headerHeight;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
a, span {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 24px;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 24px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: #fff1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: darken($primary, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
& + p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, h4 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > h2, .panel > h2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
content: "";
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 32px;
|
||||||
|
height: 0;
|
||||||
|
border-bottom: 1px solid $defaultTextColor;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section > hr, .panel > hr {
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid $defaultTextColor;
|
||||||
|
opacity: 0.2;
|
||||||
|
|
||||||
|
margin: 8px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $secondary;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($secondary, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feather.feather-external-link {
|
||||||
|
--icon-size: 16px;
|
||||||
|
margin-left: 4px;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.form-field {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 16px auto;
|
||||||
|
|
||||||
|
label {
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
top: 20px;
|
||||||
|
user-select: none;
|
||||||
|
font-size: 16px;
|
||||||
|
opacity: 0.75;
|
||||||
|
|
||||||
|
transition-property: top, font-size;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, .input-group {
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 2px solid #0008;
|
||||||
|
color: $defaultTextColor;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:focus, &:not([value=""]) {
|
||||||
|
~ label {
|
||||||
|
top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, .form-display {
|
||||||
|
display: block;
|
||||||
|
padding: 32px 8px 8px 8px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .feather {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
right: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
|
||||||
|
transition: transform 150ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Temporary
|
||||||
|
&:focus + .feather {
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=color] {
|
||||||
|
height: calc(32px + 8px + 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inline {
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
text-align: left;
|
||||||
|
width: min-content;
|
||||||
|
height: min-content;
|
||||||
|
|
||||||
|
& ~ label {
|
||||||
|
position: static;
|
||||||
|
display: inline;
|
||||||
|
padding-left: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 24px;
|
||||||
|
padding-top: 8px;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
> input + * {
|
||||||
|
position: absolute;
|
||||||
|
top: 32px;
|
||||||
|
right: 28px;
|
||||||
|
user-select: none;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error, .hint {
|
||||||
|
padding: 2px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: $error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button {
|
||||||
|
display: inline-flex;
|
||||||
|
margin: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bolder;
|
||||||
|
|
||||||
|
line-height: 16px;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&, &.primary {
|
||||||
|
color: $primaryForeground;
|
||||||
|
background-color: $secondary;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($secondary, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info {
|
||||||
|
background-color: $infoColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: $successColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: $warningColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error, &.danger {
|
||||||
|
background-color: $errorColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($errorColor, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $primaryForeground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid #ffffff17;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #ffffff08;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #ffffff18;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---
|
||||||
|
// --- Layout helpers
|
||||||
|
// ---
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 16px;
|
||||||
|
max-width: 632px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
margin: 16px 0;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: rgba(255, 255, 255, 0.03);
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 16px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-panel {
|
||||||
|
margin: 32px -18px;
|
||||||
|
padding: 1px 16px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
input, select, .input-group {
|
||||||
|
border-radius: 5px !important;
|
||||||
|
border-width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ---
|
||||||
|
// --- Feather
|
||||||
|
// ---
|
||||||
|
.feather {
|
||||||
|
flex-shrink: 0;
|
||||||
|
--icon-size: 24px;
|
||||||
|
width: var(--icon-size);
|
||||||
|
height: var(--icon-size);
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: square;
|
||||||
|
stroke-linejoin: miter;
|
||||||
|
fill: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---
|
||||||
|
// --- Helper classes
|
||||||
|
// ---
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 24px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(&-discreet) {
|
||||||
|
background-color: #fff5;
|
||||||
|
|
||||||
|
&[data-type=info], &[data-type=question] {
|
||||||
|
background-color: $infoColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-type=success] {
|
||||||
|
background-color: $successColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-type=warning] {
|
||||||
|
background-color: $warningColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-type=error] {
|
||||||
|
background-color: $errorColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-discreet {
|
||||||
|
opacity: 0.75;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages .message:not(:last-child) {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > .messages:first-child {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyable-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 8px;
|
||||||
|
|
||||||
|
background-color: darken($backgroundColor, 2%);
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
.feather {
|
||||||
|
--icon-size: 20px;
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
35
package.json
35
package.json
@ -2,19 +2,48 @@
|
|||||||
"name": "aldap",
|
"name": "aldap",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"description": "Authentication LDAP server",
|
"description": "Authentication LDAP server",
|
||||||
"main": "index.js",
|
|
||||||
"repository": "git@gitlab.com:ArisuOngaku/aldap.git",
|
"repository": "git@gitlab.com:ArisuOngaku/aldap.git",
|
||||||
"author": "Alice Gaudon <alice@gaudon.pro>",
|
"author": "Alice Gaudon <alice@gaudon.pro>",
|
||||||
"license": "MIT",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"main": "dist/main.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "jest --verbose --runInBand",
|
||||||
|
"dist-webpack": "webpack --mode production",
|
||||||
|
"dist": "tsc && npm run dist-webpack",
|
||||||
|
"dev": "concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon dist/main.js\" \"webpack --watch --mode development\" \"maildev\"",
|
||||||
|
"start": "yarn dist && node dist/main.js"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.9.0",
|
||||||
|
"@babel/preset-env": "^7.9.5",
|
||||||
|
"@types/config": "^0.0.36",
|
||||||
|
"@types/express": "^4.17.6",
|
||||||
"@types/node": "^13.13.2",
|
"@types/node": "^13.13.2",
|
||||||
|
"babel-loader": "^8.1.0",
|
||||||
|
"concurrently": "^5.1.0",
|
||||||
|
"css-loader": "^3.5.2",
|
||||||
|
"feather-icons": "^4.28.0",
|
||||||
|
"file-loader": "^6.0.0",
|
||||||
|
"imagemin": "^7.0.1",
|
||||||
|
"imagemin-gifsicle": "^7.0.0",
|
||||||
|
"imagemin-mozjpeg": "^8.0.0",
|
||||||
|
"imagemin-pngquant": "^8.0.0",
|
||||||
|
"imagemin-svgo": "^7.1.0",
|
||||||
|
"img-loader": "^3.0.1",
|
||||||
"jest": "^25.4.0",
|
"jest": "^25.4.0",
|
||||||
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
|
"node-sass": "^4.14.0",
|
||||||
|
"nodemon": "^2.0.3",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
"ts-jest": "^25.4.0",
|
"ts-jest": "^25.4.0",
|
||||||
"typescript": "^3.8.3",
|
"typescript": "^3.8.3",
|
||||||
|
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||||
|
"webpack": "^4.43.0",
|
||||||
|
"webpack-cli": "^3.3.11",
|
||||||
"wms-core": "^0.2.0"
|
"wms-core": "^0.2.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"config": "^3.3.1"
|
"config": "^3.3.1",
|
||||||
|
"express": "^4.17.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
0
public/.gitkeep
Normal file
0
public/.gitkeep
Normal file
86
webpack.config.js
Normal file
86
webpack.config.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
|
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||||
|
|
||||||
|
const dev = process.env.NODE_ENV === 'development';
|
||||||
|
|
||||||
|
const userConfig = require('./assets/config.json');
|
||||||
|
for (const b in userConfig.bundles) {
|
||||||
|
if (userConfig.bundles.hasOwnProperty(b)) {
|
||||||
|
userConfig.bundles[b] = `./assets/${userConfig.bundles[b]}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
entry: userConfig.bundles,
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'public/js'),
|
||||||
|
filename: '[name].js'
|
||||||
|
},
|
||||||
|
devtool: dev ? 'eval-source-map' : undefined,
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.js$/i,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: ['@babel/preset-env'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: MiniCssExtractPlugin.loader,
|
||||||
|
options: {
|
||||||
|
publicPath: '/',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader',
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff2?|eot|ttf|otf)$/i,
|
||||||
|
use: 'file-loader?name=../fonts/[name].[ext]',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpe?g|gif|svg)$/i,
|
||||||
|
use: [
|
||||||
|
'file-loader?name=../img/[name].[ext]',
|
||||||
|
{
|
||||||
|
loader: 'img-loader',
|
||||||
|
options: {
|
||||||
|
enabled: !dev,
|
||||||
|
plugins: [
|
||||||
|
require('imagemin-gifsicle')({}),
|
||||||
|
require('imagemin-mozjpeg')({}),
|
||||||
|
require('imagemin-pngquant')({}),
|
||||||
|
require('imagemin-svgo')({}),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '../css/[name].css',
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!dev) {
|
||||||
|
config.optimization = {
|
||||||
|
minimizer: [
|
||||||
|
new UglifyJSPlugin(),
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
Loading…
Reference in New Issue
Block a user