aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorHsieh Chin Fan <pham@topo.tw>2024-10-13 16:03:39 +0800
committerHsieh Chin Fan <pham@topo.tw>2024-10-14 16:34:00 +0800
commitcdb80969e186404dc56761e844a3efcb065192cc (patch)
treeed79b3b3f95fbddfbade15bb78d92610f97b0f5a
parent7f9c28d1ad645eeac8ef2cd5e3cb71f8eaa3a6c6 (diff)
refactor: add <main> for contents
Diffstat
-rw-r--r--index.html28
-rw-r--r--src/css/index.css56
-rw-r--r--src/editor.mjs4
3 files changed, 47 insertions, 41 deletions
diff --git a/index.html b/index.html
index b66496f..6ddcc8a 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,24 @@
2<html lang="en"> 2<html lang="en">
3 3
4<head> 4<head>
5 <meta charset="utf-8"/> 5 <meta charset="utf-8" />
6 <title>DumbyMap</title> 6 <title>DumbyMap</title>
7 7
8 <meta name="viewport" content="width=device-width, initial-scale=1"/> 8 <meta name="viewport" content="width=device-width, initial-scale=1" />
9 <link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico"/> 9 <link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico">
10 10
11 <meta property="og:title" content="DumbyMap"> 11 <meta property="og:title" content="DumbyMap">
12 <meta property="og:description" content="Read HTML with maps"/> 12 <meta property="og:description" content="Read HTML with maps">
13 <meta property="og:type" content="website"> 13 <meta property="og:type" content="website">
14 <meta property="og:url" content="https://outdoorsafetylab.github.io/dumbymap"> 14 <meta property="og:url" content="https://outdoorsafetylab.github.io/dumbymap">
15 <meta property="og:logo" content="./assets/favicon.ico"> 15 <meta property="og:logo" content="./assets/favicon.ico">
16 <meta property="og:image" content="./assets/og-example1.png"> 16 <meta property="og:image" content="./assets/og-example1.png">
17 17
18 <!-- FIXME --> 18 <!-- FIXME -->
19 <link rel="stylesheet" type="text/css" href="./dist/css/style.css"/> 19 <link rel="stylesheet" type="text/css" href="./dist/css/style.css">
20 <link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css"/> 20 <link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css">
21 <link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css"/> 21 <link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css">
22 <link rel="stylesheet" type="text/css" href="./dist/css/index.css" /> 22 <link rel="stylesheet" type="text/css" href="./dist/css/index.css">
23 23
24 <!-- FIXME --> 24 <!-- FIXME -->
25 <script src="./dist/easymde.min.js"></script> 25 <script src="./dist/easymde.min.js"></script>
@@ -27,11 +27,13 @@
27 27
28</head> 28</head>
29 29
30<body data-mode="editing"> 30<body>
31 <div class="DumbyMap"></div> 31 <main data-mode="editing">
32 <div class="editor"> 32 <div class="DumbyMap"></div>
33 <textarea></textarea> 33 <div class="editor">
34 </div> 34 <textarea></textarea>
35 </div>
36 </main>
35</body> 37</body>
36 38
37</html> 39</html>
diff --git a/src/css/index.css b/src/css/index.css
index 53a5587..7ae5906 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -10,42 +10,46 @@
10 10
11body { 11body {
12 width: 100vw; 12 width: 100vw;
13 min-width: 700px;
14 height: 100vh; 13 height: 100vh;
14}
15 15
16 &[data-mode='editing'] { 16main {
17 display: flex; 17 display: flex;
18 align-items: stretch; 18 align-items: stretch;
19 width: 100%;
20 min-width: 700px;
21 height: 100%;
22}
19 23
20 /* gap: 0.5em; */ 24main[data-mode='editing'] {
25 /* gap: 0.5em; */
21 26
22 padding: 0.5em; 27 padding: 0.5em;
23 28
24 .Dumby { 29 .Dumby {
25 flex: 0 0 50%; 30 flex: 0 0 50%;
26 min-width: 45%; 31 min-width: 45%;
27 max-width: calc(50% - 0.5em); 32 max-width: calc(50% - 0.5em);
28 height: 100%; 33 height: 100%;
29 34
30 border: var(--content-border); 35 border: var(--content-border);
31 border-radius: var(--content-border-radius); 36 border-radius: var(--content-border-radius);
32 order: 1; 37 order: 1;
33 38
34 &.focus { 39 &.focus {
35 border: var(--content-focus-border); 40 border: var(--content-focus-border);
36 outline: var(--content-focus-border); 41 outline: var(--content-focus-border);
37 }
38 } 42 }
43 }
39 44
40 .editor { 45 .editor {
41 display: block; 46 display: block;
42 flex: 0 0 50%; 47 flex: 0 0 50%;
43 min-width: 45%; 48 min-width: 45%;
44 max-width: calc(50% - 0.5em); 49 max-width: calc(50% - 0.5em);
45 height: 100%; 50 height: 100%;
46 51
47 order: 2; 52 order: 2;
48 }
49 } 53 }
50} 54}
51 55
diff --git a/src/editor.mjs b/src/editor.mjs
index ad1a863..f6c7dab 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -32,7 +32,7 @@ new window.MutationObserver(mutaions => {
32 const mutation = mutaions.at(-1) 32 const mutation = mutaions.at(-1)
33 const layout = dumbyContainer.dataset.layout 33 const layout = dumbyContainer.dataset.layout
34 if (layout !== 'normal' || mutation.oldValue === 'normal') { 34 if (layout !== 'normal' || mutation.oldValue === 'normal') {
35 delete context.dataset.mode 35 context.dataset.mode = ''
36 } 36 }
37}).observe(dumbyContainer, { 37}).observe(dumbyContainer, {
38 attributes: true, 38 attributes: true,
@@ -92,7 +92,7 @@ new window.MutationObserver(() => {
92const toggleEditing = () => { 92const toggleEditing = () => {
93 const mode = context.dataset.mode 93 const mode = context.dataset.mode
94 if (mode === 'editing') { 94 if (mode === 'editing') {
95 delete context.dataset.mode 95 context.dataset.mode = ''
96 } else { 96 } else {
97 context.dataset.mode = 'editing' 97 context.dataset.mode = 'editing'
98 } 98 }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-14 22:47:13 +0800