- This is a continuation on [the work](https://github.com/go-gitea/gitea/pull/19546) I've done for improving mobile experience on Gitea.
- The current behavior of going trough the commits list is horrible, each individual item gets it's own row and thereby isn't quite compact as it should be on mobile. The commit view's header is in a bit better state, it's quite only that content is overlapping each other.
- This patch fixes those problems. Each row in the commit list table will actually take a row in the UI. The commit view's header has now a better organized way of placing the information.
Start making the mobile experience not painful and be actually usable. This contains a few smaller changes to enhance this experience.
- Submit buttons on the review forms aren't columns anymore and are now allowed to be displayed on one row.
- The label/milestone & New Issue buttons were given each own row even tough, there's enough place to do it one the same row. This commit fixes that.
- The issues+Pull tab on repo's has a third item besides the label/milestone & New Issue buttons, the search bar. On desktop there's enough place to do this on one row, for mobile it isn't, currently it was using for each item a new row. This commits fixes that by only giving the searchbar a new row and have the other two buttons on the same row.
- The notification table will now be show a scrollbar instead of overflow.
- The repo buttons(Watch, Star, Fork) on mobile were showing quite big and the SVG wasn't even displayed on the same line, if the count of those numbers were too high it would even overflow. This commit removes the SVG, as there isn't any place to show them on the same row and allows them to have a new row if the counts of those buttons are high.
- The admin page can show you a lot of interesting information, on mobile the System Status + Configuration weren't properly displayed as the margin's were too high. This commit fixes that by reducing the margin to a number that makes sense on mobile.
- Fixes to not overflow the tables but instead force them to be scrollable.
- When viewing a issue or pull request, the comments aren't full-width but instead 80% and aligned to right, on mobile this is a annoyance as there isn't much width to begin with. This commits fixes that by forcing full-width and removing the avatars on the left side and instead including them inline in the comment header.
* Make repository file list useable on mobile
- When you're browsing a repository on mobile, you're met by a giant
block called the "repository file list". The current design is not
useable for mobile and is a big annoyance while browsing a repo on
mobile. This PR removes that annoyance by making it more suitable design
when on mobile.
- Adds HTML for the commit/file time to align it vertically(noticeable
on mobile, not on PC).
- Show all information horizontally and not vertically.
- Remove the last commit message of the file, there isn't enough space
on mobile to place this anywhere, so we're not trying to make a
best-effort here and instead just not display it.
* Remove unnecessary `!important`
* Fix broken HTML
* Simplify code
* By default force vertical tabs on mobile
- While experimenting with using vertical tabs instead of horizontal
tabs on gitea for a better mobile experience, I made a recent
PR(https://github.com/go-gitea/gitea/pull/19468) in order to see if
there was any objections to this new behavior for the repo headers(one
of the most annoying horizontal tabs). This PR had no objections and
even a user commenting that this change is brilliant.
- This PR now improves upon the previous PR by making this the de-facto
behavior for all menu's on mobile. The only exemption is the navbar
which also uses the menu but caught some layout errors with the changes.
* Fix organisation
* Fix repo/wiki buttons
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Use horizontal tabs for repo header on mobile
- The current behavior of the repo header on mobile is to display them
vertically column-by-column. I've only experience annoyance due to this
while trying to visit gitea instanced on mobile. This commit changes
this behavior to use horizontal tabs, it uses less tabs and doesn't
bloat 60% of your mobile screen with the repo headers.
- A small fix added in this commit is to give some space around the repo
buttons, current behavior is that they are too "close" to the repo
title.
* Fix lint
- Upgrade all JS dependencies minus vue and vue-loader
- Adapt to breaking change of octicons
- Update eslint rules
- Tested Swagger UI, sortablejs and prod build
This code adds a simple endpoint to apply patches to repositories and
branches on gitea. This is then used along with the conflicting checking
code in #18004 to provide a basic implementation of cherry-pick revert.
Now because the buttons necessary for cherry-pick and revert have
required us to create a dropdown next to the Browse Source button
I've also implemented Create Branch and Create Tag operations.
Fix#3880Fix#17986
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Ensure commit-statuses box is sized correctly in headers
When viewing commits as commits the commit-status box will be fixed at 30px in height
due to being forced to be this size by a fomantic selector. This PR simply adds a
few more selectors to force this to have height auto.
Fix#18498
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Update web_src/less/_repository.less
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Currently the "File Changed" tab of a PR is somehow broken. This is also true for the current release 1.16.0.
When you are on the "File Changed" tab, and want to look at code excerpt before or after the code changes, the layout breaks. You can test this on try.gitea.io here: https://try.gitea.io/testnotexisting/magic_enum/pulls/2/files
The problem occurs for the unified view and for the split view.
Kind of the same problem was there for commenting a line of code, this was fixed in #18321 and #18403.
For consistency, I changed the solution of #18321, I removed the ``colspan`` and instead added a ``<td>``. The goal was to have code similarly with the split view.
Also the separator line in the split view was in the wrong column, this was fixed too.* more consistent unified review comment
Fix#18516
Co-authored-by: Andrew Thornton <art27@cantab.net>
- Update all JS dependencies, including a security issue in mermaid
- Fix new linter errors related to value-keyword-case
- Tested Mermaid and Swagger
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Fix#17514
Given the comments I've adjusted this somewhat. The numbers of characters detected are increased and include things like the use of U+300 to make à instead of à and non-breaking spaces.
There is a button which can be used to escape the content to show it.
Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: Gwyneth Morgan <gwymor@tilde.club>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
- Extract CodeMirror-related styles to separate files
- Generalize CodeMirror styles where possible
- Improve fullscreen and side-by-side mode for dark theme
Co-authored-by: 6543 <6543@obermui.de>
Fomantic brings a opinionated style that removed underline on mouse
hover which I think is important UX to have.
This re-enables the underline in the Fomantic config and fixes a few
cases where underline was deemed disruptive.
* Fix svg colors in file list table
Turns out this can be fixed by just removing rules. Directory and file
icons have other rules that still make them color correctly.
* tweak color on file icons
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
- Remove blue background and use regular header styling
- Use flexbox on author and signature segments
- Add shield-type icons besides gpg key, replacing icon font icons
- Ensure author and signature line are same height
- Remove erronous green background on arc-green signature line
- Turn signing colors into CSS variables
- Consolidate the two warning states into one
Co-authored-by: zeripath <art27@cantab.net>
* Move `> .merge-section` to `> .content` scope
- Fixes a issue that started from
https://github.com/go-gitea/gitea/pull/17317
- Move `> .merge-section` to the `> .content` scope.
- Resolves#17480
* Move `.merge-section` back to outside scope
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Fixes#16837 if a column is deleted.
We were clobbering the columns that were added by looping through the aline (base) and then when bline (head) was looped through, it clobbered what was in the "cells" array that is show in the diff, and then left a nil cell because nothing was shifted.
This fix properly shifts the cells, and properly puts the b cell either at its location or after, according to what the aline placed in the cells.
This includes test, adding a new test function since adding/removing cells works best with three columns, not two, which results in 4 columns of the resulting cells because it has a deleted column and an added column. If you try this locally, you can try those cases and others, such as adding a column.
There was no need to do anything special for the rows when `aline == 0 || bline == 0` so that was removed. This allows the same code to be used for removed or added lines, with the bcell text always being the RightCell, acell text being the LeftCell.
I still added the patch zeripath gave at https://github.com/go-gitea/gitea/issues/16837#issuecomment-913007382 so that just in case for some reason a cell is nil (which shouldn't happen now) it doesn't throw a 500 error, so the user can at least view the raw diff.
Also fixes in the [view.go](https://github.com/go-gitea/gitea/pull/17018/files#diff-43a7f4747c7ba8bff888c9be11affaafd595fd55d27f3333840eb19df9fad393L521) file how if a CSV file is empty (either created empty or if you edit it and remove all contents) it throws a huge 500 error when you then save it (when you view the file). Since we allow creating, saving and pushing empty files, we shouldn't throw an error on an empty CSV file, but just show its empty contents. This doesn't happen if it is a Markdown file or other type of file that is empty.
EDIT: Now handled in the markup/csv renderer code
* Drop data-original from clipboard
data-original attribute was removed. Instead, the original value from
data-content is set after success/fail message was displayed.
Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
* "Copy branch name" button in pull request
Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
* Update templates/repo/issue/view_title.tmpl
Co-authored-by: silverwind <me@silverwind.io>
* Apply suggestions from code review
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: zeripath <art27@cantab.net>
This commit adds 10px padding-left on chunk header element
(which is `<span>`).
Signed-off-by: Bagas Sanjaya <bagasdotme@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>
As title, the change counter-works the effect from #14926 that links seem unclickable (especially in the default gitea theme), while maintaining some sort of visual harmony.
Co-authored-by: Andrew Thornton <art27@cantab.net>
Replace it with native <detail> element. Did some slight restyling on
the release downloads, new behaviour should be exactly the same
otherwise.
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Fix and restyle menu on code line
* fix multiline and more tweaks
* move to separate files
* remove has-context-menu class
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
- Replace remaining font icons with SVG in issue sidebar
- Rework issue due date display
- Realign avatar in timeline
- Fix font size in repo search and code explore
- Consolidate active button styles
- Fix loading form on arc-green
- Align time tracker buttons vertically
Fixes: https://github.com/go-gitea/gitea/issues/15896
- Right-align the Reply and Resolve buttons
- Center Resolved text and add some padding
- Add padding to inline comments
- Indent the comment content to align with author name
- Re-parent form to allow better button layout space.
Co-authored-by: zeripath <art27@cantab.net>
* creates and implements generic markup less class
* How to give custom CSS to externally rendered html
* Clarifies sources of CSS styling of markup
* further clarification of sources of markup styling
* rename _markdown to _markup
* remove defunct import
* fix orphaned reference
* Update docs/content/doc/advanced/external-renderers.en-us.md
* more renames markdown -> markup
* do not suggest less customization
* add back tokens
* fix class whitespace, remove useless if-clause
* remove unused csv-data rules
* use named exports and rename functions
* sort imports
Co-authored-by: HarvsG <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
* Add compare tag dropdown to releases page
* Change defaults to be more intuitive and remove unneeded option
* Fix to select branch on releases page
Co-authored-by: Jonathan Tran <jon@allspice.io>
Co-authored-by: Kyle D <kdumontnu@gmail.com>
- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click
Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.
Fixes: https://github.com/go-gitea/gitea/issues/15515
* Dropzone styling improvements
- Move all dropzone styles to separate file
- Fix white background in arc-green
- Fix rendering of non-square images and previews
* increase thumbnail quality, set contain in js, replace blur effect with opacity
- Improve branches page, increase icon size, use octicons, use css vars
- Style placeholder color via css var
- Slightly increase contrast of input fields and active/hover states
- Add styling for select boxes in arc-green
Implements request #14320 The rendering of CSV files does match the diff style.
* Moved CSV logic into base package.
* Added method to create a tabular diff.
* Added CSV compare context.
* Added CSV diff template.
* Use new table style in CSV markup.
* Added file size limit for CSV rendering.
* Display CSV parser errors in diff.
* Lazy read single file.
* Lazy read rows for full diff.
* Added unit tests for various CSV changes.
This PR fixes a few UI bugs I spontaneously encountered:
- Fixes emojis in repo titles getting head-cut and tail-cut in dashboard feed due to introduction of 1.25 em emojis at 1 em line-height, by simply using the original 1 3/7 em value of `semantic.css`
- Fixes regression (too long repo names should be capped to 70%) in #13828 due to flex children not respecting properties like `overflow: hidden;`, and removes a block of dead style code
- Follow-up to #14761, removes extraneous code for top navbar and correct right margin for Font Awesome
- Fixes color emphasis inversion in arc-green theme for top right buttons (edit, delete) on commit view boxes
* Make fileheader sticky #12552
* Remove sticky filenames when width is 480px or less
On mobile phone sticky filename is hidden due to the combination
of many possible widths and lengths.
* Fix text color for .markdown-info
* Fix visual of sticky diff box on 480px or less
- Hide arrow for select buttons.
- Fix changes, additions and deletions.
With flexbox they look very broken.
This commit hides some words to, so the result is:
"123 changed files 987 additions 456 deletions"
- center text in buttons
Co-authored-by: zeripath <art27@cantab.net>
* Improve label wrapping
- Adjust issue list styles so labels can wrap on the same line as the
text. This relies on `display: inline` with the HTML whitespace being
used as the separator.
- Add global word-break: break-word. This should generally avoid text
overflows in various places.
* add whitespace to history labels
* use overflow-wrap
* restore word-break rules
* use correct pre
* use better selector for middle align
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Update JS dependencies
- Update all JS dependencies
- Adapt webpack config for version 5
- Update to Less 4.0, adapting usage of removed mixin syntax
- Enable new ESLint rules and fix discovered issues
* update license-webpack-plugin to fix missing licenses
* update license-webpack-plugin once more to get webpack into the license output
* switch to license-checker-webpack-plugin again for performance
* update deps again
Co-authored-by: Lauris BH <lauris@nix.lv>
* Improve disabled styles for repo buttons
- Simplify disabled styling of label by matching for the disabled
attribute.
- Raise fomantic disabled opacity from .45 to .55 to for more contrast.
- Use CSS vars for basic button styles.
* restore clickability on label
* color tweaks and remove arc-green style
* slightly reduce button size
* consolidate vars
* also cover active class
* slightly more distinct active class
* remove useless rule
* Search and Diff CSS enhancements
- Use flexbox for language stats
- Improve labels and code boxes on repo and code search
- Use flexbox on diff header and improve suppressed diff text
- Add dedicated color for diff expander
* more diff tweaks, less vertical padding on header
* more minor tweaks
* always show fold icon, image diff improvments
* remove margin
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Show dropdown with all statuses for commit
* Use popups
* Remove unnecessary change
* Style popup
* Use divided list
* As per @silverwind
* Refactor GetLastCommitStatus
* Missing dropdown on repo home and commit page
* Fix tests
* Make status icon be a part of a link on PR list
* Fix missing translation call
* Indent fix
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
- Make plain <pre> inherit our monospace fonts, overriding fomantic's
css reset which means expanded commit messages now follow the font
settings.
- Adjust link styling and keyword highlighting in commit message
- Consolidate .commit-summary styles to single selector group
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* add thumbnail preview section to attachments
* dont show thumbnail if the image is already shown inline
* update router to pass the `content` to the attachemnts template
* limit attachment preview height to 150px (same as width)
* remove unused css (referance removed in https://github.com/go-gitea/gitea/pull/11141/files#diff-9faae32445ed9673de2830c9fc35e93f44487f0a0068202988adaf00a5bac850L66 )
* dont show divider after edit if no attachemnts
Co-authored-by: James <inbox.dev@jhodges.co.uk>
Co-authored-by: 6543 <6543@obermui.de>
* Diff stat improvements
- Combine number to just total number of changes
- Add tooltip over stats bar
- Increase contrast on file name
- Refactor classes and CSS to be more reusable
* misc tweaks
* make count bold
- Split up avatar rendering helpers for performance
- Fix showing repo SVG icon when no avatar is set
- Make repo SVG and avatar same size at 32px
- Fix fork line by adding vertical flexbox on repo title
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Fix issue participants
* use list class for margin
* remove wrapper and don't render on zero participants
* keep whitespace
* remove participants class
* add some margin for timetracking stuff
Co-authored-by: 6543 <6543@obermui.de>
Font weight 500 is not discernible from 400 on some fonts/operating
systems so push them back to previous value 600 except for
fomantic-ui elements which stay at 500.
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: 6543 <6543@obermui.de>
- Use original gitea logo on migrate page
- Add card styles and map colors to css vars
- Tweak migrate page, adding hover effect to cards
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Direct avatar rendering
This adds new template helpers for avatar rendering which output image
elements with direct links to avatars which makes them cacheable by the
browsers.
This should be a major performance improvment for pages with many avatars.
* fix avatars of other user's profile pages
* fix top border on user avatar name
* uncircle avatars
* remove old incomplete avatar selector
* use title attribute for name and add it back on blame
* minor refactor
* tweak comments
* fix url path join and adjust test to new result
* dedupe functions
* Add class to page content to unify top margin
Previously pages would individually set this margin but some didn't so
content would stick to the header without any space. Resolve this by
adding a new class that is added on all pages. The only place where we
remove this margin again is on the pages with menu or wrapper in the
header.
* fix admin notices
* fix team pages
* fix loading segment on gitgraph for arc-green
* fix last missing case
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Markdown and Repo header tweaks
- Use CSS vars for all markdown colors
- Tweak repo header, removing double borders and adjust sizes
- Use menu instead of buttons for issue open/close switcher
- Add emoji inversion for select emoji glyphs in arc-green
- Use border over box-shadow for all buttons
- Add spacing element to login form without openid
* repo settings navbar fix
* use shared template in more places and adjust dashboard
* fix remaining open/close combos
* Dropdowns and Labels fixes
- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page
* more dropdown fixes
* fix basic blue labels - fixes#13731
* improve class setting on svg
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Issue and Pulls lists rework
Reorganized and restyled the issue and pull request lists.
* color and layout tweaks
* use new issue list on dashboard as well
* move pagination into template
* misc tweaks
* fix label hover
* fix milestone list
* fix discrepancies between issue and milestone list, add new 'merge' helper
* fmt
* simplify merge helper
* remove whitespace
* fix startIndex
* further simplify dict merging
* rename helper to 'mergeinto' for clarity
* allow bottom-row to wrap
Co-authored-by: Lauris BH <lauris@nix.lv>
* Fix label display on new issues
PR #13570 broke label rendering for new issues and pulls because
missed the fact that the code was relying on the DOM elements being
toggled by JavaScript.
On top of that, the label rendering for new issues and pull was using
an outdated template which I consolidated in a new shared template.
* remove wrapper element and style tweaks
* style tweaks
* use shared template for whole label list
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* CSS color variables, less bold font weight
- Define color variables for fully saturated colors and apply them where
it made sense
- Add background color helper classes
- Globally reduce bold font weight from 700 to 500
- Remove border from timeline icons
- Unify dropzone styling
- Various border style consolidations
* attempt to fix test
* another attempt at tests
* fix contains
* Fix issue label rendering
Prevent rendering of inactive labels and make them wrap inline.
Fixes: https://github.com/go-gitea/gitea/issues/13566
* also don't render the placeholder
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Various style fixes
- Fix the rest of the monochrome borders for arc-green
- Fix close icon position on system notice modal and padding
- Fix selectable table color for arc-green
* proper fix for close icon
Co-authored-by: Lauris BH <lauris@nix.lv>
- Convert all tooltips to JS-based ones, fixing overflow issues
- Restyle issue dependencies/dependants
- Move popup styles to base style
- CSS Helper tweaks
- Unify pseudo element selectors and lint for it
Fixes: https://github.com/go-gitea/gitea/issues/13400
* Multiple GitGraph improvements.
Add backend support for excluding PRs, selecting branches and files.
Fix#10327
Signed-off-by: Andrew Thornton <art27@cantab.net>
* as per @silverwind
Signed-off-by: Andrew Thornton <art27@cantab.net>
* as per @silverwind
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Only show refs in dropdown we display on the graph
Signed-off-by: Andrew Thornton <art27@cantab.net>
* as per @silverwind
Signed-off-by: Andrew Thornton <art27@cantab.net>
* use flexbox for ui header
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Move Hide Pull Request button to the dropdown
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Add SHA and user pictures
Signed-off-by: Andrew Thornton <art27@cantab.net>
* fix test
Signed-off-by: Andrew Thornton <art27@cantab.net>
* fix test 2
Signed-off-by: Andrew Thornton <art27@cantab.net>
* fixes
* async
* more tweaks
* use tabs in tmpl
Signed-off-by: Andrew Thornton <art27@cantab.net>
* remove commented thing
Signed-off-by: Andrew Thornton <art27@cantab.net>
* fix linting
Signed-off-by: Andrew Thornton <art27@cantab.net>
* Update web_src/js/features/gitgraph.js
Co-authored-by: silverwind <me@silverwind.io>
* graph tweaks
* more tweaks
* add title
Signed-off-by: Andrew Thornton <art27@cantab.net>
* fix loading indicator z-index and position
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>
