Commit dd8d5463 authored by Matija Obreza's avatar Matija Obreza
Browse files

CSS: Bundle Genesys UI CSS

parent 823f0a4b
...@@ -11,10 +11,13 @@ The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays dat ...@@ -11,10 +11,13 @@ The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays dat
Add Javascript dependencies to your page: Add Javascript dependencies to your page:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0/dist/genesys-deps.js"></script> <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0/dist/genesys-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-ui.js"></script>
<!-- Optionally use bootstrap CSS -->
<!-- Recommended: Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<!-- Genesys UI CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-deps.css" />
``` ```
Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`: Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`:
......
...@@ -17,7 +17,8 @@ module.exports = { ...@@ -17,7 +17,8 @@ module.exports = {
// chunkFilename: '[name].[hash].js', // chunkFilename: '[name].[hash].js',
library: 'genesys', library: 'genesys',
libraryTarget: 'umd', libraryTarget: 'umd',
// globalObject: '', globalObject: 'this',
crossOriginLoading: false,
}, },
resolve: { resolve: {
...@@ -67,15 +68,6 @@ module.exports = { ...@@ -67,15 +68,6 @@ module.exports = {
modules: false, modules: false,
}, },
}, },
'resolve-url-loader', {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: ['node_modules'],
},
},
},
], ],
}, },
], ],
...@@ -84,8 +76,8 @@ module.exports = { ...@@ -84,8 +76,8 @@ module.exports = {
plugins: [ plugins: [
// Keep CSS separate // Keep CSS separate
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: '[name].[hash].css', filename: 'genesys-[name].css',
chunkFilename: '[name].[hash].css', // chunkFilename: 'genesys-[name].css',
}), }),
new CopyWebpackPlugin({ new CopyWebpackPlugin({
...@@ -102,10 +94,19 @@ module.exports = { ...@@ -102,10 +94,19 @@ module.exports = {
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
cacheGroups: { cacheGroups: {
styles: {
name: 'deps',
test: /\.css$/,
chunks: 'all',
enforce: true,
reuseExistingChunk: true,
priority: 10, // make sure all CSS is grouped in this chunk
},
deps: { deps: {
test: /[\\/]node_modules[\\/]/,
name: 'deps', name: 'deps',
chunks: 'all' test: /[\\/]node_modules[\\/]/,
chunks: 'all',
priority: 1,
}, },
}, },
}, },
......
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" /> <meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<!-- Genesys UI CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-deps.css" />
</head> </head>
<body> <body>
...@@ -55,8 +57,8 @@ ...@@ -55,8 +57,8 @@
felis nec auctor ultrices.</p> felis nec auctor ultrices.</p>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0/dist/genesys-deps.js"></script> <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0/dist/genesys-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0/dist/genesys-ui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// Detect language from query string // Detect language from query string
const queryLang = document.location.search && document.location.search.substr(1) || undefined; const queryLang = document.location.search && document.location.search.substr(1) || undefined;
......
tr.table-historical { tr.table-historical {
opacity: 50%; opacity: .5;
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment