Feature/ui

[tpraxl]

Provide basic UI

This is my proposal for the UI Frame / some basic UI elements.

The main point of this PR is the application frame with a top / global navigation bar, a main-navigation (hamburger / left side), a shortcut bar (bottom on mobile) and the main content as well as some very basic form styling for the forms already present.

The UI has been tested on Firefox 63, Chrome 71, Android 8 Browser (Noka 5.1), two versions of the iOS Safari (current version and not-so-current version of iPhone 5).

Testing manually

Please test this as a guest as well as authenticated user (see below for reasons why).

To test as authenticated user, you may simply register a user, this user will be automatically logged in (will require confirmation in the future).

Make sure to run yarn && yarn build or yarn && yarn dev before, because the dependencies have changed.

There are multiple layouts for:

• (A) guest
• (B) authenticated / logged in
• (1) mobile view
• (1.1) with limited height
• (1.2) mobile view with some height

The guest (A) will only see the global navigation and the main area. The main-navigation and the shortcut bar is not visible for the guest, as there's no need for a navigation when you're not logged in.

The authenticated user (B) on the mobile view (1) will see an additional bottom shortcut bar that provides quick access to the most common links.

The bottom shortcut bar also provides a hamburger icon that toggles the full navigation.

If there's enough viewport height (1.2), then the bottom bar shortcut links will wrap into multiple rows for easier access. If the viewport height is limited (1.1), then the bottom bar shortcut links will not wrap. They can be accessed by swiping (actually scrolling) horizontally.

I found this UI to be quite accessible during the tests on desktop, Android- and iPhone-Phones. It evolved during those tests.

What else has happened?

• excluded generated files from git version control (css / js / etc artifacts)
• removed unneeded files (e.g. svg for laravel standard error pages)
• prepared a living styleguide (really, nothing there right now, it's so basic, that I wasn't sure if I had better excluded it) that will only be accessible in non-productive environments
• added purgecss that performs css treeshaking
• changed require statements to the more standard import statements in ecma script / js
• added basic touchscreen detection (not 100% reliable, requires reload in simulators)
• added font awesome for easy-to-use common icons
• cleaned up default forms (removed bootstrap)

Feedback

Feedback, code review & suggestions for improvements are very welcome.

[tpraxl]

Sehe gerade, dass ich versehentlich den PR auf englisch gestellt habe, obwohl wir ja eigentlich deutsch vereinbart hatten. Anyway: Ich würde mich freuen, wenn Du Dir das bei Gelegenheit mal ansehen könntest. Danke.