luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-21 00:20:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat(ui): redesign migration selection screen (#6795)
Some checks are pending
/ release (push) Waiting to run
Details
testing / backend-checks (push) Has been skipped
Details
testing / frontend-checks (push) Has been skipped
Details
testing / test-unit (push) Has been skipped
Details
testing / test-e2e (push) Has been skipped
Details
testing / test-mysql (push) Has been skipped
Details
testing / test-pgsql (push) Has been skipped
Details
testing / test-sqlite (push) Has been skipped
Details
testing / test-remote-cacher (redis) (push) Has been skipped
Details
testing / test-remote-cacher (valkey) (push) Has been skipped
Details
testing / test-remote-cacher (garnet) (push) Has been skipped
Details
testing / test-remote-cacher (redict) (push) Has been skipped
Details
testing / security-check (push) Has been skipped
Details

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

5
web_src/css/base.css
View file

@ -18,6 +18,7 @@
/* other variables */
--border-radius: 4px;
--border-radius-medium: 6px;
--border-radius-large: 25px;
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
--opacity-disabled: 0.55;
--height-loading: 16rem;
@ -1282,10 +1283,6 @@ svg.text.purple,
width: 100%;
}
.migrate .svg.gitea-git {
color: var(--color-git);
}
.color-icon {
display: inline-block;
border-radius: var(--border-radius-full);

1
web_src/css/index.css
View file

@ -75,6 +75,7 @@
@import "./explore.css";
@import "./review.css";
@import "./actions.css";
@import "./migrate.css";
@tailwind utilities;
@import "./helpers.css";

68
web_src/css/migrate.css Normal file
View file

@ -0,0 +1,68 @@
.migrate .svg.gitea-git {
--git-logo-color: #f05133;
color: var(--git-logo-color);
}
.migrate-entries {
display: grid;
/* Limited to 4 cols by 1280px container */
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.5rem;
}
.migrate-entry svg {
padding: 1.5rem;
}
.migrate-entry {
display: flex;
flex-direction: column;
color: var(--color-text);
background: var(--color-card);
border: 1px solid var(--fancy-card-border);
border-radius: var(--border-radius-large);
transition: all 0.1s ease-in-out;
}
.migrate-entry:hover {
transform: scale(105%);
box-shadow: 0 0.5rem 1rem var(--color-shadow);
color: var(--color-text);
}
.migrate-entry .content {
width: 100%;
margin-top: .5rem;
padding: 1rem;
flex: 1;
}
.migrate-entry .description {
margin-top: .5rem;
text-wrap: balance;
}
/* Desktop layout features */
@media (min-width: 599.98px) {
.migrate-entry .content {
text-align: center;
border-top: 1px solid var(--fancy-card-border);
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
background: var(--fancy-card-bg);
}
}
/* Mobile layout features */
@media (max-width: 600px) {
.migrate-entries {
grid-template-columns: repeat(1, 1fr);
}
.migrate-entry {
flex-direction: row;
}
.migrate-entry svg {
height: 100%;
width: 100%;
max-width: 128px;
}
}

31
web_src/css/repo.css
View file

@ -2764,37 +2764,6 @@ tbody.commit-list {
border-left: 1px solid var(--color-secondary);
}
.migrate-entries {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 0 !important;
}
@media (max-width: 767.98px) {
.migrate-entries {
grid-template-columns: repeat(1, 1fr);
}
}
.migrate-entry {
transition: all 0.1s ease-in-out;
box-shadow: none !important;
border: 1px solid var(--color-secondary);
color: var(--color-text) !important;
width: auto !important;
margin: 0 !important;
}
.migrate-entry:hover {
transform: scale(105%);
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
}
.migrate-entry .description {
text-wrap: balance;
}
.commits-table .commits-table-right form {
display: flex;
align-items: center;

3
web_src/css/themes/theme-forgejo-dark.css
View file

@ -196,7 +196,6 @@
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: #3fb950;
--color-icon-red: #f85149;
@ -228,6 +227,8 @@
--color-active: var(--steel-650);
--color-menu: var(--steel-700);
--color-card: var(--steel-700);
--fancy-card-bg: var(--steel-650);
--fancy-card-border: var(--steel-600);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--steel-800);
--color-markup-code-inline: var(--steel-850);

3
web_src/css/themes/theme-forgejo-light.css
View file

@ -212,7 +212,6 @@
--color-orange-badge: #ea580c;
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green-light);
--color-icon-red: var(--color-red-light);
@ -244,6 +243,8 @@
--color-active: #d4d4d8aa;
--color-menu: var(--zinc-100);
--color-card: var(--zinc-50);
--fancy-card-bg: var(--zinc-100);
--fancy-card-border: var(--zinc-200);
--color-markup-table-row: #ffffff06;
--color-markup-code-block: var(--zinc-150);
--color-markup-code-inline: var(--zinc-200);

3
web_src/css/themes/theme-gitea-dark.css
View file

@ -179,7 +179,6 @@
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
@ -209,6 +208,8 @@
--color-active: #e8e8ff24;
--color-menu: #151a1e;
--color-card: #151a1e;
--fancy-card-bg: #14171a;
--fancy-card-border: #3b444a;
--color-markup-table-row: #e8e8ff0f;
--color-markup-code-block: #e8e8ff12;
--color-markup-code-inline: #e8e8ff28;

3
web_src/css/themes/theme-gitea-light.css
View file

@ -179,7 +179,6 @@
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
@ -209,6 +208,8 @@
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
--fancy-card-bg: #ffffff;
--fancy-card-border: #d0d7de;
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;