Presently, Datascanner's main web GUIs are the admin and report modules. The source code for both resides in src/os2datascanner/projects
Markup is mostly generated using Django templates.
The README.md states "please use only SCSS". An effort has been made to establish SASS as the guiding workflow for CSS builds but it is mixed with other approaches. Amongst others:
- CSS built from SASS and prefixed/minified with PostCSS (
bundle.cssvia Webpack) - CSS imported directly or from 3rd parties
- Use of CSS custom properties (CSS vars) in stead of SASS variables
Some JS is packaged into bundle.js/bundle.min.js via Webpack.
Other scripts, like jQuery, are just added via script tags.
Admin app uses jQuery-3.4.1, whereas Report app uses jQuery-3.5.0.
Admin app also includes Bootstrap Javascript but without the accompanying bootstrap.css
- Package management npm
- Old browser support
There are two approaches for supporting older browsers:
- Using Babel
- Using IE conditional comments in
<head>
Admin and Report app use the "Inter" font.
There are several icon styles and frameworks in use:
- Google Material Icons
Admin app links from base.html: https://fonts.googleapis.com/icon?family=Material+Icons
Report app refers to local font files in
_vars.scss. - Admin app has Glyphicons. These could be related to a Bootstrap implementation.
- Both Report and Admin apps hide a set of SVG icon files in
/templates/components/svg-icons/folder. - A small set of SVG icon files are available in report app and admin app static folders. (/static/src/svg)
Webpack is used for building frontend assets.
Note: Admin app has no apparant organization of static files.
- Django template files src/os2datascanner/projects/admin/adminapp/templates
- Templates that load JS/CSS/etc src/os2datascanner/projects/admin/adminapp/templates/partials/base.html
- Position of
package.jsonand conf files: src/os2datascanner/projects/admin/adminapp/package.json src/os2datascanner/projects/admin/adminapp/postcss.config.js src/os2datascanner/projects/admin/adminapp/webpack.dev.js src/os2datascanner/projects/admin/adminapp/webpack.prod.js - Postion of JS & (S)CSS source files src/os2datascanner/projects/admin/adminapp/static/src/
- Style files loaded in browser bundle.css - built from SASS files in src
- Javascript files loaded in browser bootstrap.js jquery-3.4.1.slim.min.js jquery.modal.min.js main.js svgxuse.js - for IE svg features
- Bundle.js templates/os2datascanner/scanners.html and templates/os2datascanner/rules.html and templates/os2datascanner/scanner_askrun.html and templates/designguide.html depend on static/dist/bundle.js - must be built first
- Django template files src/os2datascanner/projects/report/reportapp/templates
- Templates that load JS/CSS/etc src/os2datascanner/projects/report/reportapp/templates/partials/header.html
- Position of
package.jsonand conf files: src/os2datascanner/projects/report/reportapp/package.json src/os2datascanner/projects/report/reportapp/postcss.config.js src/os2datascanner/projects/report/reportapp/webpack.dev.js src/os2datascanner/projects/report/reportapp/webpack.prod.js src/os2datascanner/projects/report/reportapp/.browserslistrc Only exists in reportapp! - Postion of JS & (S)CSS source files src/os2datascanner/projects/report/reportapp/static/src/
- Style files loaded in browser bundle.css - built from SASS files in src
- Javascript files loaded in browser bundle.js - built from JS files in src jQuery-3.5.0.js clipboard.js
- Statistics templates/statistics.html depends on static/3rdparty/chart-2.9.4.min.js and static/3rdparty/chartjs-plugin-datalabels.js
Decisions to make:
- IE11-support by Babel/bundling vs. IE11 by old school coding (no bundling)?
- JS bundling vs decentralised JS (see above)?
One hybrid approach includes both bundling and decentralized code:
- Decide on what is core JS/CSS. Bundle only that. Embed it on every page (base|index.html). Adding eventlisteners to certain elements is probably not core.
- Load component-specific JS/CSS from their specific templates. Use script/styling/extra_head blocks. Most eventlisteners go here.
- Put component-specific JS/CSS/SCSS with related templates (if possible)
- Decide on what icon system to use. Use only that.