bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

feat(ui): redesign migration selection screen (#6795)

Browse source 
Ref https://codeberg.org/forgejo/design/issues/9.

Changes:
* Updated SVGs which had inconsistent paddings making them look off
* Better usability on mobile
* Better space efficiency on desktop, up to 4 columns
* Nice responsive design
* Less bland look on desktop. The borders were already here but invisible in Forgejo dark theme

Preview:
* https://codeberg.org/attachments/3c9e10ae-3315-46e5-b8bb-8021f6fd8936
* https://codeberg.org/attachments/8196ad89-5ab6-443a-98ce-a70dcc75bca9
* https://codeberg.org/attachments/24f52a14-2ac4-4949-8108-55c34bd3c650

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6795
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
0ko 2025-04-19 13:51:35 +00:00
parent 78e56ee2f7
commit a0c9e81611
17 changed files with 149 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/assets/img/svg/gitea-forgejo.svg generated
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="gitea-forgejo__forgejo-logo svg gitea-forgejo" viewBox="0 0 256 256" width="16" height="16"><g fill="none" transform="translate(28 28)"><path stroke="#f60" stroke-width="25" d="M58 168V70a50 50 0 0 1 50-50h20"/><path stroke="#d40000" stroke-width="25" d="M58 168v-30a50 50 0 0 1 50-50h20"/><circle cx="142" cy="20" r="18" stroke="#f60" stroke-width="15"/><circle cx="142" cy="88" r="18" stroke="#d40000" stroke-width="15"/><circle cx="58" cy="180" r="18" stroke="#d40000" stroke-width="15"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="gitea-forgejo__forgejo-logo svg gitea-forgejo" viewBox="0 0 212 212" width="16" height="16"><g fill="none" transform="translate(6 6)"><path stroke="#f60" stroke-width="25" d="M58 168V70a50 50 0 0 1 50-50h20"/><path stroke="#d40000" stroke-width="25" d="M58 168v-30a50 50 0 0 1 50-50h20"/><circle cx="142" cy="20" r="18" stroke="#f60" stroke-width="15"/><circle cx="142" cy="88" r="18" stroke="#d40000" stroke-width="15"/><circle cx="58" cy="180" r="18" stroke="#d40000" stroke-width="15"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 567 B

After

Width:  |  Height:  |  Size: 565 B

Before After
Before After

2
public/assets/img/svg/gitea-git.svg generated
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="svg gitea-git" width="16" height="16" aria-hidden="true"><path d="M42.2 22.1 25.9 5.8c-.5-.5-1.2-.8-1.9-.8s-1.4.3-1.9.8l-3.5 3.5 4.1 4.1c.4-.2.8-.3 1.3-.3 1.7 0 3 1.3 3 3 0 .5-.1.9-.3 1.3l4 4c.4-.2.8-.3 1.3-.3 1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3c0-.5.1-.9.3-1.3l-4-4c-.1 0-.2.1-.3.1v10.4c1.2.4 2 1.5 2 2.8 0 1.7-1.3 3-3 3s-3-1.3-3-3c0-1.3.8-2.4 2-2.8V18.8c-1.2-.4-2-1.5-2-2.8 0-.5.1-.9.3-1.3l-4.1-4.1L5.8 22.1c-.5.5-.8 1.2-.8 1.9s.3 1.4.8 1.9l16.3 16.3c.5.5 1.2.8 1.9.8s1.4-.3 1.9-.8l16.3-16.3c.5-.5.8-1.2.8-1.9s-.3-1.4-.8-1.9"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="svg gitea-git" width="16" height="16" aria-hidden="true"><path d="M46.99 21.6 26.4 1.01A3.45 3.45 0 0 0 24 0c-.884 0-1.768.379-2.4 1.01l-4.421 4.422 5.179 5.179A3.5 3.5 0 0 1 24 10.23c2.147 0 3.79 1.643 3.79 3.79 0 .632-.127 1.137-.38 1.642l5.053 5.053a3.5 3.5 0 0 1 1.642-.38c2.148 0 3.79 1.643 3.79 3.79s-1.642 3.79-3.79 3.79c-2.147 0-3.79-1.642-3.79-3.79 0-.631.127-1.137.38-1.642l-5.053-5.052c-.126 0-.253.126-.379.126v13.137c1.516.505 2.526 1.894 2.526 3.537 0 2.147-1.642 3.79-3.789 3.79s-3.79-1.643-3.79-3.79c0-1.643 1.011-3.032 2.527-3.537V17.432c-1.516-.506-2.526-1.895-2.526-3.537 0-.632.126-1.137.378-1.642l-5.178-5.18L1.01 21.6A3.45 3.45 0 0 0 0 24c0 .884.379 1.768 1.01 2.4L21.6 46.99A3.45 3.45 0 0 0 24 48c.884 0 1.768-.379 2.4-1.01L46.99 26.4A3.45 3.45 0 0 0 48 24c0-.884-.379-1.768-1.01-2.4"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 882 B

Before After
Before After

2
public/assets/img/svg/gitea-gogs.svg generated
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.733 67.733" class="svg gitea-gogs" width="16" height="16" aria-hidden="true"><g style="display:inline"><path d="M28.764 62.186c-.212-.03-.436-.106-.498-.17-.143-.149-.325-.78-.89-3.087-.248-1.01-.506-1.976-.574-2.146-.149-.372-.48-.586-2.138-1.376-1.849-.882-3.864-2.103-5.63-3.413l-.753-.56-2.322.68c-1.278.372-2.658.75-3.069.839l-.745.161-.352-.536c-.952-1.453-3.563-5.958-4.626-7.978l-.557-1.06.483-.591c.266-.326 1.293-1.418 2.282-2.427l1.8-1.835-.181-1.039c-.161-.925-.18-1.32-.183-3.624-.002-2.082.026-2.778.143-3.58l.146-.994-2.063-2.035c-1.532-1.51-2.104-2.127-2.22-2.393-.154-.353-.154-.361.003-.767.476-1.232 4.42-7.981 5.186-8.876l.257-.3.484.125c.267.07 1.586.437 2.93.818l2.445.691.43-.26c.236-.144.845-.565 1.352-.936 1.305-.955 2.69-1.762 4.708-2.743 1.875-.912 1.839-.883 2.124-1.683.066-.184.337-1.17.602-2.193.265-1.022.573-2.136.685-2.476.176-.534.233-.623.422-.665.484-.106 3.97-.15 7.292-.093l3.52.061.43 1.748c.51 2.069.91 3.48 1.128 3.991.174.407.008.309 2.594 1.536 1.355.643 2.654 1.424 4.307 2.59.702.497 1.338.945 1.413.996.11.075.503-.016 1.995-.464a91 91 0 0 1 3.022-.85l1.163-.295.145.192c.933 1.235 5.325 8.9 5.325 9.293 0 .334-.488.915-2.54 3.027l-1.894 1.948.158.96c.228 1.383.275 3.127.159 5.922l-.102 2.451 1.51 1.495c1.55 1.535 2.471 2.55 2.683 2.959.116.223.104.265-.329 1.131-1.29 2.583-4.51 8.106-4.924 8.445-.23.187-.907.06-3.362-.636-1.264-.358-2.428-.67-2.585-.693-.255-.038-.378.02-1.095.52-2.75 1.915-3.396 2.301-5.615 3.357-.864.41-1.587.808-1.713.941-.28.295-.5 1.01-1.142 3.71l-.508 2.141-1.894.05c-2.516.066-8.338.064-8.822-.004zm7.858-12.12c2.091-.389 5.175-1.724 6.867-2.974 1.797-1.327 4.758-4.883 4.977-5.976.047-.236.02-.268-.545-.647-.9-.603-2.188-1.377-5.078-3.05-4.184-2.421-4.523-2.676-4.524-3.398-.001-1.34-1.22-3.278-2.424-3.858-1.79-.861-3.842-.522-5.214.864-.315.318-.68.79-.821 1.058-1.356 2.595.091 5.559 3.005 6.155.886.181 1.73.074 2.913-.372l.88-.332 2.022 1.158c2.672 1.531 3.619 2.123 4.1 2.561.34.31.392.395.347.573-.077.304-.674 1.002-1.394 1.63-1.608 1.404-3.353 2.267-5.547 2.743-1.178.256-3.523.256-4.7 0-1.21-.262-1.987-.533-3.065-1.07a12.46 12.46 0 0 1-6.83-9.635c-.156-1.255-.067-3.198.201-4.38 1.025-4.512 4.41-7.971 8.972-9.169 1.369-.359 1.99-.43 3.327-.382 1.261.046 1.954.168 3.54.625.566.162 1.095.26 1.455.268.495.012.62-.018 1.01-.236 1.08-.605 1.36-1.855.603-2.693-1.318-1.458-6.683-2.214-10.374-1.462-2.483.506-5.054 1.805-6.994 3.535-2.575 2.295-4.26 4.712-5.127 7.353-.924 2.816-1.025 6.141-.275 9.11.774 3.063 2.55 5.963 4.958 8.095 2.442 2.162 5.767 3.672 8.928 4.055 1.089.132 3.735.05 4.807-.15z" style="display:inline;fill:#d75547;fill-opacity:1;fill-rule:evenodd;stroke:#428f29;stroke-width:.0190672;paint-order:markers fill stroke"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.725 67.725" class="svg gitea-gogs" width="16" height="16" aria-hidden="true"><g style="display:inline"><path d="M27.943 67.653c-.253-.035-.52-.127-.595-.205-.17-.176-.389-.932-1.065-3.691-.296-1.21-.605-2.364-.686-2.567-.178-.445-.575-.7-2.558-1.646-2.212-1.055-4.622-2.517-6.734-4.083l-.902-.67-2.778.812c-1.528.447-3.18.899-3.67 1.005l-.892.193-.42-.642c-1.14-1.738-4.263-7.126-5.535-9.544l-.666-1.266.578-.708c.318-.39 1.547-1.696 2.73-2.903l2.152-2.195-.216-1.243c-.192-1.107-.216-1.578-.219-4.335-.002-2.491.031-3.324.172-4.283l.175-1.19-2.47-2.434c-1.831-1.806-2.516-2.544-2.655-2.862-.184-.423-.184-.432.004-.918.57-1.473 5.287-9.547 6.203-10.617l.308-.36.58.15c.319.084 1.896.524 3.505.979l2.924.827.514-.312c.283-.171 1.011-.675 1.618-1.12 1.56-1.142 3.218-2.107 5.631-3.28 2.243-1.091 2.2-1.057 2.542-2.014.079-.22.402-1.4.72-2.623.316-1.222.685-2.555.82-2.961.21-.64.278-.747.504-.796.579-.127 4.75-.18 8.723-.111l4.21.073.515 2.09c.61 2.475 1.087 4.164 1.349 4.774.209.488.01.37 3.103 1.837 1.621.77 3.175 1.704 5.152 3.1.84.593 1.601 1.13 1.691 1.19.132.09.601-.019 2.387-.554 1.222-.367 2.849-.825 3.614-1.018l1.392-.352.173.23c1.116 1.476 6.37 10.647 6.37 11.116 0 .4-.584 1.095-3.04 3.621l-2.264 2.33.19 1.15c.272 1.654.327 3.74.188 7.083l-.121 2.932L63 41.431c1.854 1.836 2.956 3.05 3.21 3.539.139.266.124.317-.393 1.353-1.543 3.09-5.396 9.697-5.891 10.102-.274.224-1.084.07-4.022-.761-1.512-.429-2.904-.802-3.093-.83-.304-.044-.451.026-1.309.623-3.29 2.291-4.062 2.753-6.717 4.015-1.034.492-1.898.967-2.05 1.127-.334.353-.598 1.209-1.365 4.438l-.608 2.561-2.265.06c-3.01.079-9.974.076-10.554-.005zm9.4-14.499c2.502-.465 6.191-2.062 8.215-3.557 2.15-1.588 5.692-5.842 5.953-7.15.057-.28.024-.32-.651-.773-1.076-.722-2.617-1.647-6.075-3.648-5.005-2.897-5.411-3.202-5.412-4.065-.001-1.603-1.458-3.921-2.9-4.615-2.141-1.03-4.595-.624-6.236 1.034-.377.38-.815.944-.983 1.266-1.621 3.103.11 6.649 3.595 7.362 1.06.217 2.07.088 3.485-.445l1.053-.397 2.418 1.386c3.197 1.831 4.33 2.538 4.906 3.063.407.37.468.472.414.685-.092.364-.806 1.199-1.668 1.95-1.924 1.68-4.01 2.711-6.635 3.281-1.41.306-4.215.306-5.622.001-1.449-.315-2.378-.639-3.666-1.28a14.9 14.9 0 0 1-8.17-11.527c-.188-1.501-.081-3.825.24-5.24 1.225-5.397 5.274-9.535 10.732-10.967 1.637-.43 2.38-.515 3.98-.457 1.509.055 2.338.2 4.235.747.677.194 1.31.311 1.74.321.593.014.743-.021 1.208-.282 1.292-.725 1.626-2.22.721-3.221-1.576-1.745-7.993-2.65-12.41-1.75-2.97.606-6.045 2.16-8.365 4.229-3.08 2.746-5.096 5.636-6.133 8.796-1.107 3.368-1.227 7.346-.33 10.896.926 3.665 3.05 7.134 5.931 9.685 2.92 2.586 6.899 4.393 10.68 4.851 1.303.158 4.467.06 5.75-.179z" style="display:inline;fill:#d75547;fill-opacity:1;fill-rule:evenodd;stroke:#428f29;stroke-width:.0190659;paint-order:markers fill stroke"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After