Skip to content

Commit 4df260b

Browse files
KaviileeKaviilee
committed
feat(team): improve mobile responsive experience
1 parent 5eb2f77 commit 4df260b

31 files changed

Lines changed: 947 additions & 93 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
.playwright-cli
33
.playwright-mcp
44
.claude
5+
.codegraph/
56

67
node_modules
78
/dist

‎codegraph.json‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"exclude": [
3+
"/*",
4+
"!/src/",
5+
"/src/*",
6+
"!/src/pages/",
7+
"/src/pages/*",
8+
"!/src/pages/team/",
9+
"!/src/views/",
10+
"/src/views/*",
11+
"!/src/views/team/",
12+
"!/src/components/",
13+
"/src/components/*",
14+
"!/src/components/team/",
15+
"!/src/service/",
16+
"/src/service/*",
17+
"!/src/service/team/",
18+
"!/src/locale/",
19+
"/src/locale/*",
20+
"!/src/locale/index.js",
21+
"!/src/locale/en-US/",
22+
"/src/locale/en-US/*",
23+
"!/src/locale/en-US/team.js",
24+
"!/src/locale/vi/",
25+
"/src/locale/vi/*",
26+
"!/src/locale/vi/team.js",
27+
"!/src/locale/zh-CN/",
28+
"/src/locale/zh-CN/*",
29+
"!/src/locale/zh-CN/team.js",
30+
"!/src/locale/zh-TW/",
31+
"/src/locale/zh-TW/*",
32+
"!/src/locale/zh-TW/team.js",
33+
"!/src/router/",
34+
"/src/router/*",
35+
"!/src/router/i18n-head.js",
36+
"!/src/store/",
37+
"/src/store/*",
38+
"!/src/store/bus.js",
39+
"!/src/utils/",
40+
"/src/utils/*",
41+
"!/src/utils/common.js",
42+
"!/src/utils/commonFn.js",
43+
"!/src/utils/config.js",
44+
"!/src/utils/draggable.js",
45+
"!/src/utils/filters.js",
46+
"!/src/utils/team-role-mounts.js",
47+
"!/src/assets/",
48+
"/src/assets/*",
49+
"!/src/assets/data/",
50+
"/src/assets/data/*",
51+
"!/src/assets/data/team/",
52+
"!/src/assets/js/",
53+
"/src/assets/js/*",
54+
"!/src/assets/js/tv.js",
55+
"!/tests/",
56+
"/tests/*",
57+
"!/tests/team-*.test.mjs",
58+
"!/docs/",
59+
"/docs/*",
60+
"!/docs/project/",
61+
"/docs/project/*",
62+
"!/docs/project/team/",
63+
"!/docs/design/",
64+
"/docs/design/*",
65+
"!/docs/design/TEAM_*"
66+
]
67+
}

‎output/playwright/team-header-before.png‎

41.3 KB
Loading

‎src/assets/css/team/battle/index.less‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,29 @@
6868
}
6969
}
7070

