mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-14 13:12:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui): improve org header with new noJS dropdown and more options (#8572)

Browse source 
Related: https://codeberg.org/forgejo/forgejo/pulls/6977/files#diff-fd05eba523810d46c7763db938ad5839372a074a, https://codeberg.org/forgejo/forgejo/pulls/3949, https://codeberg.org/forgejo/forgejo/pulls/7906

* use the new noJS dropdown for extra actions in org view (currently only includes report button)
    * this required some refactoring of the area because the said dropdown was not built to be placed in an area where `font-size:36px` is forced onto everything
    * this greatly improves consistently with user profiles which now use this type of dropdown
    * I decided against making the opener button mimicrate an actual button because it looks ok as is and is consitent with menu in user profiles and because I don't think this is a good design language to make a kebab menu opener look this way
* add icon to the entry
* add atom entry

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8572
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-07-23 02:06:13 +02:00 • committed by Gusted
commit c11dd3fb46
5 changed files with 88 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web_src/css/modules/dropdown.css
View file

@ -99,7 +99,13 @@ details.dropdown > summary + ul > li:last-child {
/* Note: https://css-tricks.com/css-anchor-positioning-guide/
* looks like a great thing but FF still doesn't support it. */
/* Note: dropdown.dir-rtl can be implemented when needed, e.g. for navbar profile dropdown on desktop layout. */
details.dropdown.dir-rtl > summary + ul {
inset-inline: 0 auto;
direction: rtl;
}
details.dropdown.dir-rtl > summary + ul > li {
direction: ltr;
}
details.dropdown > summary + ul > li > .item {
padding: var(--dropdown-item-padding);

17
web_src/css/org.css
View file

@ -89,28 +89,29 @@
text-align: center;
}
.page-content.organization .org-avatar {
margin-right: 15px;
}
.page-content.organization #org-info {
overflow-wrap: anywhere;
flex: 1;
}
.page-content.organization #org-info .ui.header {
.page-content.organization #org-info .org-title {
display: flex;
column-gap: 1rem;
align-items: center;
font-size: 36px;
margin-bottom: 0;
}
.page-content.organization #org-info .org-title h1 {
margin: 0;
font-size: 2.5rem;
}
@media (max-width: 767.98px) {
.page-content.organization #org-info .ui.header {
.page-content.organization #org-info .org-header {
flex-direction: column;
margin-bottom: 1rem;
}
.page-content.organization #org-info .org-title {
flex-wrap: wrap;
width: 100%;
margin-bottom: 0.5rem;
}