Some UI improvements

[steveiliop56]

Hello!

I really like the overall idea and most of the UI of haven but I have some recommendations to make it even better.

1. On mobile devices the menu buttons are like this:
   
   It would be better to have a hamburger menu.
2. In the new post page:
   
   Firstly it would be nicer for text box to be the same width as the choose a file div bellow it. Also the choose a file button would be better it it was styled. Lastly I believe the markdown preview would be better if it was tabbed so 2 tabs one for the editor and one for the preview.
3. In the users tab:
   
   The table doesn't look that nice the way the text is cut. I can't think of a design idea right now lol.

If I have time I will open a pull request to fix these things. Please ask me if you have any questions about my ideas.

[mawise]

Thanks for the suggestions and offering to help! I'd be happy to consider PRs for these things. A couple considerations that I try to maintain for Haven: - Avoid Javascript if possible, and ensure we fail gracefully if the end-user doesn't enable javascript. This is particularly relevant for the hamburger menu which can probably be built only with CSS. - Haven allows admins to customize their CSS, so stick to the pattern of color variables defined. If we want to add more color variables, make sure we define the dark mode variable, and the help doc here: https://github.com/havenweb/haven/blob/master/app/views/static/themes.html.erb

…

On Fri, Aug 2, 2024 at 4:42 AM Stavros ***@***.***> wrote: Hello! I really like the overall idea and most of the UI of haven but I have some recommendations to make it even better. 1. On mobile devices the menu buttons are like this: Screenshot_20240802_123229_Chrome.jpg (view on web) <https://github.com/user-attachments/assets/f066c47e-02cc-47aa-a359-385f4919e7a1> It would be better to have a hamburger menu. 2. In the new post page: Screenshot_20240802_123248_Chrome.jpg (view on web) <https://github.com/user-attachments/assets/2c3557a7-1295-4c20-a550-2183184106b5> Firstly it would be nicer for text box to be the same width as the choose a file div bellow it. Also the choose a file button would be better it it was styled. Lastly I believe the markdown preview would be better if it was tabbed so 2 tabs one for the editor and one for the preview. 3. In the users tab: Screenshot_20240802_123306_Chrome.jpg (view on web) <https://github.com/user-attachments/assets/057d399e-1afb-4f86-b496-550cf0c2fe60> The table doesn't look that nice the way the text is cut. I can't think of a design idea right now lol. If I have time I will open a pull request to fix these things. Please ask me if you have any questions about my ideas. — Reply to this email directly, view it on GitHub <#112>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2DVLWZGGCT4G4H7JCZC33ZPNH75AVCNFSM6AAAAABL4GQYCOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2DINJVGIYDIMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mawise]

Hamburger nav-bar implemented in #159