Skip to content
GitLab
Commit dd8d5463 authored by Matija Obreza's avatar Matija Obreza
Browse files

CSS: Bundle Genesys UI CSS

parent 823f0a4b
Hide whitespace changes
Inline Side-by-side
README.md
View file @ dd8d5463
......@@ -11,10 +11,13 @@ The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays dat
Add Javascript dependencies to your page:
```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.0.0/dist/genesys-ui.js"></script>
<!-- Optionally use bootstrap CSS -->
<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.1.0/dist/genesys-ui.js"></script>
<!-- Recommended: Bootstrap 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>`:
......
config/webpack-library.js
View file @ dd8d5463
......@@ -17,7 +17,8 @@ module.exports = {
// chunkFilename: '[name].[hash].js',
library: 'genesys',
libraryTarget: 'umd',
// globalObject: '',
globalObject: 'this',
crossOriginLoading: false,
},
resolve: {
......@@ -67,15 +68,6 @@ module.exports = {
modules: false,
},
},
'resolve-url-loader', {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: ['node_modules'],
},
},
},
],
},
],
......@@ -84,8 +76,8 @@ module.exports = {
plugins: [
// Keep CSS separate
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css',
filename: 'genesys-[name].css',
// chunkFilename: 'genesys-[name].css',
}),
new CopyWebpackPlugin({
......@@ -102,10 +94,19 @@ module.exports = {
splitChunks: {
chunks: 'all',
cacheGroups: {
styles: {
name: 'deps',
test: /\.css$/,
chunks: 'all',
enforce: true,
reuseExistingChunk: true,
priority: 10, // make sure all CSS is grouped in this chunk
},
deps: {
test: /[\\/]node_modules[\\/]/,
name: 'deps',
chunks: 'all'
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
priority: 1,
},
},
},
......
index.html
View file @ dd8d5463
......@@ -8,6 +8,8 @@
<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"
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>
<body>
......@@ -55,8 +57,8 @@
felis nec auctor ultrices.</p>
</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.0.0/dist/genesys-ui.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.1.0/dist/genesys-ui.js"></script>
<script type="text/javascript">
// Detect language from query string
const queryLang = document.location.search && document.location.search.substr(1) || undefined;
......
src/genesys.css
View file @ dd8d5463
tr.table-historical {
opacity: 50%;
opacity: .5;
}
Supports Markdown
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