rcreasey.github.io/src/html/menu/content/header/search.html at 73ee77431bd70b68cc3bdab439a8e908bc005bcf · rcreasey/rcreasey.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<div id="menu-content-header-search" class="menu-content-item">
  <div class="menu-item-header">
    <h1 class="menu-item-header-text">Search</h1>
  </div>
  <div class="menu-item-form">
    <div class="form-wrap">
      <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
      <label for="control-header-search-show"><span class="label-icon"></span> Show</label>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <div class="form-wrap">
          <label class="control-header-search-width-by-label">Width</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
          <label for="control-header-search-width-by-auto">
            <span class="label-icon"></span>
            <span class="label-block">
              <span class="label-block-item">Auto</span>
              <span class="label-block-item small muted">Search box will grow to best fit available space.</span>
            </span>
          </label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
          <label for="control-header-search-width-by-custom">
            <span class="label-icon"></span>
            <span class="label-block">
              <span class="label-block-item">Custom</span>
              <span class="label-block-item small muted">Define how wide the Search box should be inside the Header Area.</span>
            </span>
          </label>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-wrap">
              <div class="form-group form-group-block">
                <input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
                <input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
                <button class="control-header-search-width-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label for="control-header-search-opacity-range">Opacity</label>
          <div class="form-group form-group-block">
            <input id="control-header-search-opacity-range" class="control-header-search-opacity-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-header-search-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-header-search-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
          <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
        </div>
        <div class="form-helper">
          <p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
        </div>
        <hr>
        <div class="form-wrap">
          <label class="control-header-search-engine-label">Search engine</label>
        </div>
        <div class="form-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"><span class="label-icon"></span> Google</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
          <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
          <label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
          <label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
          <label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
          <label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-wrap">
              <label for="control-header-search-engine-custom-name">Name</label>
              <input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
            </div>
            <div class="form-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">
            </div>
            <div class="form-helper">
              <p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
              <p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
            </div>
            <div class="form-wrap">
              <label for="control-header-search-engine-custom-queryname">Name attribute</label>
              <input id="control-header-search-engine-custom-queryname" class="control-header-search-engine-custom-queryname" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="q" tabindex="-1">
            </div>
            <div class="form-helper">
              <p class="control-header-search-engine-custom-helper form-helper-item">Sets the name attribute on the Search input field.</p>
              <p class="control-header-search-engine-custom-helper form-helper-item">This defines the name passed to the search engine when submitting. If not sure leave blank.</p>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label class="control-header-search-text-justify-label">Align Text</label>
        </div>
        <div class="form-wrap">
          <div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
            <div class="form-wrap">
              <input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
              <label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
            </div>
            <div class="form-wrap">
              <input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
              <label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
            </div>
            <div class="form-wrap">
              <input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
              <label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label for="control-header-search-size-range">Size</label>
          <div class="form-group form-group-block">
            <input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-header-search-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-helper">
          <p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-newtab" class="control-header-search-newtab" type="checkbox" tabindex="-1">
          <label for="control-header-search-newtab"><span class="label-icon"></span> Open Search results in a new tab</label>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
          <label for="control-header-search-newline">
            <span class="label-icon"></span>
            <span class="label-block">
              <span class="label-block-item">New line</span>
              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>