css/codeberg.css: Short-term solution for menu #43

Adressing: Codeberg/Community#235 (comment)
Fixes: Codeberg/Community#258

Signed-off-by: Jacob Hrbek kreyren@rixotstudio.cz

Noticed that my editor is automatically removing trailing spaces let me know if you want these changes removed.

attn maintainers: This has been tested only on my custom fork of firefox emulating the environment for upstream firefox and chromium.

no background color needed?

@hw The css style is already defined within Gitea as:

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

This just adds the elements to pin the menu to the right side and hides it for phone view.

tried on https://codeberg-test.org/: there seems to be an issue with vertical alignment/centering, also the right menu is transparent on top of the buttons?

@hw provide the useragent of your browser

@hw provide the useragent of your browser

chromium, chrome, firefox, mozilla mobile browser

This seems to work on my end:
image

Tried also to align the avatar, but the changes to that menu should be reverted and use the upstream specs.
image

^Note that this is overwriting the elements in:

• .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu
• .ui.dropdown .menu > .item > .image:not(.icon), .ui.dropdown .menu > .item > img, .ui.dropdown > .text > .image:not(.icon), .ui.dropdown > .text > img

Which is probably what is causing the current issues as the provided CSS is overwriting the upstream -> The CSS file in question should be merged (meaning the changes in css are added to the upstream CSS locally) to avoid these issues in the future and this is still a very bad hotfix until Codeberg/Community#235 is resolved.

So ideally this should allow for implementation alike:

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	right: 0;
	position: absolute;
	margin-right: 0.5%;
	margin-top: 4px;
}

That results in:

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

Is the PR updated to meet these changes?

@hw The short-term fix is adressed in Codeberg/build-deploy-gitea@151cb2cd34

Should work unless my test environment is insufficient to the deployed.

In terms of the proposed in Codeberg/build-deploy-gitea#43 (comment) that seems like gitea issue to me as the files in public/ are overwriting which seems to be a bad implementation in our usecase, because gitea might update their menu again and we would be by design stuck with the outdated implementation that would require contrib each time gitea does that or reimplement the whole panel to only change the color through new independant HTML element which would be also pita to manage.

EDIT: Doing research on the implementation atm

So from my research we want to provide a codeberg.css file with elements:

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	right: 0;
	position: absolute;
	margin-right: 0.5%;
	margin-top: 4px;
}

and expect gitea to append the changes to it's styling as:

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

but we are getting:

.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	right: 0;
	position: absolute;
	margin-right: 0.5%;
	margin-top: 4px;
}

@hw How are you deploying this? As using file alike:

/* Current gitea styling */
.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-left: auto !important;
}
/* Added from codeberg.css */
.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	right: 0;
	position: absolute;
	margin-right: 0.5%;
	margin-top: 4px;
}

Should get us the result..

^Note behavior observed from Codeberg/build-deploy-gitea#43 (comment)

Proof-of-concept in case it's not obvious:

/* css file stored in css/kreyren.css */
.reyclass {
 color: #f00;
}
.reyclass {
 font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
 <head>
 <link href="css/kreyren.css" rel="stylesheet">
 </head>
 <body>
 <div class=reyclass>
 <p>TEST</p>
 </div>
 </body>
</html>

image

FWIW You can use:

// ==UserScript==
// @name Codeberg live preview of CSS changes
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Environment that can be used to test CSS on the deployed page
// @author Kreyren
// @match https://codeberg.org/*
// @run-at document-start
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle ( `
 .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
	right: 0;
	position: absolute;
	margin-right: 0.5%;
	margin-top: 2px;
 }
 .ui.dropdown .menu > .item > .image:not(.icon), .ui.dropdown .menu > .item > img, .ui.dropdown > .text > .image:not(.icon), .ui.dropdown > .text > img {
 margin-top: -2px;
 }
` );

To see the proposed solution in Codeberg/build-deploy-gitea#43 (comment) on currently deployed website (requires greesemonkey)

Deprecated by: Codeberg/build-deploy-gitea#46 (comment)