メッセージ欄の左右比率変更に対応

index.html

@@ -76,6 +76,7 @@
         #edit .row2 {
             display: flex;
             align-items: stretch;
+            padding-left: 0.75rem;
         }
 
         .row2-20 {
@@ -360,6 +361,11 @@
                             <input name="fontFamilyInput" type="text" class="form-control" id="fontFamilyInput"
                                 value="">
                         </div>
+                        <div class="input-group">
+                            <span class="input-group-text bg-secondary text-light">NameSpaceLength</span>
+                            <input name="nameSpaceLength" type="range" class="form-control form-range"
+                                id="nameSpaceLength" value="3" step="1" min="0" max="12">
+                        </div>
                         <div class="input-group">
                             <span class="input-group-text bg-secondary text-light">StrokeColor</span>
                             <input name="strokeColor" type="color" class="form-control form-control-color"
@@ -414,6 +420,7 @@
                                 <li>UIを整理すると共にAdvanced部を折りたたむようにした。</li>
                                 <li>ストロークの色と太さの変更に対応した。</li>
                                 <li>ストロークの選択をデフォルトでRecommendedにすると共に、プレビューは常にプレビュー用のCSSを使うよう仕様変更した。</li>
+                                <li>名前欄の左右の比率を非表示を含めて調整出来るようにした。</li>
                             </ul>
                         </li>
                     </ul>
@@ -546,6 +553,19 @@
             }
             document.getElementById("edit").style.width = width + 'px';
             document.getElementById("edit").style.height = height + 'px';
+
+            document.getElementById("left").setAttribute("class", "p-0 m-0");
+            document.getElementById("right").setAttribute("class", "");
+            let lc = "col-" + document.getElementById("nameSpaceLength").value;
+            let rc = "col-" + (12 - document.getElementById("nameSpaceLength").value);
+            if (document.getElementById("nameSpaceLength").value == 0) {
+                lc = "d-none";
+            }
+            if (document.getElementById("nameSpaceLength").value == 12) {
+                rc = "d-none";
+            }
+            document.getElementById("left").classList.add(lc);
+            document.getElementById("right").classList.add(rc);
             document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
             document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';