WebpackDev server, fixes to carousel and fontello merge
This commit is contained in:
Linux User
commit
8de1b46557
|
|
@ -1,3 +1,8 @@
|
|||
#Own
|
||||
src/res/fontello/css
|
||||
src/res/fontello/font
|
||||
|
||||
#Github gitignore template
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -4,26 +4,29 @@
|
|||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch",
|
||||
"server": "webpack-dev-server"
|
||||
"server": "webpack-dev-server",
|
||||
"install-fontello":"fontello-cli install --config ./src/res/fontello/config.json --css src/res/fontello/css/ --font src/res/fontello/font",
|
||||
"postinstall": "yarn install-fontello"
|
||||
},
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.0.1",
|
||||
"@typescript-eslint/parser": "^4.0.1",
|
||||
"css-loader": "^4.2.2",
|
||||
"css-loader": "^4.3.0",
|
||||
"eslint": "^7.8.1",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
"extract-loader": "^5.1.0",
|
||||
"file-loader": "^6.1.0",
|
||||
"fontello-cli": "^0.5.0",
|
||||
"html-loader": "^1.3.0",
|
||||
"html-webpack-plugin": "^4.4.1",
|
||||
"posthtml-extend": "^0.5.0",
|
||||
"posthtml-loader": "^2.0.1",
|
||||
"prettier": "^2.1.1",
|
||||
"raw-loader": "^4.0.1",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^10.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"ts-loader": "^8.0.3",
|
||||
"typescript": "^4.0.2",
|
||||
"webpack": "^4.44.1",
|
||||
|
|
@ -31,7 +34,5 @@
|
|||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.0",
|
||||
"resolve-cwd": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use "./color_scheme";
|
||||
@use "./res/fontello/css/fontello";
|
||||
|
||||
html {
|
||||
border: 0px;
|
||||
|
|
|
|||
51
src/index.ts
51
src/index.ts
|
|
@ -34,11 +34,11 @@ class Carousel extends HTMLElement {
|
|||
|
||||
connectedCallback() {
|
||||
this.shadow.innerHTML = html`
|
||||
<button class="next">${"<"}</button>
|
||||
<button class="next icon-left-open"></button>
|
||||
<div class="container">
|
||||
<img src="${this.items.next().value.img}" />
|
||||
</div>
|
||||
<button class="prev">${">"}</button>
|
||||
<button class="prev icon-right-open"></button>
|
||||
<style>
|
||||
${Carousel.css}
|
||||
</style>
|
||||
|
|
@ -152,14 +152,55 @@ class Carousel extends HTMLElement {
|
|||
}
|
||||
|
||||
button {
|
||||
border: 1px solid var(--background-opposite-2);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: var(--background-primary-2);
|
||||
height: 2.2em;
|
||||
width: 2.2em;
|
||||
background-color: var(--background-opposite-4);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
color: var(--text-color-3);
|
||||
color: var(--background-primary-3);
|
||||
padding: 0;
|
||||
margin: -20%;
|
||||
}
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: never;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-left-open:before { content: '\\e800'; } /* '' */
|
||||
.icon-right-open:before { content: '\\e801'; } /* '' */
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "",
|
||||
"css_prefix_text": "icon-",
|
||||
"css_use_suffix": false,
|
||||
"hinting": true,
|
||||
"units_per_em": 1000,
|
||||
"ascent": 850,
|
||||
"glyphs": [
|
||||
{
|
||||
"uid": "d870630ff8f81e6de3958ecaeac532f2",
|
||||
"css": "left-open",
|
||||
"code": 59392,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "399ef63b1e23ab1b761dfbb5591fa4da",
|
||||
"css": "right-open",
|
||||
"code": 59393,
|
||||
"src": "fontawesome"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -23,11 +23,30 @@ module.exports = {
|
|||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
options: { name: "[name].css" },
|
||||
options: {
|
||||
name: "[name].css",
|
||||
},
|
||||
},
|
||||
"extract-loader",
|
||||
"css-loader",
|
||||
"resolve-url-loader",
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "[name].[ext]",
|
||||
outputPath: "fontello/",
|
||||
esModule: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: [
|
||||
|
|
@ -37,20 +56,18 @@ module.exports = {
|
|||
options: {
|
||||
plugins: [
|
||||
/* PostHTML Plugins */
|
||||
require("posthtml-extend")({ root: src }),
|
||||
require("posthtml-extend")({
|
||||
root: src,
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: "svg-inline-loader",
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".js", ".svg"],
|
||||
extensions: [".tsx", ".ts", ".js"],
|
||||
},
|
||||
output: {
|
||||
filename: "bundle.js",
|
||||
|
|
|
|||
Loading…
Reference in New Issue