summaryrefslogtreecommitdiffstats
path: root/web_src/css/review.css
Commit message (Collapse)AuthorAgeFilesLines
* Make `add line comment` buttons focusable (#25894) (#25896)Giteabot2023-07-151-0/+4
| | | | | | | | | | | | Backport #25894 by @sebastian-sauer Use a real button and add an aria-label. Additionally, show the button whenever it is focused. See https://codeberg.org/forgejo/forgejo/issues/998 for explanation. Our handling of this button is now equal to that of GitHub. Nothing has changed visually. Co-authored-by: sebastian-sauer <sauer.sebastian@gmail.com>
* Diff page enhancements (#25398) (#25437)Giteabot2023-06-221-2/+2
| | | | | | | | | | | | | | | | | | | | | | Backport #25398 by @silverwind Two small tweaks: 1. Vertically center arrow here when editing a PR: <img width="405" alt="Screenshot 2023-06-20 at 19 48 49" src="https://github.com/go-gitea/gitea/assets/115237/1d63764d-9fd9-467e-8a8e-9258c06475eb"> 2. Use 2-row layout on diff viewed status and show it again on mobile: <img width="142" alt="Screenshot 2023-06-20 at 19 51 21" src="https://github.com/go-gitea/gitea/assets/115237/3046e782-163c-4f87-910c-a22066de8f1b"> Mobile view: <img width="370" alt="Screenshot 2023-06-20 at 19 44 40" src="https://github.com/go-gitea/gitea/assets/115237/9cf56347-7323-4d05-99a5-17ad215ee44d"> Co-authored-by: silverwind <me@silverwind.io>
* Show outdated comments in files changed tab (#24936) (#25428)sebastian-sauer2023-06-221-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Backport #24936 If enabled show a clickable label in the comment. A click on the label opens the Conversation tab with the comment focussed - there you're able to view the old diff (or original diff the comment was created on). **Screenshots** ![image](https://github.com/go-gitea/gitea/assets/1135157/63ab9571-a9ee-4900-9f02-94ab0095f9e7) ![image](https://github.com/go-gitea/gitea/assets/1135157/78f7c225-8d76-46f5-acfd-9b8aab988a6c) When resolved and outdated: ![image](https://github.com/go-gitea/gitea/assets/1135157/6ece9ebd-c792-4aa5-9c35-628694e9d093) Option to enable/disable this (stored in user settings - default is disabled): ![image](https://github.com/go-gitea/gitea/assets/1135157/ed99dfe4-76dc-4c12-bd96-e7e62da50ab5) ![image](https://github.com/go-gitea/gitea/assets/1135157/e837a052-e92e-4a28-906d-9db5bacf93a6) fixes #24913 Co-authored-by: silverwind <me@silverwind.io>
* Fix mobile navbar and misc cleanups (#25134) (#25169)Giteabot2023-06-111-4/+4
| | | | | | | | | | | | | | | Backport #25134 by @silverwind - Fix and improve mobile navbar layout - Apply all cleanups suggested in https://github.com/go-gitea/gitea/pull/25111 - Make media query breakpoints match Fomantic's exactly - Clean up whitespace in class on navbar items Mobile navbar before and after: <img width="745" alt="Screenshot 2023-06-08 at 08 40 56" src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28"> <img width="739" alt="Screenshot 2023-06-08 at 08 41 23" src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">
* Improve accessibility when (re-)viewing files (#24817)delvh2023-05-211-3/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | | Visually, nothing should have changed. Changes include - Convert most `<a [no href]>` to `<button>` when (re-)viewing files: - `<a [no href]>` are, by HTML definition, not a link and hence cannot be focused - `<a class="ui button">` can now be clicked (again?) using <kbd>Enter</kbd> - Previously, the installed keypress handler on `.ui.button` elements disabled it for links somehow - The `(un)escape file`, the `expand section` and the `expand/collapse file` buttons can now be focused (and subsequently clicked using only the keyboard) - You can now press <kbd>Space</kbd> on a focused `View file` checkbox to mark the file as viewed. - previously, this was impossible as this checkbox listened on the wrong event listener The `add code comment` button has been left inaccessible for now as it requires quite a bit of extra logic so that it is unhidden when it is focused (you can otherwise focus it without seeing it as you are not hovering on the corresponding line). --------- Co-authored-by: silverwind <me@silverwind.io>
* Fix max width and margin of comment box on conversation page (#24809)HesterG2023-05-191-0/+3
| | | | | | | | | | | | | | | | | | | | | Fix regression from #23937 The changes should only be limited to `.conversation-holder .comment-code-cloud`, otherwise it will affect the `.comment-code-cloud` in conversation tab Before: <img width="962" alt="Screen Shot 2023-05-19 at 18 22 25" src="https://github.com/go-gitea/gitea/assets/17645053/0db01d04-2581-48f9-b46c-497836b1f12b"> After: <img width="997" alt="Screen Shot 2023-05-19 at 18 35 01" src="https://github.com/go-gitea/gitea/assets/17645053/5d14b67b-88c1-46c6-b859-fd41752b3ebb"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* 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>
* Improve markdown editor: width, height, preferred (#23895)wxiaoguang2023-04-071-10/+7
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Scroll collapsed file into view (#23702)Jimmy Praet2023-04-051-2/+2
|
* Fix code view (diff) broken layout (#23096)wxiaoguang2023-04-041-6/+0
| | | | | | | | | | | | | | | | Close #22911 I think it's ready for review now, feel free to test it, welcome to help to improve. ### Before ![image](https://user-images.githubusercontent.com/2114189/220958734-06871615-b498-4143-8449-3d443f08ffaa.png) ### After ![image](https://user-images.githubusercontent.com/2114189/220958621-0dce2728-57b8-4a1f-ac5d-48c7c2d42f5c.png)
* Fix review box viewport overflow issue (#23800)silverwind2023-04-031-22/+4
| | | | | | | | | | | | | | | | Fix regression that came likely from https://github.com/go-gitea/gitea/pull/23271: Long lines of text currently cause the review box's CodeMirror element to resize which apparently is not recognized by [popper's resize detection](https://popper.js.org/docs/v2/modifiers/event-listeners/) and which causes the element to go partially out of viewport until a reflow happens: ![wrap](https://user-images.githubusercontent.com/115237/228673260-f8ffe89e-5724-4fb9-b93f-30b146c4c436.gif) Fix this by setting the element to a static width derived from viewport width and remove the previously clumsy media queries.
* Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)wxiaoguang2023-04-031-0/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png) ![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png) ![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png) ![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
* Diff improvements (#23553)silverwind2023-03-301-10/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | - Avoid flash of wrong tree toggle icon on page load by setting icon based on sync state - Avoid "pop-in" of tree on page load by leaving space based on sync state - Use the same border/box-shadow combo used on comment `:target` also for file `:target`. - Refactor `DiffFileTree.vue` to use `toggleElem` instead of hardcoded class name. - Left-align inline comment boxes and make them fit the same amount of markup content on a line as GitHub. - Fix height of `diff-file-list` Fixes: https://github.com/go-gitea/gitea/issues/23593 <img width="1250" alt="Screenshot 2023-03-18 at 00 52 04" src="https://user-images.githubusercontent.com/115237/226071392-6789a644-aead-4756-a77e-aba3642150a0.png"> <img width="1246" alt="Screenshot 2023-03-18 at 00 59 43" src="https://user-images.githubusercontent.com/115237/226071443-8bcba924-458b-48bd-b2f0-0de59cb180ac.png"> <img width="1250" alt="Screenshot 2023-03-18 at 01 27 14" src="https://user-images.githubusercontent.com/115237/226073121-ccb99f9a-d3ac-40b7-9589-43580c4a01c9.png"> <img width="1231" alt="Screenshot 2023-03-19 at 21 44 16" src="https://user-images.githubusercontent.com/115237/226207951-81bcae1b-6b41-4e39-83a7-0f37951df6be.png"> (Yes I'm aware the border-radius in bottom corners is suboptimal, but this would be notorously hard to fix without relying on `overflow: hidden`).
* Fix diff detail buttons wrapping, use tippy for review box (#23271)silverwind2023-03-171-8/+4
| | | | | | | | | | | | | | | | Fix visual regression introduced by https://github.com/go-gitea/gitea/pull/22986. Before: <img width="1277" alt="image" src="https://user-images.githubusercontent.com/115237/222792814-d70c2173-0c7c-4db2-8839-95be63cdc8ee.png"> <img width="649" alt="image" src="https://user-images.githubusercontent.com/115237/222792989-9b1f5e12-becd-40cc-b02c-e9f59a8e72a4.png"> After: <img width="1274" alt="image" src="https://user-images.githubusercontent.com/115237/222792769-e7a9702f-4b6a-46c4-9385-da103ed4dff0.png"> <img width="565" alt="image" src="https://user-images.githubusercontent.com/115237/222793084-6de6482b-11dc-4d38-b514-15884d20e140.png">
* Replace Less with CSS (#23481)silverwind2023-03-141-0/+322
Ran most of the Less files through the Less compiler and Prettier and then followed up with a round of manual fixes. The Less compiler had unfortunately stripped all `//` style comments that I had to restore (It did preserve `/* */` comments). Other fixes include duplicate selector removal which were revealed after the transpilation and which weren't caught by stylelint before but now are. Fixes: https://github.com/go-gitea/gitea/issues/15565