마법사님들, 조언이 필요합니다.
테이블 빌더는 모바일과 태블릿에서는 완전히 쓸모가 없습니다. 왜냐하면 아무것도 할 수 없기 때문입니다. 그래서 테이블의 편집 아이콘은 숨겨져야 합니다. 현재 상태에서는 그저 혼란을 주는 노이즈일 뿐입니다.
CSS가 명백한 도구인 이유는, 다른 해결책이 있었다면 이미 사용되었을 것이기 때문이죠, 맞나요? 하지만 불필요한 연필 아이콘을 어떻게 숨길지 전혀 감이 잡히지 않습니다.
마법사님들, 조언이 필요합니다.
테이블 빌더는 모바일과 태블릿에서는 완전히 쓸모가 없습니다. 왜냐하면 아무것도 할 수 없기 때문입니다. 그래서 테이블의 편집 아이콘은 숨겨져야 합니다. 현재 상태에서는 그저 혼란을 주는 노이즈일 뿐입니다.
CSS가 명백한 도구인 이유는, 다른 해결책이 있었다면 이미 사용되었을 것이기 때문이죠, 맞나요? 하지만 불필요한 연필 아이콘을 어떻게 숨길지 전혀 감이 잡히지 않습니다.
이상적은 아니지만, 이 표는 내 휴대폰으로 만들었습니다:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| 이 표는 휴대폰으로 작성했습니다. | 불가능한 일은 아닙니다. 두 번 탭하면 키보드가 열립니다. | ||
| 추가된 행을 어떻게 삭제해야 할지 모르겠네요. | 아! 작성한 후 편집하면 됩니다. |
열을 삭제하려면 귀찮은 편집이 많이 필요해서 하지 않았습니다. ![]()
음, iPad와 iPhone에서는 매우 빠른 더블탭이 필요합니다. 하지만 여전히 — 어떤 형태로든 편집은 컴포저에서 훨씬 쉽습니다. 행을 추가하거나 삭제해야 하는 경우 등에는 테이블 에디터에서는 이를 수행할 수 없습니다.
두 가지 다른 에디터가 있고, 사용자가 어떤 종류의 편집이 필요한지에 따라 어느 것을 사용할지 선택해야 하는 것은 그저 나쁜 UX입니다. 그래서 더 작은 화면에서는 컴포저로 리디렉션해야 하며, 이를 위한 가장 쉬운 방법은 테이블 에디터의 연필 아이콘을 숨기는 것입니다.
이것은 아마도 제가 WYSIWYG 방식의 디자인에 반대하는 첫 번째 사례일 것입니다 — 아마도 그것이 너무 제한적이라서 그렇습니다.
모바일에서 표 편집 버튼을 숨기려면 사용할 수 있는 CSS 스니펫입니다:
.mobile-view .fullscreen-table-wrapper:hover .fullscreen-table-wrapper__buttons .btn-edit-table {
display: none;
opacity:0;
}
정말 감사합니다!
이제 왜 제 시도가 작동하지 않았는지 이해할 수 있습니다. 거의 이해했는데요. 왜 opacity:0인가요?