#258 UI: The topbar doesn't scale properly

Closed
opened 2 weeks ago by kreyren · 5 comments
kreyren commented 2 weeks ago

i find this very annoying on codeberg:

image

As i have to each time resize the browser window to have access to all the buttons.

1. Suggestion

Make the right user part
image

Always visible on desktop view and hide the other buttons

2. Suggestion

Redesign the top-bar to be integrated in the UI i.e:
image

i find this very annoying on codeberg: ![image](/attachments/689100f3-222e-41f1-a12b-2924ee7dd28f) As i have to each time resize the browser window to have access to all the buttons. ### 1. Suggestion Make the right user part ![image](/attachments/9fa8468d-a0c1-483c-ab1a-3d4c519638f7) Always visible on desktop view and hide the other buttons ### 2. Suggestion Redesign the top-bar to be integrated in the UI i.e: ![image](/attachments/3793eddf-497b-43fa-a2d7-c634c619d1bf)
kreyren changed title from The topbar doesn't scale properly to UI: The topbar doesn't scale properly 2 weeks ago
hw commented 1 week ago
Owner

CSS fix to overlap the right hand side on top of the left very welcome! File in question is https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/public/codeberg.css.

CSS fix to overlap the right hand side on top of the left very welcome! File in question is https://codeberg.org/Codeberg/build-deploy-gitea/src/branch/master/etc/gitea/public/codeberg.css.
kreyren commented 1 week ago
Poster

@hw Using

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto !important;
    position: absolute;
    right: 0;
}

Results in

image

So i’ve concluded that this requires a HTML change to define another <div> so that the elements in <div class="ui container" id="navbar"> would scale responsibely based on the width of the windows used in relation to the right stackable menu so i assume that this is a Gitea issue assuming that the same problem is present on the try.gitea.io?

image

@hw Using ```css .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: auto !important; position: absolute; right: 0; } ``` Results in ![image](https://i.imgur.com/dslvxkW.png) So i've concluded that this requires a HTML change to define another `<div>` so that the elements in `<div class="ui container" id="navbar">` would scale responsibely based on the width of the windows used in relation to the `right stackable menu` so i assume that this is a Gitea issue assuming that the same problem is present on the try.gitea.io? ![image](/attachments/7f326176-9bf0-492d-bcd0-db253e884aac)
kreyren commented 1 week ago
Poster

Also this is probably another issue:

image

Notice the slope

Also this is probably another issue: ![image](/attachments/b742aa30-aff6-401d-8984-59d91adc4221) Notice the slope
hw commented 1 week ago
Owner

iirc this is switched via media selector, not sure about details

iirc this is switched via media selector, not sure about details
6543 added the
duplicate
label 1 week ago
6543 commented 1 week ago
Collaborator

-> #235

-> #235
kreyren closed this issue 1 week ago
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.