Skip to content

Commit 86445b7

Browse files
seocyluckyseocylucky
authored
Merge pull request #815 from githru/fix/#790-summary-detail-list-style
[view] Summary 내 Detail 컴포넌트 내부 콘텐츠 스타일 개선 작업
2 parents c09aa9c + e9c814f commit 86445b7

File tree

3 files changed

+63
-54
lines changed

3 files changed

+63
-54
lines changed

‎packages/view/src/components/Detail/Detail.scss‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,37 +46,42 @@
4646
}
4747

4848
.detail__commit-list {
49+
width: 100%;
4950
display: flex;
5051
flex-direction: column;
51-
row-gap: 0.4375rem;
5252
padding: 1.25rem;
5353
font-size: $font-size-body;
5454

5555
.detail__commit-item {
5656
width: 100%;
5757
display: flex;
5858
justify-content: space-between;
59+
row-gap: 0.4375rem;
60+
align-items: flex-start;
5961
color: $color-medium-gray;
6062

6163
.commit-item__detail {
6264
color: $color-white;
6365
display: flex;
6466
justify-content: space-between;
65-
align-items: center;
67+
align-items: flex-start;
6668
width: 100%;
69+
flex-grow: 1;
6770
padding-left: 0.3125rem;
71+
padding-bottom: 1rem;
6872

69-
.commit-item__avatar-message {
73+
.commit-item__left {
7074
display: flex;
71-
align-items: center;
75+
align-items: flex-start;
76+
gap: 0.625rem;
7277
width: 100%;
7378

7479
.commit-item__message-container {
7580
position: relative;
7681
overflow: visible;
7782
flex-grow: 1;
83+
padding-top: 0.3rem;
7884
padding-right: 3.125rem;
79-
width: auto;
8085

8186
.commit-item__message {
8287
display: -webkit-box;
@@ -85,45 +90,46 @@
8590
overflow: hidden;
8691
color: $color-white;
8792
margin: 0 0.25rem 0 0.9375rem;
93+
cursor: pointer;
8894

8995
&:hover {
9096
display: block;
91-
cursor: pointer;
97+
-webkit-line-clamp: unset;
98+
white-space: normal;
9299
overflow: visible;
93-
position: absolute;
94-
z-index: 10;
95-
background-color: $color-dark-gray;
96-
padding-bottom: 0.3125rem;
97-
top: -0.4375rem;
98100
}
99101
}
100102
}
101103
}
102104

103-
.commit-item__author-date {
104-
display: block;
105-
position: relative;
105+
.commit-item__right {
106+
display: flex;
107+
padding-top: 0.3rem;
108+
align-items: flex-end;
109+
text-align: right;
110+
gap: 0.625rem;
106111
white-space: nowrap;
107-
}
108-
}
109112

110-
.commit-item__commit-id {
111-
display: flex;
112-
justify-content: center;
113-
align-items: center;
114-
width: 6em;
115-
position: relative;
113+
.commit-item__commit-id {
114+
width: fit-content;
116115

117-
.commit-id__link {
118-
text-decoration: none;
119-
color: $color-light-gray;
116+
.commit-id__link {
117+
text-decoration: none;
118+
color: $color-light-gray;
120119

121-
&:visited {
122-
color: $color-light-gray;
120+
&:visited {
121+
color: $color-light-gray;
122+
}
123+
124+
&:hover {
125+
color: var(--color-primary);
126+
}
127+
}
123128
}
124129

125-
&:hover {
126-
color: var(--color-primary);
130+
.commit-item__author-date {
131+
display: block;
132+
position: relative;
127133
}
128134
}
129135
}

‎packages/view/src/components/Detail/Detail.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
7575
className="detail__commit-item"
7676
>
7777
<div className="commit-item__detail">
78-
<div className="commit-item__avatar-message">
78+
<div className="commit-item__left">
7979
{authSrcMap && (
8080
<Author
8181
name={author.names.toString()}
@@ -86,27 +86,29 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
8686
<span className="commit-item__message">{message}</span>
8787
</div>
8888
</div>
89-
<span className="commit-item__author-date">
90-
{author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
91-
</span>
92-
</div>
93-
<div className="commit-item__commit-id">
94-
<a
95-
href={`https://github.com/${owner}/${repo}/commit/${id}`}
96-
onClick={handleCommitIdCopy(id)}
97-
tabIndex={0}
98-
onKeyDown={handleCommitIdCopy(id)}
99-
className="commit-id__link"
100-
>
101-
<Tooltip
102-
className="commit-id__tooltip"
103-
placement="right"
104-
title={id}
105-
PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
106-
>
107-
<p>{`${id.slice(0, 6)}`}</p>
108-
</Tooltip>
109-
</a>
89+
<div className="commit-item__right">
90+
<span className="commit-item__author-date">
91+
{author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
92+
</span>
93+
<div className="commit-item__commit-id">
94+
<a
95+
href={`https://github.com/${owner}/${repo}/commit/${id}`}
96+
onClick={handleCommitIdCopy(id)}
97+
tabIndex={0}
98+
onKeyDown={handleCommitIdCopy(id)}
99+
className="commit-id__link"
100+
>
101+
<Tooltip
102+
className="commit-id__tooltip"
103+
placement="right"
104+
title={id}
105+
PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
106+
>
107+
<p>{id.slice(0, 6)}</p>
108+
</Tooltip>
109+
</a>
110+
</div>
111+
</div>
110112
</div>
111113
</li>
112114
);

‎packages/view/src/components/VerticalClusterList/Summary/Summary.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
display: flex;
55
flex-direction: column;
66
flex-grow: 1;
7-
padding-left: 0.625rem;;
7+
padding-left: 0.625rem;
88
padding-right: 10px;
99
width: 100%;
1010
height: 100%;
@@ -28,6 +28,7 @@
2828
@extend .cluster-summary__info;
2929
border-radius: 1.5625rem;
3030
background-color: $color-dark-gray;
31+
overflow: hidden;
3132
}
3233
}
3334
}
@@ -118,6 +119,6 @@
118119
.detail {
119120
overflow: auto;
120121
height: 13.75rem;
121-
max-height: 17.5rem;
122-
padding: 0.625rem 1.875rem;
122+
max-height: fit-content;
123+
padding: 0.625rem 1.075rem;
123124
}

0 commit comments

Comments
 (0)