Frontend

Browser Support

We currently only test EvaP with the latest version of Firefox and Chrome. This allows the use of modern features, even if it breaks some older browsers.

Size Support

Only a small set of pages is designed for smaller screen sizes.

Page	xs	sm	md	lg	xl
General	no	no	no	no	yes
student/vote	no	no	yes	yes	yes

Framework

We use Bootstrap as a frontend-framework. Using Bootstrap's components or utilities is preferred over custom styles. Contrary to other third-party vendors, Bootstrap is included as a Git submodule. Other libraries are simply checked into our source.

Stylesheets

Our styles are found as .scss files in static/scss. The modularization is kept at a small level:

• evap.scss is the main entry point and contains mostly imports and general styles for the page.
• _variables.scss and _colors.scss define Bootstrap variables and some custom colors.
• components/ organizes smaller files, each representing a component. The components are the same like in Bootstrap. Adjustments to Bootstrap classes will be found in the matching component. Also, we have some custom components, like _distribution-bar.
• _utilities.scss contains classes which only overwrite a single property. They can be compared with Bootstrap's utilities.
• _adjustments.scss fixes some Bootstrap bugs and modifies smaller third-party vendors.

These are compiled with management.py scss.

Scripting

The typescript directory under static/ts contains typescript sources and tests. These are compiled into Javascript files in the static/js directory with manage.py ts compile.

For newly written code, it is preferred to use Typescript and have no dependency to jQuery.

Testing

There are three modes of frontend testing:

Automated unit tests

These live in static/ts/__tests__/unit and test the code of a single typescript module. As sometimes tests are interested in module parts which are not marked as export, these can be put in a export testable object to directly access the units of interest without annotating too much units with export.

Automated frontend tests

These live in static/ts/__tests__/frontend and test a page with all its client assets. With the help of the puppeteer framework, these tests actually run in a browser to provide a close abstraction layer to an actual user. Before running frontend tests, the page have to be rendered with manage.py ts render_pages. You can also use the rendered pages to troubleshoot problems with a frontend test, by visiting localhost:8000/development/rendered/{fragment}.

Manual frontend tests

If you modify a page which isn’t covered by page tests or you have not enough confidence into them, you still can resort to a manual process. A full manual test would include at least the following points:

• You have checked which pages are affected by your changes (look after uses of the template file name, css classes, or javascript modules)
• You tested in both Firefox and Chrome
• You checked both languages (some words are shorter or longer in the other language which can lead to overflows)
• You tested all screen sizes Even though not all pages need to be fully responsive and look pretty, all pages must be usable.
• You tested in both Linux and Windows