채팅 페이지의 디자인을 개선하고 더 매끄러운 느낌을 주기 위해 몇 가지 간단한 조정 작업을 했습니다. 변경 사항을 정리해 보면 다음과 같습니다:
- 타입 인디케이터 위치 이동:
타입 인디케이터를 텍스트 상자 아래가 아닌 위에 표시하도록 재배치했습니다. 누군가가 입력 중일 때 더 자연스럽게 보이고 눈에 잘 띕니다. - 타입 인디케이터 글꼴 크기 증가:
타입 인디케이터의 글꼴 크기를 약간 키웠습니다. 이제 더 잘 보이고 살짝 두드러져 한눈에 알아보기가 쉬워졌습니다. - 이미지 정리:
이미지를 감싸고 있던 문서 이름/URL을 제거하고 작은 모서리 반경(border radius)을 추가했습니다. 이를 통해 이미지가 더 깔끔하고 세련된 느낌을 주며 불필요한 요소가 사라졌습니다. - 타입 인디케이터 동적 효과 추가:
타입 인디케이터에 작은 동적 효과를 추가했습니다. 이제 인디케이터가 표시되면 메시지가 공간을 만들기 위해 살짝 위로 슬라이드되고, 인디케이터가 사라지면 메시지가 다시 아래로 슬라이드됩니다. 이 부드러운 전환은 전체 경험을 더 유동적이고 인터랙티브하게 만들어 줍니다.
이것들은 모두 작은 디자인 조정 사항들입니다. 제 입장에서는 더 깔끔하고, 더 매끄럽고, 전반적으로 더 세련되어 보입니다. 여러분의 의견을 듣고 싶으며, 다른 변경 사항이나 개선 사항이 있다면 자유롭게 제안해 주세요!
아래는 해당 코드입니다:
// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
order: -1; /* Moves the replying indicator above the text area */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Cover the container to preserve the border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Rounded corners */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Adjust the value as needed */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Default position when not typing */
transition: margin-top 0.3s ease; /* Smooth transition */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position when typing */
}
참고: 이것은 특히 모바일 환경을 위한 것입니다.
현재 모습은 다음과 같습니다:
