summaryrefslogtreecommitdiffstats
path: root/web_src/css
Commit message (Collapse)AuthorAgeFilesLines
...
* Clean up polluted styles and remove dead CSS code (#24497)wxiaoguang2023-05-034-42/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #24393 The funny history: * At the beginning, `.ui.message` was polluted by `text-align: center` * Then people do `<div class="ui ... message text left">` * But `.ui.left` is polluted by `float: left` * Then people do `#xxx .ui.message { width: 100% !important;}` The code just becomes more and more hacky. After removing the pollution, everything becomes clear and straight. And, this PR also does: 1. Remove the `package.css`, its styles could be provided by `top aligned` 2. Remove `#avatar-arrow`, dead code Screenshot: ![image](https://user-images.githubusercontent.com/2114189/235862130-a9eb5d8f-7d01-457c-99f7-21d0abc3075e.png) ![image](https://user-images.githubusercontent.com/2114189/235862222-139709a7-95c2-4f89-a40f-100b2d76d9bb.png) Co-authored-by: Giteabot <teabot@gitea.io>
* Enhance stylelint rule config, remove dead CSS (#24472)silverwind2023-05-022-21/+1
| | | | | | | | | | | | | | | | | | | | | | Make this stylelint rule match on more properties. The dead CSS relates to the navbar, which currently has classes: ``` ui top secondary stackable main menu following bar light ``` Which means `.following.bar .top.menu` can never match, so remove this dead CSS as well as inactive `z-index` and `left` on it. Commits table striping becomes more visible on dark theme, but I don't think it's worth introducing a new color until https://github.com/go-gitea/gitea/pull/24423 is ready, which would have to remove it again: <img width="668" alt="Screenshot 2023-05-01 at 18 41 49" src="https://user-images.githubusercontent.com/115237/235489873-6b272899-1d78-443a-872c-ee7731c269f9.png"> <img width="680" alt="Screenshot 2023-05-01 at 18 41 41" src="https://user-images.githubusercontent.com/115237/235489878-1b9468af-c74f-48a6-a469-9eba57cfcb4d.png">
* Remove `font-awesome` and fomantic `icon` module (#24471)silverwind2023-05-011-2/+0
| | | | Fixes https://github.com/go-gitea/gitea/issues/10410. This PR removes around 120kB of CSS.
* Improve "new-menu" (#24465)wxiaoguang2023-05-013-6/+6
| | | | | | | | | | | | | I am not sure what "new-menu" means, but I think we need to fix these problems: 1. it shouldn't have "stackable", which makes the items stacked when width is small. the `new-menu` already has `overflow: auto` 2. `justify-content: center` doesn't work with `overflow: auto` (for small width), so use `margin: auto` * https://bhch.github.io/posts/2021/04/centring-flex-items-and-allowing-overflow-scroll/ 3. `runner-new-menu` is dead code (copying & pasting ?)
* Remove fomantic breadcrumb module (#24463)silverwind2023-05-015-24/+24
| | | | | | | | | | | | | | | | | | | | | | | ### File path before/after <img width="522" alt="Screenshot 2023-05-01 at 13 23 33" src="https://user-images.githubusercontent.com/115237/235445636-57776038-c98e-4cab-8abe-045138a76958.png"> <img width="522" alt="Screenshot 2023-05-01 at 13 24 08" src="https://user-images.githubusercontent.com/115237/235445638-70bef62a-1b70-41f8-ba51-728db4d54402.png"> ### File edit before/after <img width="499" alt="Screenshot 2023-05-01 at 13 24 46" src="https://user-images.githubusercontent.com/115237/235445676-7b3cc23e-289b-40a6-8d4f-0d7fb2efb55e.png"> <img width="497" alt="Screenshot 2023-05-01 at 13 24 52" src="https://user-images.githubusercontent.com/115237/235445677-db9f3974-8456-46de-a32b-9198110c0540.png"> ### Cherry-pick before/after <img width="590" alt="Screenshot 2023-05-01 at 13 25 30" src="https://user-images.githubusercontent.com/115237/235445717-99445024-1bb2-46d4-9bd8-8086bad57d34.png"> <img width="582" alt="Screenshot 2023-05-01 at 13 25 37" src="https://user-images.githubusercontent.com/115237/235445720-9c1dc497-eb23-4e10-a727-27f4d6df69e6.png">
* Remove unnecessary g-menu-stackable-scrollable (#24462)wxiaoguang2023-05-011-13/+0
| | | | | Fix #24460 That's a mistake but ..... no idea why I wrote so ... remove it.
* Replace remaining fontawesome dropdown icons with SVG (#24455)silverwind2023-05-012-4/+18
| | | | | | | | | - Replace leftover dropdown triangles with SVG - Replace remove icon with SVG and add styling for it: <img width="817" alt="Screenshot 2023-05-01 at 00 40 05" src="https://user-images.githubusercontent.com/115237/235379271-4674d4f7-b11e-4d6d-90f9-1478325443ca.png"> <img width="816" alt="Screenshot 2023-05-01 at 00 46 56" src="https://user-images.githubusercontent.com/115237/235379451-b515afb3-9773-4f6f-a259-e7048235bcba.png">
* Add `ui-monospace` and `SF Mono` to `--fonts-monospace` (#24442)silverwind2023-04-301-2/+2
| | | | | | | | | | | - Add `ui-monospace` to support Safari 13.4+. - Add `SF Mono` variant to support the font on non-mac. - Quote fonts as per [W3C recommendation](https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family). > it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens Fixes: https://github.com/go-gitea/gitea/issues/22125
* Fix config list overflow and layout (#24312)silverwind2023-04-301-7/+13
| | | | | | Fixes: https://github.com/go-gitea/gitea/issues/24299 <img width="531" alt="Screenshot 2023-04-24 at 21 05 40" src="https://user-images.githubusercontent.com/115237/234091905-9db42697-87b3-40a0-bd18-9e910ad8a2ae.png">
* Improve issue list filter (#24425)wxiaoguang2023-04-303-7/+25
| | | | | | | | | | | | | | | | | | | | | | Partial regression of #24393, not only regression, but broken for long time, 24393 didn't really improve it but used wrong `overflow: scroll`. Actually, that "ui secondary filter menu labels" shouldn't be set as scrollable (I missed that at that time), the problem is: if a "ui menu" has "dropdown" items, then it should not be scrollable. Otherwise the dropdown menu can't be shown correctly. And there are more problems: * The "issue-filters" shouldn't be used anywhere else (copying&pasting problem again ....) * There is also an "issue-actions" container, it should also be fixed. * There are similar problems on the milestone page. * The old comment in code: "grid column" doesn't work well. The major changes of this PR are: use "flex: 1" instead of "ui grid column". After this PR, not 100% perfect but much better than before.
* Move `Rename branch` from repo settings page to the page of branches list ↵sillyguodong2023-04-301-0/+1
| | | | | | | | | | | | | | | | (#24380) Co-Author: @wxiaoguang It is more convenient that user just need to enter a new branch name after he selects the branch which he want to rename. So this PR move the function of renaming branch to the page of branches list. This PR also restyle the button of `new branch`, `download`, `delete`.... https://user-images.githubusercontent.com/33891828/235277997-413060bb-759f-430a-b5c4-df5e40ffcd28.mov --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Rework header bar on issue, pull requests and milestone (#24420)silverwind2023-04-294-13/+57
| | | | | | | | | | | | | | | | | | | | | - Make search bar dynamic full width via flexbox - Make all buttons `small` so font size is the same for all elements in the header - Remove primary color from search field, add SVG icon like on Code tab - Fix button vertical padding being enlarged by SVG icons [View diff without whitespace](https://github.com/go-gitea/gitea/pull/24420/files?diff=unified&w=1) <img width="1226" alt="Screenshot 2023-04-29 at 11 58 53" src="https://user-images.githubusercontent.com/115237/235296851-74848267-664f-4c1f-b94c-a1b94196ff75.png"> <img width="1219" alt="Screenshot 2023-04-29 at 11 59 39" src="https://user-images.githubusercontent.com/115237/235296852-bcfde5ed-8658-43c2-b7e5-3ad84611e76f.png"> Mobile: <img width="437" alt="Screenshot 2023-04-29 at 11 59 52" src="https://user-images.githubusercontent.com/115237/235296860-99263373-7b27-4540-868c-a93e70f281ca.png"> <img width="433" alt="Screenshot 2023-04-29 at 12 00 00" src="https://user-images.githubusercontent.com/115237/235296862-6cf64317-a864-405a-a00f-b5ab620349f5.png">
* Start cleaning the messy ".ui.left / .ui.right", improve label list page, ↵wxiaoguang2023-04-298-62/+77
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | fix stackable menu (#24393) Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right". Fomantic UI doesn't work this way, it just conflicts with many Fomantic definitions. This PR starts the cleaning work of such techinical debts. And, the "label list" page has been quite messy for long time, for example, why "li" appears in "div" ...... And fix #24296 <details> ![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png) ![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png) ![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png) ![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png) ![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png) </details>
* Improve protected branch setting page (#24379)Hester Gong2023-04-293-33/+10
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Main changes: 1. Change html structure of protected branch page, use [`grouped fields`](https://fomantic-ui.com/collections/form.html#grouped-fields) instead of `fields` for better margin, and wrap `grouped fields` around related `field`s, remove unnecessary `<div id="protection_box" class="fields">` outer div 2. Changed some order of field to make them more categorized, used `ui dividing header` for categorization and fine tune css. Before: <img width="1907" alt="Screen Shot 2023-04-27 at 14 56 19" src="https://user-images.githubusercontent.com/17645053/234783731-bce8a7ce-dfc9-4d47-a3a8-b962ebea9467.png"> <img width="1849" alt="Screen Shot 2023-04-27 at 14 56 30" src="https://user-images.githubusercontent.com/17645053/234783740-c47d314e-5e2d-4854-98fd-c88f85ef3584.png"> <img width="1872" alt="Screen Shot 2023-04-27 at 14 56 36" src="https://user-images.githubusercontent.com/17645053/234783745-18e35a75-07e8-451d-b001-f9bcf16fcab5.png"> After: https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov 3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable Merge" radio checkbox, which are exclusive Before: <img width="926" alt="Screen Shot 2023-04-28 at 13 08 29" src="https://user-images.githubusercontent.com/17645053/235059233-75790f7a-e5ea-4e1c-82c6-509fef8b84b3.png"> After: <img width="942" alt="Screen Shot 2023-04-28 at 13 09 28" src="https://user-images.githubusercontent.com/17645053/235059367-852d1f61-8407-4126-8c79-315b9c1ffada.png"> 4. Add a link to set default branch on branch list page (with reference to github) https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov 5. Removed dead codes. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix layouts of admin table / adapt repo / email test (#24370)wxiaoguang2023-04-283-27/+9
| | | | | | | | | | | | | | | | | | | | | Ref: https://github.com/go-gitea/gitea/pull/24315#pullrequestreview-1403034993 And fix the incorrect layout for "dasbboard", the "form" shouldn't follow `<h4 class="ui top attached header">`, so move it to inner. Diff with ignoring spaces: https://github.com/go-gitea/gitea/pull/24370/files?diff=unified&w=1 A known bug: the adapt/delete button doesn't work due to a historical messy logic, will fix it in next PR (#24374) ![image](https://user-images.githubusercontent.com/2114189/234754656-d160b098-b8d4-4783-962a-27d5c764863c.png) ![image](https://user-images.githubusercontent.com/2114189/234762327-3e77e2e4-a156-4498-8a8b-092e14cf9204.png) ![image](https://user-images.githubusercontent.com/2114189/234767811-74b7272c-e40c-4850-8e3c-499e3b53b827.png) ![image](https://user-images.githubusercontent.com/2114189/234761247-e6aad889-dcad-443c-948f-2d44df68725b.png)
* Move secrets and runners settings to actions settings (#24200)Hester Gong2023-04-272-1/+16
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR moves the secrets and runners settings to actions settings on all settings(repo,org,user,admin) levels. After this PR, if [ENABLED](https://github.com/go-gitea/gitea/blob/5e7543fcf441afb30aba6188edac754ef32b9ac3/custom/conf/app.example.ini#L2604) inside `app.ini` under `[actions]` is set to `false`, the "Actions" tab (including runners management and secrets management) will not be shown. After, the settings under actions settings for each level: 1. Admin Level "Runners Management" <img width="1437" alt="Screen Shot 2023-04-26 at 14 34 20" src="https://user-images.githubusercontent.com/17645053/234489731-15822d21-38e1-4560-8bbe-69f122376abc.png"> 2. User Level "Secrets Management" <img width="1427" alt="Screen Shot 2023-04-26 at 14 34 30" src="https://user-images.githubusercontent.com/17645053/234489795-68c9c0cb-24f8-4f09-95c6-458ab914c313.png"> 3. Repo and Organization Levels "Runners Management" and "Secrets Management" Org: <img width="1437" alt="Screen Shot 2023-04-26 at 14 35 07" src="https://user-images.githubusercontent.com/17645053/234489996-f3af5ebb-d354-46ca-9087-a0b586845281.png"> <img width="1433" alt="Screen Shot 2023-04-26 at 14 35 14" src="https://user-images.githubusercontent.com/17645053/234490004-3abf8fed-81fd-4ce2-837a-935dade1793d.png"> Repo: <img width="1419" alt="Screen Shot 2023-04-26 at 14 34 50" src="https://user-images.githubusercontent.com/17645053/234489904-80c11038-4b58-462c-9d0b-8b7cf70bc2b3.png"> <img width="1430" alt="Screen Shot 2023-04-26 at 14 34 57" src="https://user-images.githubusercontent.com/17645053/234489918-4e8d1fe2-9bcd-4d8a-96c1-238a8088d92e.png"> It also finished these tasks : - [x] rename routers function "runners" to "actions", and refactor related file names - [x] check and modify part of the runners related functions to match their name - [x] Fix backend check caused by fmt check --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Modify width of ui container, fine tune css for settings pages and org ↵Hester Gong2023-04-265-58/+44
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | header (#24315) Close #24302 Part of #24229, Follows #24246 This PR focused on CSS style fine-tune, main changes: 1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of `calc(100vw - 64px)`, so the main contents looks better on large devices. 2. Share styles for table elements in all levels settings pages to fix overflow of runners table on mobile and for consistency (The headers on mobile can be further improved, but haven't found a proper way yet). 3. Use [stackable grid](https://fomantic-ui.com/collections/grid.html#stackable) and [device column width](https://fomantic-ui.com/examples/responsive.html) for responsiveness for some pages (repo/org collaborators settings pages, org teams related page) 4. Fixed #24302 by sharing label related CSS in reporg.css 5. Fine tune repo tags settings page --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Fix Monaco IOS keyboard button (#24341)silverwind2023-04-261-0/+15
| | | | | | | | | | | | | | Fix https://github.com/go-gitea/gitea/issues/16188. Turns out the element was completely misaligned by fomantic styles. Add most of the original styles in `!important` form to fix. Tapping the button doesn't do anything useful in Simulator.app, but I guess it's still better to not outright hide it in case it has a possiblity to work. <img width="121" alt="image" src="https://user-images.githubusercontent.com/115237/234379685-4e67f8cd-7e91-4bcc-8e17-9d5b2ebed6cd.png"> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix runner button height (#24338)silverwind2023-04-261-0/+6
| | | | | | | | | | Fixes https://github.com/go-gitea/gitea/issues/24326. Set size class and downsize any such buttons that have a dropdown icon because the dropdown icon increases button height artificially. [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is not supported in Firefox yet, but works fine with the experimental pref enabled. I see this as a graceful degradation in unsupporting browsers.
* Fix template function DateTime (#24317)wxiaoguang2023-04-251-13/+13
| | | | | | Before, 500 error ![image](https://user-images.githubusercontent.com/2114189/234170176-403ffd1b-ec27-42be-bff9-86184dc8d74d.png)
* Add tags list for repos whose release setting is disabled (#23465)Zettat1232023-04-253-151/+152
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Close #23427 Co-Author: @wxiaoguang If a repo's release setting is enabled, the logic has't changed. Clicking the "Tags" button will jump to `/{user}/{repo}/tags` and `templates/repo/release/list.tmpl` template will be used. <img src="https://user-images.githubusercontent.com/15528715/224939362-bd8974fd-08b0-4f79-a114-3389d15847ca.png" width="600px" /> If the release setting is disabled, clicking the "Tags" button will still jump to `/{user}/{repo}/tags` but a new template `templates/repo/tag/list.tmpl` will be used. <img src="https://user-images.githubusercontent.com/15528715/233834564-74741e49-f4e9-47c8-ac12-e306642798dc.png" width="600px" /> Since both templates above need to render the tags list, I moved the tags list to a shared template located in `templates/repo/tag/table.tmpl`. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Make SVG in dropdown menu have the same margin-right as IMG (#24316)wxiaoguang2023-04-251-0/+3
| | | | | | | | | Fix #24226 ![image](https://user-images.githubusercontent.com/2114189/234167393-0fe36a0d-29c9-46b6-b71d-52436f2b27f3.png) Co-authored-by: silverwind <me@silverwind.io>
* Add --font-weight-bold and set previous bold to 601 (#24307)wxiaoguang2023-04-2410-14/+18
| | | | | | | | | | | | | Fix #24305 According to MDN, "bold" starts from 700, some fonts do not provide "bolding" for weight 600 https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
* Improve some modal action buttons (#24289)wxiaoguang2023-04-242-1/+19
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #24097 and #24285 And add a devtest page for modal action button testing. http://localhost:3000/devtest/fomantic-modal Now the `modal_actions_confirm.tmpl` could support: green / blue / yellow positive buttons, the negative button is "secondary". ps: this PR is only a small improvement, there are still a lot of buttons not having proper colors. In the future these buttons could be improved by this approach. These buttons could also be improved according to the conclusion of #24285 in the future. ![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png) And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
* Tweak pull request branch delete ui (#23951)silverwind2023-04-231-3/+10
| | | | | | | | | | | | | | | | | | | | | | | - Move delete button to right and remove red color on it. - Remove CLI instructions when PR has been merged. Before: <img width="855" alt="Screenshot 2023-04-06 at 20 21 47" src="https://user-images.githubusercontent.com/115237/230463178-95735fc0-9632-4d51-bbd5-2131c40186c4.png"> After: <img width="865" alt="Screenshot 2023-04-06 at 20 23 17" src="https://user-images.githubusercontent.com/115237/230463347-8155cbf9-4e58-421a-93a8-56ce6188dab8.png"> After (deleted): <img width="860" alt="Screenshot 2023-04-06 at 20 19 30" src="https://user-images.githubusercontent.com/115237/230463442-f53d7500-191d-4d75-a097-d100a461672a.png"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Refactor delete_modal_actions template and use it for project column related ↵Hester Gong2023-04-233-26/+48
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | actions (#24097) Co-Author: @wxiaoguang This PR is to fix https://github.com/go-gitea/gitea/issues/23318#issuecomment-1506275446 . The way to fix this in this PR is to use `delete_modal_actions.tmpl` here both to fix this issue and keep ui consistency (as suggested by [TODO here](https://github.com/go-gitea/gitea/blob/4299c3b7db61f8741eca0ba3d663bb65745a4acc/templates/projects/view.tmpl#L161)) And this PR also refactors `delete_modal_actions.tmpl` and its related styles, and use the template for more modal actions: 1. Added template attributes: * locale * ModalButtonStyle: "yes" (default) or "confirm" * ModalButtonCancelText * ModalButtonOkText 2. Rename `delete_modal_actions.tmpl` template to `modal_actions_confirm.tmpl` because it is not only used for action modals deletion now. 3. Refactored css related to modals into `web_src/css/modules/modal.css` and improved the styles. 4. Also use the template for PR deletion modal and remove issue dependency modal. 5. Some modals should also use the template, but not sure how to open them, so mark these modal actions by `{{/* TODO: Convert to base/modal_actions_confirm */}}` After (Also tested on arc green): Hovering on the left buttons <img width="711" alt="Screen Shot 2023-04-23 at 15 17 12" src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png"> <img width="786" alt="Screen Shot 2023-04-23 at 15 17 21" src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png"> Test for functionalities: https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Fix footer display (#24251)wxiaoguang2023-04-222-42/+30
| | | | | | | | | | | | | | | | | | | | | | | Fix #24249 Diff with ignoring spaces: https://github.com/go-gitea/gitea/pull/24251/files?diff=split&w=1 Screenshots: <details> <img width="1440" alt="image" src="https://user-images.githubusercontent.com/2114189/233592840-d9ef7296-64eb-4e48-a598-300807a7c2f9.png"> <img width="923" alt="image" src="https://user-images.githubusercontent.com/2114189/233593015-16edc531-43c2-4ff0-b27e-ca75dbadce0c.png"> </details> --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix label color, fix divider in dropdown (#24215)silverwind2023-04-201-0/+12
| | | | | | | | Two small CSS fixes: 1. Fix basic primary label hover 2. Fix border color of divider in dropdown and remove margin so it looks better with hover effect, as discussed in https://github.com/go-gitea/gitea/pull/24143:
* Use secondary pointing menu for tabs on user/organization home page (#24162)Hester Gong2023-04-204-18/+23
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Close #24108 Use secondary pointing menu for tabs on user/organization home page so the tabs look the same. Main changes: 1. modified a part of dom structure in `templates/user/overview/header.tmpl` to make it the same as `templates/org/header.tmpl` in order to produce the same ui. 2. Move some css to `web_src/css/shared/repoorgshared.css` to make them shareable between `templates/user/overview/header.tmpl` and `templates/org/header.tmpl` After: https://user-images.githubusercontent.com/17645053/232400617-2add5bec-d483-4ab1-b48d-eaee157f7b09.mov For further improvements. Need some thoughts: For [this TODO](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L1), it is viable to make it a shared template for [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L2-L17) and [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/org/header.tmpl#L1-L16) because they are the same except for the variable. But for the menu parts, they are quite different so might not be suitable to use a shared template. So need some thoughts and advice about extracting the shared template from these two headers. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Fix issue attachment handling (#24202)wxiaoguang2023-04-201-10/+0
| | | | | | | | | | | | | | | | | | | | | | Close #24195 Some of the changes are taken from my another fix https://github.com/go-gitea/gitea/pull/20147/commits/f07b0de997125c9b79cc5af27966a7cdd1803a4d in #20147 (although that PR was discarded ....) The bug is: 1. The old code doesn't handle `removedfile` event correctly 2. The old code doesn't provide attachments for type=CommentTypeReview This PR doesn't intend to refactor the "upload" code to a perfect state (to avoid making the review difficult), so some legacy styles are kept. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
* Make wiki title supports dashes and improve wiki name related features (#24143)wxiaoguang2023-04-191-0/+8
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | Close #7570 1. Clearly define the wiki path behaviors, see `services/wiki/wiki_path.go` and tests 2. Keep compatibility with old contents 3. Allow to use dashes in titles, eg: "2000-01-02 Meeting record" 4. Add a "Pages" link in the dropdown, otherwise users can't go to the Pages page easily. 5. Add a "View original git file" link in the Pages list, even if some file names are broken, users still have a chance to edit or remove it, without cloning the wiki repo to local. 6. Fix 500 error when the name contains prefix spaces. This PR also introduces the ability to support sub-directories, but it can't be done at the moment due to there are a lot of legacy wiki data, which use "%2F" in file names. ![image](https://user-images.githubusercontent.com/2114189/232239004-3359d7b9-7bf3-4ff3-8446-bfb0e79645dd.png) ![image](https://user-images.githubusercontent.com/2114189/232239020-74b92c72-bf73-4377-a319-1c85609f82b1.png) Co-authored-by: Giteabot <teabot@gitea.io>
* Vertical widths of containers removed (#24184)Krzysztof Jeziorny2023-04-192-4/+2
| | | | | | | | A vertical overflow appears in Firefox 112/MacOS 12.6 when the system setting for scrollbars is to "Always" show them. --- Here, the fixed 100vw container widths are removed, which removes the overflow. It is, however, only simulated in Developer Tools in latest Firefox and Chromium, so please test on a Gitea installation.
* Allow adding new files to an empty repo (#24164)wxiaoguang2023-04-191-4/+1
| | | ![image](https://user-images.githubusercontent.com/2114189/232561612-2bfcfd0a-fc04-47ba-965f-5d0bcea46c54.png)
* Improve Wiki TOC (#24137)wxiaoguang2023-04-171-5/+6
| | | | | | | | | | The old code has a lot of technical debts, eg: `repo/wiki/view.tmpl` / `Iterate` This PR improves the Wiki TOC display and improves the code. --------- Co-authored-by: delvh <dev.lh@web.de>
* Fix math and mermaid rendering bugs (#24049)silverwind2023-04-173-3/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 1. Fix multiple error display for math and mermaid: ![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif) 2. Fix height calculation of certain mermaid diagrams by reading the iframe inner height from it's document instead of parsing it from SVG: Before: <img width="866" alt="Screenshot 2023-04-11 at 11 56 27" src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png"> After: <img width="855" alt="Screenshot 2023-04-11 at 11 56 35" src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png"> 3. Refactor error handling to a common function 4. Rename to `renderAsciicast` for consistency 5. Improve mermaid loading sequence Note: I did try `securityLevel: 'sandbox'` to make mermaid output a iframe directly, but that showed a bug in mermaid where the iframe style height was set incorrectly. Opened https://github.com/mermaid-js/mermaid/issues/4289 for this. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Set EasyMDE heading font-size to the same size as the resulting markdown ↵wxiaoguang2023-04-161-0/+25
| | | | | | | | | | | | | | | | | | | | (#24151) Fix #23816 According to my personal experience, the EasyMDE is still useful when writing a lot of contents, eg: the wiki page. It's not difficult to improve its heading styles, so let's make it. Before: <img width="815" alt="image" src="https://user-images.githubusercontent.com/2114189/232280943-9177f0bc-e380-426f-8588-20ff8d8e5293.png"> After: <img width="538" alt="image" src="https://user-images.githubusercontent.com/2114189/232280903-e8c476ee-f5b1-48fe-8a93-86fcd79680c3.png">
* Show friendly 500 error page to users and developers (#24110)wxiaoguang2023-04-141-2/+3
| | | | | | | | | | | | | | | | | | | | | | Close #24104 This also introduces many tests to cover many complex error handling functions. ### Before The details are never shown in production. <details> ![image](https://user-images.githubusercontent.com/2114189/231805004-13214579-4fbe-465a-821c-be75c2749097.png) </details> ### After The details could be shown to site admin users. It is safe. ![image](https://user-images.githubusercontent.com/2114189/231803912-d5660994-416f-4b27-a4f1-a4cc962091d4.png)
* Add monospace toggle button to textarea (#24034)silverwind2023-04-132-1/+2
| | | | | | | | | | | | | | | | | - Add new button to textarea to switch font. State is persisted in localStorage. - Change markdown-switch-easymde button from `<span>` to `<button>` - Slightly increased monospace font globally by 5% as I think it fits better. For hover effect on these buttons I'm deferring to https://github.com/go-gitea/gitea/pull/23896. ![](https://user-images.githubusercontent.com/115237/230948526-ecf8d730-0c69-4a8e-a1a5-1e5e079c754d.gif) --------- Co-authored-by: delvh <dev.lh@web.de>
* Fine tune markdown editor toolbar (#24046)wxiaoguang2023-04-112-16/+15
| | | | | | | | | | | | | | | | | | | | | | | 1. Remove unnecessary `btn-link` `muted` classes * Link is link, button is button, I can't see a real requirement to make a button like a link. * If anyone insists, please help to show me real example from modern frameworks / websites, how and why they do so. * No need to duplicate a lot of class names on similar elements * Declare styles clearly, for example, `markdown-toolbar` itself should have `display: flex`, but not use `gt-df` to overwrite the `display: block`. 2. Remove unnecessary `role` attribute * https://github.com/github/markdown-toolbar-element/issues/70 * The `markdown-toolbar-element` does want to add `role=button`, but there is a bug. * So we do the similar thing as upstream does (add the role by JS), until they fix their bugs. 3. Indent `markdown-switch-easymde` (before it doesn't have a proper indent) Screenshot: ![image](https://user-images.githubusercontent.com/2114189/231090912-f6ba01cb-d0eb-40ad-bf8c-ffc597d9a778.png)
* Add tooltips for MD editor buttons and add `muted` class for buttons (#23896)delvh2023-04-112-3/+16
| | | | | | | | | | | | | | | | | | | | | | Followup of #23876 according to my unreleased review demanding tooltips. Additionally - add a `muted` equivalent for buttons - convert `switch to legacy` to an actual button - enroll `switch to legacy` in the builtin pseudo focus cycle - remove spaces between the buttons The effect of the `muted` class is what you would expect: The button loses all of its normal styling, and is defined only by its content instead. This will help reduce a11y infractions in the future, as that was one of the major points why people didn't use `<button>` tags and decided on a bad fix (i.e. through `<div>`s) instead. ## Appearance ![image](https://user-images.githubusercontent.com/51889757/229510842-337378e5-faa5-4886-a910-08614c0c233d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
* Replace tribute with text-expander-element for textarea (#23985)silverwind2023-04-092-0/+80
| | | | | | | | | | | | | | The completion popup now behaves now much more as expected than before for the raw textarea: - You can press <kbd>Tab</kbd> or <kbd>Enter</kbd> once the completion popup is open to accept the selected item - The menu does not close automatically when moving the cursor - When you delete text, previously correct suggestions are shown again - If you delete all text until the opening char (`@` or `:`) after applying a suggestion, the popup reappears again - Menu UI has been improved <img width="278" alt="Screenshot 2023-04-07 at 19 43 42" src="https://user-images.githubusercontent.com/115237/230653601-d6517b9f-0988-445e-aa57-5ebfaf5039f3.png">
* Expand/Collapse all changed files (#23639)sillyguodong2023-04-091-1/+1
| | | | | | | | | | close #23628 Now in `...` dropdown, you can expand or collapse all diff files that have loaded. https://user-images.githubusercontent.com/33891828/227749688-2d406916-3347-49f6-93a5-4092a00e8809.mov Co-authored-by: silverwind <me@silverwind.io>
* Show errors for KaTeX and mermaid on the preview tab (#24009)silverwind2023-04-091-0/+1
| | | | | | | | There is a conflicting fomantic rule that hid the error messages inside the markdown preview tab for things like mermaid or katex. Overruled it to always show these errors. <img width="774" alt="image" src="https://user-images.githubusercontent.com/115237/230738528-322814c1-8994-495e-b901-bbb79b924ccb.png">
* Show protected branch rule names again (#23907)Hester Gong2023-04-091-3/+4
| | | | | | | | | | | | | | | | | | `!important`s for one of the primary label selectors are removed by #23774, so the repository branch protection settings ui will not have the demanding css. This PR modifies `.ui.primary.label` to fix it. Before: <img width="1408" alt="飞书20230404-115410" src="https://user-images.githubusercontent.com/17645053/229683221-ef9c7d5c-68a8-42b0-ba19-ef2d5dfce5f9.png"> After: <img width="1419" alt="截屏2023-04-04 11 56 32" src="https://user-images.githubusercontent.com/17645053/229683469-70cfc92d-d7ef-4323-a7f5-2247810fabce.png"> --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Adjust sticky pr header to cover background (#23956)silverwind2023-04-081-4/+4
| | | | | | | | | | | | Very minor CSS tweak: Adjust sticky PR header to cover the box-shadow of selected files. Before: <img width="1250" alt="Screenshot 2023-04-06 at 22 54 59" src="https://user-images.githubusercontent.com/115237/230492218-4d71da48-a362-4c52-a7f7-01daf4ffa458.png"> After: <img width="1255" alt="Screenshot 2023-04-06 at 22 54 46" src="https://user-images.githubusercontent.com/115237/230492227-c7142210-e535-4da8-b610-37d33dcbb549.png">
* Fix markup background, improve wiki rendering (#23750)silverwind2023-04-072-24/+26
| | | | | | | | | | | | | | | Fix regression from https://github.com/go-gitea/gitea/pull/23578. Only visible on arc-green. Before: <img width="997" alt="Screenshot 2023-03-27 at 19 14 21" src="https://user-images.githubusercontent.com/115237/228016589-e7cabfb9-bfd0-45fd-9407-6b76c665ed1a.png"> After: <img width="1000" alt="Screenshot 2023-03-27 at 19 14 05" src="https://user-images.githubusercontent.com/115237/228016600-db2e6002-4e2c-4d18-8393-9d7e1f525acb.png"> Fixes: https://github.com/go-gitea/gitea/issues/20625 Fixes: https://github.com/go-gitea/gitea/issues/23718
* Improve markdown editor: width, height, preferred (#23895)wxiaoguang2023-04-073-33/+16
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #23876 1. Fine tune the heights of the editors (like before) * Auto expand the editor (increase/decrease the height) when editing 2. Remember user's last used editor (textarea/easymde) in LocalStorage, then next time the editor will be switched automatically * No need to introduce extra config option, it satisfies all users, including who prefer EasyMDE 3. Also fix the width problem of Review Panel Screenshot: <details> ![image](https://user-images.githubusercontent.com/2114189/229518585-2e05827e-8355-48f3-a20c-2c8b9e60ce74.png) ![image](https://user-images.githubusercontent.com/2114189/229518173-4caa6da7-6ad9-40e9-bf1a-ceddfcd4b37f.png) ![image](https://user-images.githubusercontent.com/2114189/229507886-148e9b84-9b58-46d1-ba3f-727e1396f476.png) ![image](https://user-images.githubusercontent.com/2114189/229518258-9f522294-1e64-4b06-91ab-ab43b0353aaa.png) ![image](https://user-images.githubusercontent.com/2114189/229507752-6d540ac7-7748-4bb6-bc09-28acab32d31b.png) ![image](https://user-images.githubusercontent.com/2114189/229510899-de322af5-57e8-4dc5-9a61-771a3b1bee79.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
* Refactor authors dropdown (send get request from frontend to avoid long wait ↵Hester Gong2023-04-071-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | time) (#23890) Right now the authors search dropdown might take a long time to load if amount of authors is huge. Example: (In the video below, there are about 10000 authors, and it takes about 10 seconds to open the author dropdown) https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov Possible improvements can be made, which will take 2 steps (Thanks to @wolfogre for advice): Step 1: Backend: Add a new api, which returns a limit of 30 posters with matched prefix. Frontend: Change the search behavior from frontend search(fomantic search) to backend search(when input is changed, send a request to get authors matching the current search prefix) Step 2: Backend: Optimize the api in step 1 using indexer to support fuzzy search. This PR is implements the first step. The main changes: 1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit of 30 users with matched prefix (prefix sent as query). If `DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will also include fullnames fuzzy search. 2. Added a tooltip saying "Shows a maximum of 30 users" to the author search dropdown 3. Change the search behavior from frontend search to backend search After: https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov Fixes: https://github.com/go-gitea/gitea/issues/22586 --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>
* Use graceful editorconfig loader to reduce errors when loading malformed ↵Yoan Blanc2023-04-061-0/+1
| | | | | | | | | | | | | editorconfigs (#21257) The _graceful_ should fail less when the `.editorconfig` file isn't properly written, e.g. boolean values from YAML or unparseable numbers (when a number is expected). As is... information is lost as the _warning_ (a go-multierror.Error) is ignored. If anybody knows how to send them to the UI as warning; any help is appreciated. Closes #20694 Signed-off-by: Yoan Blanc <yoan@dosimple.ch>
* Fix image border-radius (#23886)wxiaoguang2023-04-051-9/+1
| | | | | | | | | | | | | | 1. Instead of polluting the `border-radius` style globally, each "img" usage should declare their own styles. 2. There were some bugs in code, I believe the `.img` selector was done by mistake. After: ![image](https://user-images.githubusercontent.com/2114189/229415742-161b018f-14c3-471d-bcf7-34f83e5c2d89.png) ![image](https://user-images.githubusercontent.com/2114189/229415789-829d364a-76da-47a5-8c61-398cc990873c.png)