luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-18 07:53:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Improve modal dialog UI (#26764)

Browse source 
1. Fine tune the CSS styles, and add more examples
2. Add necessary "dimmer" animation for modal dialogs, otherwise the UI
seems flicking (follow #26469)
This commit is contained in:
wxiaoguang 2023-08-29 07:49:21 +08:00 • committed by GitHub
parent 83208b4991
commit 0ab70d4f2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web_src/css/modules/modal.css
View file

@ -30,29 +30,41 @@
box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
}
/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly */
/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
However, Gitea uses the following layouts:
* <div .modal><div .content><div .actions/></div></div>
* <div .modal><form><div .content/><div .actions/></form></div>
* <div .modal><div .content><form><div .actions/></form></div></div>
* ...
These inconsistent layouts should be refactored to simple ones.
*/
.ui.modal > .content,
.ui.modal > form > .content {
.ui.modal form > .content {
padding: 1.5em;
background: var(--color-body);
}
.ui.modal > .actions,
.ui.modal > form > .actions {
.ui.modal .content + .actions {
background: var(--color-secondary-bg);
border-color: var(--color-secondary);
/* these styles are from Fomantic UI */
padding: 1rem;
text-align: right;
}
.ui.modal .content > .actions {
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
text-align: right;
}
/* positive/negative action buttons */
.ui.modal .actions > .ui.button {
display: inline-flex;
align-items: center;
padding: 10px 12px 10px 10px;
margin-right: 0;
}
.ui.modal .actions > .ui.button.danger {