안녕하세요,
Discourse Reactions 플러그인에 대해 CSS를 수정했습니다. 이제 Facebook의 리액션 버튼과 매우 유사한 모습을 하고 있습니다.
기본 리액션인 
을 포함하여 총 6개의 리액션 버튼입니다.
COMMON / SCSS
아래 코드를 common - css 섹션에 배치하세요.
중요 공지: content: 'Love it!', content: 'Beautiful' 등의 줄을 편집하여 라벨 위의 이모지를 수정할 수 있습니다. 물론 원하는 리액션을 자유롭게 사용할 수 있습니다. 이는 단순히 리액션 위에 표시되는 라벨일 뿐입니다.
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
모바일
모바일에서는 리액션 피커의 위치를 position fixed로 설정했습니다.
이것은 이러한 이상한 동작을 방지하는 가능한 방법입니다. 
이렇게 보입니다
리액션 피커에서 발생했던 것과 마찬가지로 모바일의 상태 패널에서도 동일한 문제가 발생하여, 이 또한 position fixed를 사용했습니다.
Mobile / SCSS
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
기본 좋아요 표시 섹션 숨기기
COMMON / CSS
Reactions State Panel에서도 해당 정보가 표시되므로, 기본 ‘누가 좋아요를 눌렀는지’ 섹션을 숨겼습니다.
.who-liked {
display: none;
}
…
