Skip to content

Commit 8dcd7cf

Browse files
lutingltlutinglt
authored
探索/组织/用户仓库样式 github 布局 (#8)
Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>
1 parent 93e5fa8 commit 8dcd7cf

10 files changed

Lines changed: 142 additions & 17 deletions

File tree

‎.github/release-template.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## ✨ Feat
1+
## ✨ Feature
22

33
#### CSS 变量
44

‎.github/release.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1+
## ✨ Feature
2+
3+
#### CSS 变量
4+
5+
- 支持自定义探索/组织/用户页面的仓库列表列数
6+
- 支持自定义探索/组织页面的用户/组织列表列数
7+
18
## 🌈 Style
29

310
#### 更符合 GitHub 风格
411

512
- 同步 Issue/PR 的评论样式
613
- 同步表情菜单样式
7-
- 同步探索页面仓库样式
14+
- 同步探索/组织/用户页面的仓库列表样式
15+
- 同步探索/组织页面的用户列表样式
16+
- 同步探索页面的组织列表样式
17+
18+
## 🐞 Fix
19+
20+
- 修复探索页面下仓库的类型标签意外触发悬浮效果

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,14 @@ THEMES = gitea-dark, github-dark
5151
5252
### CSS 变量
5353

54-
| 变量名 | 描述 | Gitea (默认值) | Github | 推荐 | 最小值 | 最大值 |
55-
| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
56-
| --custom-clone-menu-width | 克隆菜单宽度 | 232px | 332px | 200px | 150px | 400px |
54+
| 变量名 | 描述 | 默认值 | Github | 推荐 | 最小值 | 最大值 |
55+
| :-------------------------------- | :-------------------------- | :----- | :----- | :---- | :----- | :----- |
56+
| --custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
57+
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
58+
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
59+
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 2 | | |
60+
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1 | | |
61+
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 2 | | |
5762

5863
## 截图
5964

‎TODO.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
### 重大
22

33
- gitea issue 默认标签颜色匹配使用 github 样式
4-
- 探索/组织/用户仓库样式 github 布局
54
- issue/PR 列表样式 github 布局
65
- styles/themes 库组件导出整理
76
- defineTheme 颜色生成代码重构

‎src/core/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
type Primitive = string | boolean | number | null | undefined;
22
type Tokens = { [key: string]: string | Tokens };
33

4+
export type CSSVarFunction = `var(--${string})`;
45
export type WithOptionalLayer<T extends Tokens> = T & { "@layer"?: string };
5-
66
export type MapLeafNodes<Obj, LeafType> = {
77
[Prop in keyof Obj]: Obj[Prop] extends Primitive
88
? LeafType

‎src/functions/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { scaleColorLight } from "./scss";
2+
export { fallbackVar } from "./var";

‎src/functions/var.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { CSSVarFunction } from "src/core/types";
2+
3+
type CSSFallbackVar = `var(--${string}, ${string})`;
4+
export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar {
5+
const var_name = cssvar.replace("var(--", "").replace(")", "");
6+
return `var(--${var_name}, ${fallback})`;
7+
}

‎src/types/vars.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,15 @@ const otherVars = {
3838
const customVars = {
3939
custom: {
4040
cloneMenuWidth: "custom-clone-menu-width",
41+
explore: {
42+
repolistColumns: "custom-explore-repolist-columns",
43+
userlistColumns: "custom-explore-userlist-columns",
44+
},
45+
userRepolistColumns: "custom-user-repolist-columns",
46+
org: {
47+
repolistColumns: "custom-org-repolist-columns",
48+
userlistColumns: "custom-org-userlist-columns",
49+
},
4150
},
4251
};
4352

‎styles/components/clone.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
1+
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
22

33
// 克隆按钮的弹窗
44
export const clone = css`

‎styles/components/explore.ts‎

Lines changed: 100 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import { css, otherThemeVars, themeVars } from "src/types/vars";
1+
import { fallbackVar } from "src/functions";
2+
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
3+
4+
const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2");
5+
const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2");
6+
const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1");
27

38
// 仓库列表
4-
export const repositoriesExplore = css`
5-
// [TODO] 组织和用户使用 Github 的列表样式, 探索页面手机端样式待完善
9+
export const repoList = css`
610
// 组织
7-
/* .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven, */
11+
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
812
// 用户
9-
/* .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve, */
13+
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
1014
// 探索
1115
.page-content.explore.repositories > .ui.container {
1216
> .flex-list {
1317
display: grid;
14-
grid-template-columns: repeat(2, 1fr);
15-
gap: 16px;
16-
1718
> .flex-item {
1819
border: 1px solid ${themeVars.color.light.border};
1920
border-radius: ${otherThemeVars.border.radius};
@@ -46,7 +47,9 @@ export const repositoriesExplore = css`
4647
color: ${themeVars.color.text.light.num1};
4748
gap: 16px;
4849
font-size: 12px;
49-
> .flex-text-inline .tw-mr-2 {
50+
> .flex-text-inline .color-icon {
51+
width: 12px;
52+
height: 12px;
5053
margin-right: 0 !important;
5154
}
5255
}
@@ -67,4 +70,92 @@ export const repositoriesExplore = css`
6770
}
6871
}
6972
}
73+
// 仓库列表列数
74+
// 组织
75+
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list {
76+
grid-template-columns: repeat(${orgRepoVar}, 1fr);
77+
gap: min(${orgRepoVar} * 8px, 16px);
78+
}
79+
// 用户
80+
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list {
81+
grid-template-columns: repeat(${userRepoVar}, 1fr);
82+
gap: min(${userRepoVar} * 8px, 16px);
83+
}
84+
// 探索
85+
.page-content.explore.repositories > .ui.container > .flex-list {
86+
grid-template-columns: repeat(${exploreRepoVar}, 1fr);
87+
gap: min(${exploreRepoVar} * 8px, 16px);
88+
}
89+
`;
90+
91+
const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3");
92+
const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2");
93+
94+
// 用户列表
95+
export const userList = css`
96+
// 组织
97+
.page-content.organization.members > .ui.container,
98+
// 探索的用户和组织
99+
.page-content.explore.users > .ui.container {
100+
> .flex-list {
101+
display: grid;
102+
> .flex-item {
103+
border: 1px solid ${themeVars.color.light.border};
104+
border-radius: ${otherThemeVars.border.radius};
105+
padding: 16px;
106+
> .flex-item-main {
107+
// 用户名称
108+
> .flex-item-title {
109+
gap: 8px;
110+
margin-bottom: 8px;
111+
// 用户标签
112+
> .label {
113+
font-size: 12px;
114+
padding: 3px 6px;
115+
}
116+
}
117+
// 用户描述
118+
> .flex-item-body {
119+
font-size: 12px;
120+
svg {
121+
width: 12px;
122+
min-width: 12px;
123+
}
124+
}
125+
}
126+
}
127+
}
128+
}
129+
// 用户列表列数
130+
// 组织
131+
.page-content.organization.members > .ui.container > .flex-list {
132+
grid-template-columns: repeat(${orgUserVar}, 1fr);
133+
gap: min(${orgUserVar} * 8px, 16px);
134+
}
135+
// 探索的用户和组织
136+
.page-content.explore.users > .ui.container > .flex-list {
137+
grid-template-columns: repeat(${exploreUserVar}, 1fr);
138+
gap: min(${exploreUserVar} * 8px, 16px);
139+
}
140+
`;
141+
142+
// 手机下的仓库和用户列表
143+
export const mobileList = css`
144+
@media (max-width: 767.98px) {
145+
// 组织的仓库列表
146+
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
147+
// 用户的仓库列表
148+
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
149+
// 探索的仓库列表
150+
.page-content.explore.repositories > .ui.container,
151+
// 组织的成员列表
152+
.page-content.organization.members >.ui.container,
153+
// 探索的用户和组织列表
154+
.page-content.explore.users >.ui.container {
155+
> .flex-list {
156+
grid-template-columns: 1fr;
157+
gap: 8px;
158+
}
159+
}
160+
}
70161
`;

0 commit comments

Comments
 (0)