Styling and SASS¶
All styling source files are located in
The files are split in to the original (if slightly modified) AdminLTE files and a set a of SASS modules.
Webpack handles the compilation of SCSS/SASS to CSS.
The project system previously used Gulp as so there may still be references to this.
The project system uses ECMA6(2015) along with VueJS 2.x.
To transpile this in to browser compatible ES5 Webpack is used to handle this.
To make development easier, Node, NPM and gulp are pre-installed on the container.
The project system uses VueJS to handle most of the complicated frontend work. This includes the clocking window and the clocking display at the top of every page.
It is recommended to install the Chrome dev tools plugin for VueJS
Below are some of the things you will need to learn about to be able to work with the Project System components.
It is recommended to fill in the blanks as you go along, reading all of the documentation in one chunk will not be as useful.
The project system uses VueJS components almost exclusively to allow for easy reuse and refactor in future. We will not cover components in massive detail here but you can read about the relative topics below to learn about them.
The components registration file is located in
All components are contained in
.vue files, these files may also depend on standard JS classes and node dependencies.
Vue files should not contain styling information, use the SASS/SCSS files instead.
Compiling SASS, ES6 and Vue¶
All frontend changes need compiling down (this does not include template changes in Blade). The build commands use Webpack.
Below are the available commands for compiling.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Compilation and Development¶
When developing it is recommended to use
hot when working with JS exclusively.
You can then leave the compiler in the background, be sure to check it for any compilation errors.
The clocking indicator is displayed at the top of every page and keeps track of when a user is clocked in or not, how long they are clocked in for and how much time has been clocked on to projects. The primary function is to allow users to quickly clock in and out (AJAX) and display the correct metrics for the day.
// Main Component resources/assets/js/components/Clocking/TimeDisplay.vue
The clocking window is one of the core components for the project system. It handles the clocking of developer time against projects and maintains the passage of time.
This works by regularly polling the server in the background at set intervals, this means the clocking window can also operate autonomously without a response from the server if it goes down for some reason.
The component makes heavy use of other classes, be sure to look at these as well when developing. You can use your IDE to locate these files when looking at the primary component.
// Main Component resources/assets/js/components/Clocking/Form.vue