[design] improve menu words

Author: zombieFox

index.html

@@ -132,7 +132,6 @@ <h1 class="menu-item-header-text">Area</h1>
               </div>
               <hr>
               <label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label>
-              <p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
               <div class="input-wrap">
                 <input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
                 <label for="control-layout-alignment-horizontal-left">Left</label>
@@ -145,9 +144,9 @@ <h1 class="menu-item-header-text">Area</h1>
                 <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
                 <label for="control-layout-alignment-horizontal-right">Right</label>
               </div>
+              <p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
               <hr>
               <label class="control-layout-alignment-vertical-label">Vertical Alignment</label>
-              <p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
               <div class="input-wrap">
                 <input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
                 <label for="control-layout-alignment-vertical-top">Top</label>
@@ -160,6 +159,7 @@ <h1 class="menu-item-header-text">Area</h1>
                 <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
                 <label for="control-layout-alignment-vertical-bottom">Bottom</label>
               </div>
+              <p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -229,11 +229,10 @@ <h1 class="menu-item-header-text">Area</h1>
               <div class="input-wrap">
                 <input id="control-header-area-alignment-horizontal-right" class="control-header-area-alignment-horizontal-right" type="radio" name="control-header-area-alignment-horizontal" value="right" tabindex="1">
                 <label for="control-header-area-alignment-horizontal-right">Right</label>
-                <p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
               </div>
+              <p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
               <hr>
               <label class="control-header-item-alignment-horizontal-label">Item Horizontal Alignment</label>
-              <p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
               <div class="input-wrap">
                 <input id="control-header-item-alignment-horizontal-left" class="control-header-item-alignment-horizontal-left" type="radio" name="control-header-item-alignment-horizontal" value="left" tabindex="1">
                 <label for="control-header-item-alignment-horizontal-left">Left</label>
@@ -246,6 +245,7 @@ <h1 class="menu-item-header-text">Area</h1>
                 <input id="control-header-item-alignment-horizontal-right" class="control-header-item-alignment-horizontal-right" type="radio" name="control-header-item-alignment-horizontal" value="right" tabindex="1">
                 <label for="control-header-item-alignment-horizontal-right">Right</label>
               </div>
+              <p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -258,7 +258,6 @@ <h1 class="menu-item-header-text">Greeting</h1>
                 <label for="control-header-greeting-show">Show</label>
               </div>
               <div class="form-indent">
-                <hr>
                 <div class="input-wrap">
                   <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
                   <label for="control-header-greeting-type-good">"Good morning..."</label>
@@ -298,7 +297,6 @@ <h1 class="menu-item-header-text">Transitional words</h1>
                 <p class="input-helper small muted">Available when Date or Time is shown.</p>
               </div>
               <div class="form-indent">
-                <hr>
                 <div class="input-wrap">
                   <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
                   <label for="control-header-transitional-type-timeanddate">"The time and date is"</label>
@@ -336,8 +334,8 @@ <h1 class="menu-item-header-text">Clock</h1>
                   <input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
                   <label for="control-header-clock-hours-display-word">As word</label>
                 </div>
-                <hr>
               </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="1">
                 <label for="control-header-clock-minutes-show">Minutes</label>
@@ -351,8 +349,8 @@ <h1 class="menu-item-header-text">Clock</h1>
                   <input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
                   <label for="control-header-clock-minutes-display-word">As word</label>
                 </div>
-                <hr>
               </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="1">
                 <label for="control-header-clock-seconds-show">Seconds</label>
@@ -432,8 +430,8 @@ <h1 class="menu-item-header-text">Date</h1>
                     <label for="control-header-date-day-length-short">Short</label>
                   </div>
                 </div>
-                <hr>
               </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="1">
                 <label for="control-header-date-date-show">Date</label>
@@ -452,8 +450,8 @@ <h1 class="menu-item-header-text">Date</h1>
                   <label for="control-header-date-date-ordinal">Ordinal numbers</label>
                   <p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
                 </div>
-                <hr>
               </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="1">
                 <label for="control-header-date-month-show">Month</label>
@@ -485,8 +483,8 @@ <h1 class="menu-item-header-text">Date</h1>
                     <label for="control-header-date-month-length-short">Short</label>
                   </div>
                 </div>
-                <hr>
               </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="1">
                 <label for="control-header-date-year-show">Year</label>
@@ -536,7 +534,6 @@ <h1 class="menu-item-header-text">Search</h1>
                 <label for="control-header-search-show">Show</label>
               </div>
               <div class="form-indent">
-                <hr>
                 <label class="control-header-search-style-label">Search box width</label>
                 <div class="input-wrap">
                   <input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
@@ -561,7 +558,7 @@ <h1 class="menu-item-header-text">Search</h1>
                   <p class="input-helper small muted">May not work in Chrome.</p>
                 </div>
                 <hr>
-                <label class="control-header-search-engine-label">Engine</label>
+                <label class="control-header-search-engine-label">Search engine</label>
                 <div class="input-wrap">
                   <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="1">
                   <label for="control-header-search-engine-google">Google</label>
@@ -590,7 +587,7 @@ <h1 class="menu-item-header-text">Search</h1>
                   <div class="input-wrap">
                     <label for="control-header-search-engine-custom-url">URL</label>
                     <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
-                    <p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
+                    <p class="input-helper small muted">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
                     <p class="input-helper small muted mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
                   </div>
                 </div>
@@ -680,7 +677,6 @@ <h1 class="menu-item-header-text">Shade</h1>
                 <label for="control-header-shade-show">Show</label>
               </div>
               <div class="form-indent">
-                <hr>
                 <div class="input-wrap">
                   <input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
                   <label for="control-header-shade-style-always">Always visible</label>
@@ -747,7 +743,6 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
                 <label for="control-link-show">Show</label>
               </div>
               <div class="form-indent">
-                <hr>
                 <div class="input-wrap">
                   <label for="control-link-item-size">Tile Size</label>
                   <input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1">
@@ -969,7 +964,6 @@ <h1 class="menu-item-header-text">Image</h1>
                 <label for="control-background-image-show">Show</label>
               </div>
               <div class="form-indent">
-                <hr>
                 <div class="input-wrap">
                   <label for="control-background-image-url">URL or path</label>
                   <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">