71-
.el-switch {
72-
flex: none;
71+
.u-notice-filter {
72+
display: flex;
73+
min-width: 0;
74+
min-height: 36px;
75+
align-items: center;
76+
justify-content: space-between;
77+
padding: 6px 10px;
78+
border: 1px solid fade(#f59e0b, 18%);
79+
border-radius: 10px;
80+
background: fade(#fff, 62%);
81+
gap: @team-space-3;
7382
}
7483

75-
.el-switch__label {
84+
.u-notice-filter-label {
7685
color: @team-text-secondary;
7786
font-size: 12px;
7887
font-weight: 600;
88+
line-height: 18px;
89+
white-space: nowrap;
90+
}
91+
92+
.el-switch {
93+
flex: none;
7994
}
8095
}
8196
}
@@ -86,27 +101,14 @@
86101
.m-team-view {
87102
.m-battle-notice {
88103
padding: 12px;
89-
}
90-
91-
.m-battle-notice__content {
92-
gap: @team-space-2;
93104

94-
.el-switch {
95-
justify-self: end;
96-
}
97-
}
98-
}
99-
}
105+
.m-battle-notice__content {
106+
grid-template-columns: minmax(0, 1fr);
107+
gap: @team-space-2;
100108

101-
@media screen and (max-width: 480px) {
102-
.v-battle,
103-
.m-team-view {
104-
.m-battle-notice__content {
105-
align-items: start;
106-
grid-template-columns: minmax(0, 1fr);
107-
108-
.el-switch {
109-
justify-self: start;
109+
.u-notice-filter {
110+
width: 100%;
111+
}
110112
}
111113
}
112114
}

‎src/assets/css/team/events/apply.less‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import (reference) "../design-system/_tokens.less";
2+
13
.m-apply-event {
24
.pr;
35
h3 {
@@ -74,3 +76,87 @@
7476
.mb(20px);
7577
}
7678
}
79+
80+
.m-apply-logs-table {
81+
max-width: 100%;
82+
overflow-x: auto;
83+
}
84+
85+
@media screen and (max-width: 620px) {
86+
.m-apply-event {
87+
.u-goback {
88+
width: 100%;
89+
margin-bottom: 10px;
90+
}
91+
92+
h3 {
93+
padding: 10px 0;
94+
line-height: 1.6;
95+
letter-spacing: 1px;
96+
text-align: left;
97+
overflow-wrap: anywhere;
98+
}
99+
100+
.m-apply-info,
101+
.m-apply-logs {
102+
margin: @team-space-2 0;
103+
padding: @team-space-3;
104+
}
105+
106+
.m-apply-form {
107+
.u-box {
108+
margin-top: @team-space-3;
109+
}
110+
111+
.u-team {
112+
align-items: stretch;
113+
flex-direction: column;
114+
gap: 6px;
115+
116+
.u-label {
117+
width: auto;
118+
padding: 0;
119+
text-align: left;
120+
}
121+
122+
.el-select {
123+
width: 100%;
124+
}
125+
}
126+
127+
.el-form-item {
128+
display: block;
129+
}
130+
131+
.el-form-item__label {
132+
width: 100% !important;
133+
justify-content: flex-start;
134+
padding-bottom: 6px;
135+
}
136+
137+
.el-form-item__content {
138+
margin-left: 0 !important;
139+
}
140+
141+
.el-input,
142+
.el-select,
143+
.el-cascader,
144+
.el-textarea {
145+
width: 100% !important;
146+
}
147+
148+
.u-submit {
149+
margin-left: 0;
150+
151+
.el-button {
152+
width: 100%;
153+
min-height: 42px;
154+
}
155+
}
156+
}
157+
158+
.m-apply-logs-table .el-table {
159+
min-width: 640px;
160+
}
161+
}
162+
}

‎src/assets/css/team/member/list_member.less‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -928,13 +928,29 @@
928928

929929
@media screen and (max-width: 620px) {
930930
.m-member-subnav {
931-
margin-right: -@team-space-3;
932-
margin-left: -@team-space-3;
933-
padding-right: @team-space-3;
934-
padding-left: @team-space-3;
935-
border-right: 0;
936-
border-left: 0;
937-
border-radius: 0;
931+
width: 100%;
932+
margin-right: 0;
933+
margin-bottom: @team-space-3;
934+
margin-left: 0;
935+
padding: 4px;
936+
overflow: hidden;
937+
border: 1px solid @team-border-light;
938+
border-radius: 12px;
939+
gap: 3px;
940+
941+
button {
942+
min-width: 0;
943+
min-height: 38px;
944+
flex: 1;
945+
padding: 0 8px;
946+
border-radius: 9px;
947+
font-size: 12px;
948+
949+
&.is-active {
950+
background: @team-primary-soft;
951+
box-shadow: none;
952+
}
953+
}
938954
}
939955

940956
.m-member-panel-header {

0 commit comments

Comments
 (0)