From 527a070bbf625ee0848124f9e18c6a017538cb9d Mon Sep 17 00:00:00 2001 From: suhjae Date: Thu, 17 Oct 2024 09:58:36 +0900 Subject: [PATCH] fix: UI responsiveness --- app.config.ts | 4 ++-- components/AppFooter.vue | 10 ++++++---- content/1.docs/2.training/1.index.md | 4 ++-- .../2.training/2.rapid-visual-perception.md | 4 ++-- .../2.training/3.sequential-visual-memory.md | 6 +++--- .../2.training/4.character-sequencing.md | 4 ++-- .../2.training/5.character-guesstimate.md | 6 ------ .../1.docs/2.training/6.character-matching.md | 6 ------ layouts/default.vue | 19 ++++++++++++------- 9 files changed, 29 insertions(+), 34 deletions(-) delete mode 100644 content/1.docs/2.training/5.character-guesstimate.md delete mode 100644 content/1.docs/2.training/6.character-matching.md diff --git a/app.config.ts b/app.config.ts index 7d4ab84..65df725 100644 --- a/app.config.ts +++ b/app.config.ts @@ -104,11 +104,11 @@ export default defineAppConfig({ left: "sm:flex-1", right: "sm:flex-1", panel: { - wrapper: "sm:hidden", + wrapper: "lg:hidden", }, button: { - base: "sm:hidden", + base: "lg:hidden", icon: { open: "i-ph-list", close: "i-ph-x", diff --git a/components/AppFooter.vue b/components/AppFooter.vue index 09adf7e..37c3575 100644 --- a/components/AppFooter.vue +++ b/components/AppFooter.vue @@ -38,10 +38,12 @@ const links = computed(() => [ diff --git a/content/1.docs/2.training/1.index.md b/content/1.docs/2.training/1.index.md index afe70f5..0d3b1c0 100644 --- a/content/1.docs/2.training/1.index.md +++ b/content/1.docs/2.training/1.index.md @@ -15,11 +15,11 @@ BlueScript훈련은 사용자가 직접 훈련의 설정을 변경할 수 있도 [훈련](/train) 페이지를 방문하면 훈련 모듈을 선택할 수 있습니다. 또한 **도움말** 버튼을 클릭하면 각 훈련 모듈에 대한 사용법을 확인할 수 있습니다. -![select-procedure](/select-procedure.png) +![select-procedure](/select-procedure.png){width="1024" height="576"} 훈련을 하고자 하는 모듈을 선택하면 아래 이미지와 같이 훈련을 설정할 수 있습니다. 훈련 모듈 모두 공통적으로 **시간**과 **문자 종류**에 대한 설정이 있습니다. 이 둘은 훈련의 난이도와 연관이 없습니다. 이 두 설정 외 각 훈련 모듈 마다 추가적인 설정값이 있으며, **위에 있는 설정이 아래 설정보다 난이도에 더욱 큰 영향**을 줍니다. -![setting-example](/setting-example.png) +![setting-example](/setting-example.png){width="1024" height="576"} 예를 들어, 빠른 시각 인지에서 **문자 길이**를 옆에 있는 화살표로 한 단계 변경 하는 것이 **표시 시간**을 한 단계 변경하는 것 보다 난이도에 더 큰 영향을 줍니다. diff --git a/content/1.docs/2.training/2.rapid-visual-perception.md b/content/1.docs/2.training/2.rapid-visual-perception.md index bfca4b2..e140222 100644 --- a/content/1.docs/2.training/2.rapid-visual-perception.md +++ b/content/1.docs/2.training/2.rapid-visual-perception.md @@ -10,9 +10,9 @@ description: 화면에 짧게 표시되는 글자를 빠르게 인식하고 입 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다. 1. 화면에 짧은 시간 동안 글자들이 표시됩니다. - ![rapid-visual-perception-1](/rapid-visual-perception-1.png) + ![rapid-visual-perception-1](/rapid-visual-perception-1.png){width="1024" height="576"} 1. 글자들이 표시 된 후 훈련자는 기억하는 글자들을 입력하고 답안을 확인합니다. - ![rapid-visual-perception-2](/rapid-visual-perception-2.png) + ![rapid-visual-perception-2](/rapid-visual-perception-2.png){width="1024" height="576"} ## 훈련 설정 diff --git a/content/1.docs/2.training/3.sequential-visual-memory.md b/content/1.docs/2.training/3.sequential-visual-memory.md index 8f5bc86..7dffbbc 100644 --- a/content/1.docs/2.training/3.sequential-visual-memory.md +++ b/content/1.docs/2.training/3.sequential-visual-memory.md @@ -10,11 +10,11 @@ description: 한 글자씩 보여지는 글자를 기억한 후 입력하는 방 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다. 1. 화면에 한 글자씩 문자들이 순서대로 표시됩니다. - ![sequential-visual-memory-1](/sequential-visual-memory-1.png) + ![sequential-visual-memory-1](/sequential-visual-memory-1.png){width="1024" height="576"} 1. 모든 문자들이 표시 된 이후 지연 시간동안 (0초로 비활성화 가능) 화면에 임의의 패턴이 표시됩니다. - ![sequential-visual-memory-2](/sequential-visual-memory-2.png) + ![sequential-visual-memory-2](/sequential-visual-memory-2.png){width="1024" height="576"} 1. 패턴이 사라진 후 훈련자는 기억하는 문자들을 입력하고 답안을 확인합니다. - ![sequential-visual-memory-3](/sequential-visual-memory-3.png) + ![sequential-visual-memory-3](/sequential-visual-memory-3.png){width="1024" height="576"} ## 훈련 설정 diff --git a/content/1.docs/2.training/4.character-sequencing.md b/content/1.docs/2.training/4.character-sequencing.md index 79e97b5..6770145 100644 --- a/content/1.docs/2.training/4.character-sequencing.md +++ b/content/1.docs/2.training/4.character-sequencing.md @@ -10,9 +10,9 @@ description: 주어진 글자를 순서대로 찾아 입력하는 훈련 훈련의 각 시도는 다음과 같은 순서로 진행되며, 훈련 시간이 초과될 때까지 반복됩니다. 1. 시도가 시작되면 위에 보기가 표시되고 아래에 입력란이 표시됩니다. - ![character-sequencing-1](/character-sequencing-1.png) + ![character-sequencing-1](/character-sequencing-1.png){width="1024" height="576"} 2. 오른쪽 화살표 키를 사용하여 아래 정답란에 커서를 오른쪽으로 이동시킬 수 있습니다. 커서가 보기에 있는 문자와 일치하면 스페이스바를 눌러야 합니다. 만일 놓치거나 잘못된 문자 위에서 스페이스바를 누르면 오답으로 처리되고 가장 가까운 정답으로 이동합니다. - ![character-sequencing-2](/character-sequencing-2.png) + ![character-sequencing-2](/character-sequencing-2.png){width="1024" height="576"} 예를 들어 위 이미지에서 이미 ㅔ, ㅐ, ㄷ, ㅑ를 찾았기에 다음으로 스페이스바를 눌러야 하는 문자는 ㅜ 입니다. 만일 ㅜ를 놓치거나 다른 문자에 스페이스바를 누르게 된다면 마지막 정답인 ㅑ 바로 다음 문자인 ㅈ으로 커서가 이동합니다. 3. 커서가 마지막 문자에 도달하면 시도가 종료됩니다. diff --git a/content/1.docs/2.training/5.character-guesstimate.md b/content/1.docs/2.training/5.character-guesstimate.md deleted file mode 100644 index 7486cdc..0000000 --- a/content/1.docs/2.training/5.character-guesstimate.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 문자 추정 -description: 서서히 나타나는 글자를 보고 가능한 빨리 예측해 입력하는 훈련 ---- - -wip diff --git a/content/1.docs/2.training/6.character-matching.md b/content/1.docs/2.training/6.character-matching.md deleted file mode 100644 index 25a0286..0000000 --- a/content/1.docs/2.training/6.character-matching.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 문자 매칭 -description: 주어진 글자를 순서대로 찾아 입력하는 훈련 ---- - -wip diff --git a/layouts/default.vue b/layouts/default.vue index 09b6c14..d43c979 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -56,13 +56,18 @@ provide("files", files);