안녕하세요,
이것은 우리 포럼에서 흔히 발생하는 문제입니다. 네이티브 모바일 컨텍스트 메뉴와 선택 기능이 에디터 버튼 바 사용을 복잡하게 만듭니다. 그래서 저는 몇 가지 해킹 방식의 변경 사항 *(추가 작업 필요)*을 적용했는데, 아이디어로서는 괜찮다고 생각합니다…
컨텍스트 메뉴가 에디터 버튼 바를 가립니다.
선택 기능과 컨텍스트 메뉴가 옵션 팝업 메뉴를 가립니다.
모바일 환경에서 에디터 버튼 바 섹션을 에디터 하단으로 이동시키고, 옵션 팝업 메뉴의 위치도 변경했습니다.
데스크톱
모바일
이렇게 하면 네이티브 선택 및 컨텍스트 메뉴 요소가 이 부분을 가리지 않습니다.
공통 > CSS
.d-editor-textarea-wrapper {
.d-editor-button-bar {
display: flex;
overflow-x: auto;
background: var(--primary-very-low);
.btn,
.select-kit {
flex: 1;
color: var(--primary-high);
}
// 팝업 메뉴
.select-kit.dropdown-select-box.toolbar-popup-menu-options {
.select-kit-row {
.d-icon {
color: var(--primary-high);
}
.texts {
.name {
color: var(--primary-high);
}
}
}
}
}
}
모바일 > CSS
#reply-control {
.submit-panel {
margin-top: 1em;
}
}
.d-editor-textarea-wrapper {
flex-direction: column-reverse;
.d-editor-input {
// 마지막 줄 선택이 버튼 바를 가리지 않도록 하단 패딩을 크게 설정
padding-bottom: 1.75em;
}
.d-editor-button-bar {
border-top: 1px solid var(--primary-low);
border-bottom: none;
// 팝업 메뉴
.select-kit.dropdown-select-box.toolbar-popup-menu-options {
position: static;
.select-kit-filter {
display: none;
}
.select-kit-body {
transform: none !important;
top: auto !important;
bottom: 0 !important;
flex-direction: row;
justify-content: flex-start;
max-width: 100%;
width: 100% !important;
overflow-x: auto;
background: var(--primary-very-low);
border: none;
}
.select-kit-row {
padding: 0.5em 0.65em;
border: 1px solid transparent;
border-top: none;
}
.select-kit-collection {
display: contents;
}
}
}
}
13개의 좋아요
정말 좋습니다, 정말 감사합니다. 아주 작은 변경이지만 모바일 경험을 정말 훌륭하게 만들어 주셨어요
4개의 좋아요
nathank
1월 14, 2023, 3:21오전
3
네, 저도 같은 문제를 겪어 봤고, 이건 정말 훌륭한 개선이 될 것 같습니다.
테마 컴포넌트가 나올 것 같은 예감이 드네요…
5개의 좋아요
jidanni
2월 25, 2023, 10:06오후
4
정말 멋진 아이디어네요. 입력 창에 텍스트가 3줄 정도만 있는 기기에서도 테스트해 주세요. 첫 번째 스크린샷처럼 12줄 정도가 아니라 말입니다. Such a tiny window to edit here on a cell phone
2개의 좋아요
Jagster
8월 22, 2024, 5:28오후
5
그 솔루션은 정말 마음에 들었지만, 요즘 AI 어시스턴트와 잘 안 맞고 있어요
2개의 좋아요
Heliosurge
8월 22, 2024, 6:39오후
6
Don, 안녕하세요.
모바일 Android 키보드에 대한 해결책이 있을까 해서 여쭤봅니다.
Google Pixel 8 및 기타 일부 Android 기기에서 Customization > Theme Customization > Theme component
제 이해가 맞다면, 하단에 패딩(padding)을 추가하여 키보드가 빈 영역만 가리도록 수정할 수 있을 것 같습니다. 어떻게 생각하시나요?
1개의 좋아요
Don
8월 22, 2024, 11:02오후
7
안녕하세요
모바일 / CSS
.fk-d-menu {
&[data-identifier=ai-composer-helper-menu] {
position: fixed;
display: block;
max-width: 730px !important;
width: 100%;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%);
animation: none;
.fk-d-menu__inner-content {
background-color: transparent;
border: none;
box-shadow: none;
}
.ai-composer-helper-menu {
width: 100%;
.ai-custom-prompt {
&__input[type=text] {
width: 100%;
}
}
.ai-helper-loading {
display: flex;
justify-content: center;
}
.ai-helper-button-group {
justify-content: center;
}
&:not(.is-expanded) {
position: unset;
background: none;
width: 100%;
right: 0;
padding: 0;
ul {
position: absolute;
right: 8px;
button {
background: var(--secondary);
border: none;
border-radius: var(--d-button-border-radius);
box-shadow: 0 0 0 1px var(--primary-medium);
width: 4.5em;
height: 1.7em;
margin-top: calc(var(--header-offset) + 8px);
animation: none;
.d-icon {
margin-right: 0.45em;
}
.d-button-label {
display: block;
color: var(--primary-high);
font-weight: 600;
}
}
}
}
}
}
}
#reply-control.open {
height: 100%;
}
@Heliosurge , 이 부분은 확신이 서지 않는데, 만약 이것이 일반적인 문제이거나 코어 문제라면 스크린샷/비디오와 함께 새로운 Contribute > UX
1개의 좋아요
Jagster
8월 22, 2024, 11:32오후
9
아이폰에서는 잘 작동하지만, 톱니바퀴 아이콘이 이상하게 열립니다. 버튼 바 안쪽에서 열리거든요.
1개의 좋아요
Heliosurge
8월 23, 2024, 12:52오전
10
알겠습니다, Don님!
Character count 컴포넌트에 대한 지원을 추가하기 위해 이 코드를 추가했습니다.
모바일 CSS
//* Moves character count above bottom composer bar
.character-counts {
bottom: 2.5em !important;
}
이 코드를 추가하기 전에는 문자 수 표시와 작성 바가 서로 겹쳐 있었습니다.
결과
1개의 좋아요
Jagster
8월 23, 2024, 5:51오전
11
도구 모바를 위로 옮긴 줄 알았어요. 하지만 여전히 아래에 있어야 하는 거 아닌가요? 음, iPhone에서는 위에 있지만, 스크롤이 가능하긴 해요.
Don
8월 23, 2024, 6:09오전
12
설계상 그런 것 같습니다. OP의 마지막 영상을 참고해 보세요.
제가 마지막으로 공유한 코드는 AI 버튼의 위치를 설정하는 용도로만 사용되며, OP 코드에 추가하는 것입니다. 하지만 물론 따로 사용해도 됩니다.
Jagster
8월 23, 2024, 6:11오전
13
추가로? 네, 모바일 섹션을 완전히 교체했어요
수정
OP와 새로운 스니펫을 모두 사용했을 때, 버튼 바가 있어야 할 위치에 제대로 표시되고 정상적으로 작동합니다. 하지만 이제 AI 아이콘이 사라졌어요
수정2
컴포저의 햄버거 메뉴를 탭하면, 즉 버튼 바를 숨기면 AI 아이콘이 다시 나타납니다.
그리고 iPad의 톱니바퀴 아이콘은 아무 반응이 없어요.
이전 제 엉뚱한 이야기들보다 좀 더 나아 보이는가요?
1개의 좋아요
Don
8월 23, 2024, 7:39오전
14
네, 역순 컬럼이나 다른 정렬 방식에서는 작동하지 않는 것 같습니다. 그래서 이 방식이 작동하지 않는다면, 이 두 가지 수정 사항을 결합하기 위해 우리가 할 수 있는 일은 많지 않을 것 같습니다.
작동하도록 하는 새로운 우회 방법을 찾고, 구조를 조금씩 재설계해 보겠습니다…
Jagster
8월 23, 2024, 7:46오전
15
아쉽네요. 저 같은 일반인 입장에서는, Discourse에서 AI 도우미 표시 방식을 변경한 것이 Apple 기기에서 여러 문제를 일으킨 것처럼 들리거든요. 왜냐하면 이전에는 당신의 해결책이 잘 작동했으니까요
sam
8월 27, 2024, 8:28오전
16
최근에 작성 화면의 기어 버튼을 눌러 보셨나요? 거기에서 교정 기능을 위한 단축키와 링크를 추가했는데, 모바일에서 사용이 매우 간편합니다.
Jagster
8월 27, 2024, 8:38오전
17
아직 해본 적이 없어요. 꽤 마음에 드네요. 영어를 이렇게나 엉망으로 쓰는 일이 없도록, 앞으로는 교정 기능을 더 자주 사용해야겠어요.
그런데 AI 도우미가 제공하는 다른 옵션들이 빠져 있는 것 같아요. 하지만 물론, 설정(코그) 솔루션은 정말 사용하기가 쉽네요.
1개의 좋아요
Heliosurge
1월 21, 2025, 10:53오후
18
돈, 안녕
바에서 보이지 않는 항목이 더 이상 스크롤되지 않는 것 같아. 코드를 업데이트해야 할 것 같아.
