From 4e982fe07a24c66936de846ef9395539e0cf19d6 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Tue, 26 Nov 2019 07:48:07 +0000
Subject: [PATCH] [design] fix some words and change order of link controls

---
 src/index.html | 44 +++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/index.html b/src/index.html
index 32781b9a..20ea46ee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -146,7 +146,7 @@
               <div class="input-wrap">
                 <label for="control-layout-width">Width</label>
                 <div class="form-group form-group-block mb-0">
-                  <input id="control-layout-width" class="control-layout-width mr-3" type="range" min="5" max="100" value="0" tabindex="-1">
+                  <input id="control-layout-width" class="control-layout-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
                   <div class="control-layout-width-count form-group-text form-group-medium form-group-radius-left"></div>
                 </div>
               </div>
@@ -1034,6 +1034,28 @@
                   </div>
                 </div>
                 <hr>
+                <div class="input-wrap">
+                  <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
+                  <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
+                </div>
+                <div class="input-wrap">
+                  <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
+                  <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
+                </div>
+                <p class="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
+                <p class="control-link-item-display-direction-helper form-helper small">Vertical alignment works well with Bookmark Block Style.</p>
+                <p class="control-link-item-display-direction-helper form-helper small">Horizontal alignment works well with Bookmark List Style.</p>
+                <hr>
+                <div class="input-wrap">
+                  <input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
+                  <label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
+                </div>
+                <div class="input-wrap">
+                  <input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
+                  <label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
+                </div>
+                <p class="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
+                <hr>
                 <div class="input-wrap">
                   <input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
                   <label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Letter/Icon</label>
@@ -1079,26 +1101,6 @@
                   </div>
                 </div>
                 <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
-                  <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
-                  <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
-                </div>
-                <p class="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark Block Style.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
-                  <label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
-                  <label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
-                </div>
-                <p class="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark List Style.</p>
-                <hr>
                 <div class="input-wrap">
                   <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
                   <label for="control-link-item-url-show"><span class="label-icon"></span> Show URL on Bookmark hover</label>