Fix/responsive UI and navigation - Githubissues

rwth-acis / RequirementsBazaar-WebFrontend

Requirements Bazaar, the continuous innovation platform. Repository of the single-page Web application using Web Components, made with love in Aachen, Germany.

https://requirements-bazaar.org

Other

14 stars 5 forks source link

Fix/responsive UI and navigation #260

Closed fxjordan closed 2 years ago

fxjordan commented 2 years ago

Fixes:

252
262
228

Changes:

completely new header and navigation menu
responsive on all screen sizes

fxjordan commented 2 years ago

First, problems should be fixed with the new header and navigation menu. However, there are still open problems:

[x] ReqBaz Icon is not displayed after interacting with menu
[x] Activity tracker should be a separate full-screen page on mobile devices (overlay makes no sense on such small screens)
[x] The Website can be scrolled horizontally on some mobile devices. Width should be 100% of viewport by default and no horizontal scrolling should be possible
[x] Responsive CSS seems to behave different in Chrome developer mode (mobile screen size) than in Android Chrome app

fxjordan commented 2 years ago

Horizontal scrolling problem only occurs on the landing page because some elements exceed the maximum width.

fxjordan commented 2 years ago

More Tasks for responsive mobile UI:

[x] Display Tabs ("Active Requirements", "Compelted...") and Action Buttons ("follow", "..."-menu etc.) underneath each other
[x] "All Requirements" and "Project Members" tabs, not visible on mobile (hidden by other action buttons)
[x] Hide some buttons on a requirement card on mobile (and move to "..." menu)
[x] Development timeline is cluttered on mobile (maybe only display current state)
[x] Breadcrumb looks bad on screen with small width (especially with longer project, category, and requirement names). Long text is wrapped in multiple lines and navigation bar needs too much space
[x] Navigation menu should close when clicking ReqBaz logo (for navigation to landing page or user home)
[x] Project member List is not responsive

fxjordan commented 2 years ago

More tasks:

[x] "done" label is not displayed properly on mobile devices
[x] action buttons having different sizes (and multi-line text) when connected to GitHub + release available (better place in multiple lines)
[x] developer and follower lists should span whole screen on small width devices