Theme, Layout, & UI - Githubissues

germannp / acbeo.ch

Mobile-first web site for organizing aerobatic paragliding trainings :parachute:

https://acbeo.ch

0 stars 0 forks source link

Theme, Layout, & UI #2

Open germannp opened 2 years ago

germannp commented 2 years ago

We have this beautiful vertical logo (Highres):

We should somehow incorporate it and create a theme around it!

Also, the layout and forms overall wouldn't mind some love :-)

Minor points:

[ ] It would be amazing, if the dropdown menu for Trainings was open when the whole menu is collapsed into a hamburger
[x] Currently, some buttons are in d-grid, others not; we should have a concept there 🤔
[x] pilot_update.html should include sidebar.html and arrange cards side by side on large screens
[ ] Green success-button looks ugly next to the ACBeo green normal buttons

germannp commented 2 years ago

Having two buttons to save an update to a signup is not intuitive:

A checkbox instead would probably be best, still giving the pilot an option to justify the cancellation in the comment.

germannp commented 2 years ago

https://github.com/jrief/django-sass-processor is probably nice when customizing Boostrap :-)

germannp commented 2 years ago

Turns out all Python packages for SASS are built around libsass, which is no longer supported. So it might be wiser, to use Dart SASS directly, using sass --watch shouldn't be much of a bigger deal.

germannp commented 2 years ago

Some mockups https://www.figma.com/file/ibzh2vyWCgAeHpJy6npigx/acbeo.ch?node-id=0%3A1

germannp commented 2 years ago

I put the hamburger menu to the bottom, so I could organize a training with my left thumb only, in case my right hand is occupied with a beer 🤷 However, some users would strongly prefer to have it at the top.

germannp commented 2 years ago

The icons could also be better:

germannp commented 1 year ago

Some toying around with a square logo top right:

        <header class="py-3 mb-4 bg-primary text-white">
            <div class="container">
                <div class="row">
                    <div class="col align-self-end">
                        <h1>{% block headline %} {% endblock headline %}</h1>
                    </div>
                    <div class="col-3 text-end">
                        <svg class="bd-placeholder-img rounded img-fluid" width="200" height="200"
                            xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200"
                            preserveAspectRatio="xMidYMid slice" focusable="false">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
                                dy=".3em">200x200</text>
                        </svg>
                    </div>
                </div>
            </div>
        </header>