Frontend
The Arctic User Interface is based on Bootstrap 4 and includes extra UI elements such as a responsive sidebar, float label fields and customizable colors with CSS properties.
The Arctic build already includes precompiled frontend assets, so the frontend tooling mentioned in this document is only needed if you want to do frontend development for the Django Arctic project or need to create a custom UI based on a copy of the Arctic setup and bypass the default setup on your own project.
Requirements
Setup
In the terminal:
- In the Arctic project go to
arctic/static/arctic
- Install all dependencies:
npm install
- Set gulp to watch all file changes
gulp
File structure
All development should be done in the src
folder, do not edit files in dist
or add any dependencies by hand in node_modules
!
Before creating a pull request
Because the project contains all the compiled files, if there are any changes
to the css or js the command gulp build --production
should be run before
the last commit, this will guarantee that the arctic.css and arctic.js are minified
Non Bootstrap libraries
Datapicker and Selectize are initialed in the widgets.js
file
Sortable obeys the following rules:
Required html data attributes:
* data-sortable - initiates sortable)
* data-row - defines a row to sort
Optional
* data-sort-handle - to specify a specific dragging handle
* data-sort-placeholder - field to save position of row
* data-delete-handle - delete button
* data-delete-placeholder - field to check as delete
Custom Events
-
Events
- Event name:
arcticImageAdded
- Event data:
input html element
- Occurs after selecting an image on an Image field (similar to the JS change event on a file input)
- Event data:
- Event name:
arcticImageRemoved
- Event data:
input html element
- Occurs after removing an image from a Image field
- Event data:
Events can be listened with
document.addEventListener('eventname', function (e) { //code to execute //access the data with console.log(e.detail) }, false);
- Event name:
Javascript widgets (all of them are initialised on DOM load event)
startSelectize()
- Starts simple selectize
startSelectizeMultiple()
- Starts multiple selectize
startSelectizeAutocomplete()
- Starts autocomplete selectize
startAllSelectizes()
- Starts all 3 selectizes
startDatepicker()
- Starts datepicker
startTimePicker()
- Starts timepicker
startDateTimePicker()
- Starts date and time picker
startAllPickers()
- Starts all 3 pickers
betterFile()
- Starts better file input for image fields
startAllWidgets()
- Starts all of the above
Show/Hide loading icon
show_artic_loader()
- Shows a loading icon (if none is already there) in the center of the screen
hide_artic_loader()
- Hides loading icon