金ハンドルと通常ハンドルが入れ替わってるのを修正、UIの調整

kazuki-4ys · Jun 5, 2020 · e6a0ed5 · e6a0ed5
1 parent d891138
commit e6a0ed5
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 51 deletions.
diff --git a/src/characterTable.html b/src/characterTable.html
@@ -1 +1,23 @@
-<!DOCTYPE html><html><head>    <title>mkwii special character table</title>    <meta charset="UTF-8">    <link rel="stylesheet" href="style.css"></head><body><div id="table"><span style="color: gold;"></span><span style="color: gold;"></span><span style="color: silver;"></span><span style="color:olive;"></span><br><br><br><br><br>①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮<br><span style="color: gold;"></span><br><span style="color: blue;"></span><br><span style="color: pink;"></span><br><span style="color: green;"></span><br><br></div></body></html>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>mkwii special character table</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="table">
+<span style="color: gold;"></span><span style="color: gold;"></span><span style="color: silver;"></span><span style="color:olive;"></span><br>
+<br>
+<br>
+<br>
+<br>
+①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮<br>
+<span style="color: gold;"></span><br>
+<span style="color: blue;"></span><br>
+<span style="color: pink;"></span><br>
+<span style="color: green;"></span><br>
+<br>
+</div>
+</body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -8,53 +8,19 @@
 </head>
 
 <body>
-    <div id="main">
+<div id="main">
     <div>
         <div class="nameForm">
-            <div>
-                <p>Mii name:</p>
-                <p>Creator name:</p>
-            </div>
-            <div>
-                <p><input id="miiName" maxlength="10"></p>
-                <p><input id="creatorName" maxlength="10"></p>
-            </div>
+            <div id="mn">Mii name:</div><div id="mnt"><input id="miiName" maxlength="10"></div>
+            <div id="cn">Creator name:</div><div id="cnt"><input id="creatorName" maxlength="10"></div>
         </div>
         <div class="idForm">
-            <div>
-                <p>Mii ID:</p>
-                <p>Console ID:</p>
-            </div>
-            <div>
-                <p><input class="miiID" id="m0" maxlength="2">-</p>
-                <p><input class="creatorID" id="c0" maxlength="2">-</p>
-            </div>
-            <div>
-                <p><input class="miiID" id="m1" maxlength="2">-</p>
-                <p><input class="creatorID" id="c1" maxlength="2">-</p>
-            </div>
-            <div>
-                <p><input class="miiID" id="m2" maxlength="2">-</p>
-                <p><input class="creatorID" id="c2" maxlength="2">-</p>
-            </div>
-            <div>
-                <p><input class="miiID" id="m3" maxlength="2"></p>
-                <p><input class="creatorID" id="c3" maxlength="2"></p>
-            </div>
+            <div id="mi">Mii ID:</div><div id="mit"><input class="miiID" id="m0" maxlength="2">-<input class="miiID" id="m1" maxlength="2">-<input class="miiID" id="m2" maxlength="2">-<input class="miiID" id="m3" maxlength="2"></div>
+            <div id="ci">Console ID:</div><div id="cit"><input class="creatorID" id="c0" maxlength="2">-<input class="creatorID" id="c1" maxlength="2">-<input class="creatorID" id="c2" maxlength="2">-<input class="creatorID" id="c3" maxlength="2"></div>
         </div>
         <div class="sliderForm">
-            <div>
-                <p>Height</p>
-                <p>Weight</p>
-            </div>
-            <div>
-                <p><input type="range" value="64" min="0" max="127" step="1" id="height"></p>
-                <p><input type="range" value="64" min="0" max="127" step="1" id="weight"></p>
-            </div>
-            <div>
-                <p><input maxlength="3" size="2" id="heightNum"></p>
-                <p><input maxlength="3" size="2" id="weightNum"></p>
-            </div>
+            <div id="h">Height</div><div id="hs"><input type="range" value="64" min="0" max="127" step="1" id="height"></div><div id="ht"><input maxlength="3" size="2" id="heightNum"></div>
+            <div id="w">Weight</div><div id="ws"><input type="range" value="64" min="0" max="127" step="1" id="weight"></div><div id="wt"><input maxlength="3" size="2" id="weightNum"></div>
         </div>
     </div>
     <div class="subForm">

diff --git a/src/package.json b/src/package.json
@@ -1,7 +1,7 @@
 {
   "appId": "org.kazuki.miiinfoeditor",
   "name": "mii-info-editor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "main.js",
   "devDependencies": {
     "electron": "8.2.3"

diff --git a/src/style.css b/src/style.css
@@ -15,22 +15,51 @@ body{
 }
 
 .nameForm{
-    display:flex;
-}
+    display:grid;
+    grid-template: 
+    "mn mnt"
+    "cn cnt";
+    gap:10px;
+    margin-bottom: 10px;
+}
+#mn{grid-area:mn}
+#mnt{grid-area:mnt}
+#cm{grid-area:cn}
+#cnt{grid-area:cnt}
 
 .idForm{
-    display:flex;
-}
-.sliderForm{
-    display:flex;
-}
+    display:grid;
+    grid-template: 
+    "mi mit"
+    "ci cit";
+    gap:10px;
+    margin-bottom: 10px;
+}
+#mi{grid-area:mi}
+#mit{grid-area:mit}
+#ci{grid-area:ci}
+#cit{grid-area:cit}
 
+.sliderForm{
+    display:grid;
+    grid-template: 
+    "h hs ht"
+    "w ws wt";
+    gap:10px;
+}
+#h{grid-area:h}
+#hs{grid-area:hs}
+#ht{grid-area:ht}
+#w{grid-area:w}
+#ws{grid-area:ws}
+#wt{grid-area:wt}
 #main{
     display:flex;
 
 }
 .subForm{
     text-align:center;
+    margin-left: 30px;
 }
 .birthForm{
     display:flex;
@@ -115,7 +144,7 @@ body{
     background-color:black;
 }
 
-.notSelectColor,.SelectColor,button,#height,#weight{
+.notSelectColor,.SelectColor,button,#height,#weight,#open{
     cursor:pointer;
 }