Skip to content

Commit 972253c

Browse files
wlgusqkrwlgusqkr
authored
docs: TeamPage optimised mobile devices (#642)
* docs: TeamPage optimised mobile devices * refactor: update mobile breakpoint to 768px
1 parent 0be5593 commit 972253c

File tree

2 files changed

+60
-60
lines changed

2 files changed

+60
-60
lines changed

‎website/src/pages/team/index.css‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,101 +19,101 @@
1919

2020
/* Derived from https://github.com/apache/streampark-website/tree/dev/src/pages/team */
2121
.team_page {
22-
margin-top: 50px !important;
22+
margin-top: 50px !important;
2323
}
2424

2525
.team_page h1:first-child {
26-
font-size: 3rem;
26+
font-size: 3rem;
2727
}
2828

2929
.team_page a {
30-
text-decoration: none;
30+
text-decoration: none;
3131
}
3232

3333
.team_page .team_title {
34-
margin-top: 40px;
34+
margin-top: 40px;
3535
}
3636

3737
.team_page .team_desc {
38-
margin-bottom: 40px;
38+
margin-bottom: 40px;
3939
}
4040

4141
.team_page .team_indent {
42-
line-height: 40px;
42+
line-height: 40px;
4343
}
4444

4545
.team_page .desc {
46-
font-size: 1rem;
47-
margin-left: .5rem;
46+
font-size: 1rem;
47+
margin-left: 0.5rem;
4848
}
4949

5050
.team-row {
51-
--bs-gutter-x: 1.5rem;
52-
--bs-gutter-y: 0;
53-
display: -ms-flexbox;
54-
display: flex;
55-
-ms-flex-wrap: wrap;
56-
flex-wrap: wrap;
57-
margin-top: calc(-1 * var(--bs-gutter-y));
58-
margin-right: calc(-0.5 * var(--bs-gutter-x));
59-
margin-left: calc(-0.5 * var(--bs-gutter-x));
51+
--bs-gutter-x: 1.5rem;
52+
--bs-gutter-y: 0;
53+
display: -ms-flexbox;
54+
display: flex;
55+
-ms-flex-wrap: wrap;
56+
flex-wrap: wrap;
57+
margin-top: calc(-1 * var(--bs-gutter-y));
58+
margin-right: calc(-0.5 * var(--bs-gutter-x));
59+
margin-left: calc(-0.5 * var(--bs-gutter-x));
6060
}
6161

6262
.team-box {
63-
width: 20% !important;
64-
padding: 12px;
63+
width: 20% !important;
64+
padding: 12px;
6565
}
6666

6767
.team-user-img {
68-
width: 80px;
69-
border-radius: 50%;
70-
border: 2px solid #fff;
68+
width: 80px;
69+
border-radius: 50%;
70+
border: 2px solid #fff;
7171
}
7272

7373
.bg-team {
74-
margin-top: -1.5rem !important;
75-
padding: 2.5rem 1rem 0.5rem 1rem;
76-
background-color: #ffffff !important;
77-
border-radius: 0.75rem;
78-
box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important;
74+
margin-top: -1.5rem !important;
75+
padding: 2.5rem 1rem 0.5rem 1rem;
76+
background-color: #ffffff !important;
77+
border-radius: 0.75rem;
78+
box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.16) !important;
7979
}
8080

8181
.team-link {
82-
background-color: #fff;
83-
border-radius: 50%;
84-
width: 1.5rem;
85-
height: 1.5rem;
86-
display: inline-flex;
87-
align-items: center;
88-
justify-content: center;
89-
text-align: center;
90-
font-size: 75%;
91-
line-height: normal;
92-
margin-right: 0.25rem;
82+
background-color: #fff;
83+
border-radius: 50%;
84+
width: 1.5rem;
85+
height: 1.5rem;
86+
display: inline-flex;
87+
align-items: center;
88+
justify-content: center;
89+
text-align: center;
90+
font-size: 75%;
91+
line-height: normal;
92+
margin-right: 0.25rem;
9393
}
9494

9595
.team-link .github-icon {
96-
width: 20px;
97-
height: 20px;
98-
color: #fff;
96+
width: 20px;
97+
height: 20px;
98+
color: #fff;
9999
}
100100

101101
[data-theme="dark"] .team-link {
102-
background-color: #95999c;
102+
background-color: #95999c;
103103
}
104104

105105
[data-theme="dark"] .bg-team {
106-
background-color: #0e1114 !important;
106+
background-color: #0e1114 !important;
107107
}
108108

109109
.divider {
110-
width: 100%;
111-
height: 1px;
112-
background-color: #dfdfdf;
110+
width: 100%;
111+
height: 1px;
112+
background-color: #dfdfdf;
113113
}
114114

115-
.block {
116-
width: 1200px;
117-
padding: 0 20px;
118-
margin: 0 auto;
115+
@media (max-width: 768px) {
116+
.team-box {
117+
width: 50% !important;
118+
}
119119
}

‎website/src/pages/team/index.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function () {
4444
<BrowserOnly>
4545
{() => {
4646
return <Layout>
47-
<div className="block team_page" style={{padding: "10px 0 30px"}}>
47+
<div className="container team_page">
4848
<h1><Translate>team.name</Translate></h1>
4949
<p className="team_desc team_indent"><Translate>team.desc</Translate></p>
5050

@@ -56,17 +56,17 @@ export default function () {
5656
{
5757
dataSource.pmc.map((item, i) => (
5858
<div className='team-box' key={i} data-aos="fade-up" data-aos-delay={i * 100}>
59-
<div style={{textAlign: "center"}}>
60-
<div style={{overflow: "hidden", zIndex: 1}}>
59+
<div style={{ textAlign: "center" }}>
60+
<div style={{ overflow: "hidden", zIndex: 1 }}>
6161
<img className="team-user-img" src={avatarUrl(item.githubId)} title=""
62-
alt=""/>
62+
alt="" />
6363
</div>
6464
<div className={item.isMentor ? 'team-mentor bg-team' : 'bg-team'}>
6565
<h5 className="team-name">{item.name}</h5>
6666
<small>{getGitName(item.gitUrl)}</small>
6767
<div>
6868
<a className="team-link" href={item.gitUrl}>
69-
<Github className="github-icon"/>
69+
<Github className="github-icon" />
7070
</a>
7171
</div>
7272
</div>
@@ -83,18 +83,18 @@ export default function () {
8383
{
8484
dataSource.committer.map((item, i) => (
8585
<div className='team-box' key={i} data-aos="fade-up" data-aos-delay={i * 100}>
86-
<div style={{textAlign: "center"}}>
87-
<div style={{overflow: "hidden", zIndex: 1}}>
86+
<div style={{ textAlign: "center" }}>
87+
<div style={{ overflow: "hidden", zIndex: 1 }}>
8888
<img className="team-user-img" src={avatarUrl(item.githubId)}
89-
title=""
90-
alt=""/>
89+
title=""
90+
alt="" />
9191
</div>
9292
<div className="bg-team">
9393
<h5 className="team-name">{item.name}</h5>
9494
<small>{getGitName(item.gitUrl)}</small>
9595
<div>
9696
<a className="team-link" href={item.gitUrl}>
97-
<Github className="github-icon"/>
97+
<Github className="github-icon" />
9898
</a>
9999
</div>
100100
</div>

0 commit comments

Comments
 (0)