Skip to content

Commit 21eaf97

Browse files
CodeSandwichKrinkle
CodeSandwich
authored and
Krinkle
committed
demo: reduce layout variants, add "right-aligned" to example
* Remove distinction between first and second themed row on the demo page. Use demo-logo for both instead of omitting the image the second time. * Add right-aligned to the example. This uses hardcoded CSS right now, to be improved in #2. * Fix inconsistent indentation in the demo/index.html file.
1 parent c322b3b commit 21eaf97

File tree

2 files changed

+76
-70
lines changed

2 files changed

+76
-70
lines changed

‎demo/demo.css

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ a:focus {
2424
header,
2525
main,
2626
.demo-stylecontrol {
27-
padding: 1rem calc((100% - 65rem) / 2) 0 1rem;
27+
padding: 1rem;
2828
}
2929

3030
.demo-logo {
@@ -36,9 +36,7 @@ main,
3636

3737
height: 2.3rem;
3838
width: 9.2rem;
39-
}
4039

41-
.demo-logo-img {
4240
background: url(../assets/logo-text.svg) left center no-repeat;
4341
background-size: contain;
4442
text-indent: -9999px;
@@ -62,6 +60,15 @@ main {
6260
width: 30rem;
6361
}
6462

63+
.demo-right-form {
64+
margin-left: auto;
65+
}
66+
67+
.demo-right-form [role="listbox"] {
68+
right: 0;
69+
}
70+
71+
6572
.demo-stylecontrol fieldset {
6673
background: #fff;
6774
}

‎demo/index.html

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -10,74 +10,73 @@
1010
<link rel="stylesheet" href="demo.css">
1111
<link rel="stylesheet" href="demo-theme.css">
1212
<body>
13-
<header>
14-
<a href="../" class="demo-logo demo-logo-img">Minibar</a>
13+
<header>
14+
<a href="../" class="demo-logo demo-logo-img">Minibar</a>
1515

16-
<form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="qunitjs_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" action="https://duckduckgo.com">
17-
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
18-
<input type="hidden" name="sites" value="qunitjs.com">
19-
</form>
20-
</header>
21-
<header>
22-
<span class="demo-logo"></span>
16+
<form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="qunitjs_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" action="https://duckduckgo.com">
17+
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
18+
<input type="hidden" name="sites" value="qunitjs.com">
19+
</form>
20+
</header>
21+
<header>
22+
<span class="demo-logo"></span>
23+
<!-- data-group=true and right-aligned -->
24+
<form role="search" class="tsmb-form demo-right-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
25+
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
26+
<input type="hidden" name="sites" value="jquery.com">
27+
</form>
28+
</header>
29+
<main>
30+
<h2>customize layout</h2>
31+
<form role="search" class="tsmb-form demo-custom-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
32+
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
33+
<input type="hidden" name="sites" value="jquery.com">
34+
</form>
2335

24-
<h2>data-group=true</h2>
25-
<form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
26-
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
27-
<input type="hidden" name="sites" value="jquery.com">
28-
</form>
29-
</header>
30-
<main>
31-
<h2>customize layout</h2>
32-
<form role="search" class="tsmb-form demo-custom-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
33-
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
34-
<input type="hidden" name="sites" value="jquery.com">
35-
</form>
36+
<h2>JavaScript disabled</h2>
37+
<form role="search" class="tsmb-form" action="https://duckduckgo.com">
38+
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
39+
<input type="hidden" name="sites" value="jquery.com">
40+
</form>
41+
</main>
3642

37-
<h2>JavaScript disabled</h2>
38-
<form role="search" class="tsmb-form" action="https://duckduckgo.com">
39-
<input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
40-
<input type="hidden" name="sites" value="jquery.com">
41-
</form>
42-
</main>
43-
44-
<form hidden class="demo-stylecontrol">
45-
<fieldset>
46-
<legend>Stylesheet control</legend>
47-
Theme:
48-
<label><input type="radio" name="theme" value="none"> CSS disabled</label>
49-
<label><input type="radio" name="theme" value="default"> Default (base)</label>
50-
<label><input type="radio" name="theme" value="full" checked> Full (themed)</label>
51-
</fieldset>
52-
<p>Compare to:
53-
<a href="./compare--docsearch-2.html">DocSearch.js v2</a>
54-
&bull; <a href="./compare--docsearch-3.html">DocSearch.js v3</a>
55-
</p>
56-
</form>
57-
<script type="module">
58-
const stylesDemo = document.querySelector('link[href*="demo-theme.css"]');
59-
const stylesFoot = document.querySelector('link[href*="typesense-minibar-foot.css"]');
60-
const stylesBase = document.querySelector('link[href*="typesense-minibar.css"]');
61-
const form = document.querySelector('.demo-stylecontrol');
62-
form.addEventListener('change', e => {
63-
switch (e.target.value) {
64-
case 'none':
65-
stylesDemo.disabled = true;
66-
stylesFoot.disabled = true;
67-
stylesBase.disabled = true;
68-
break;
69-
case 'default':
70-
stylesDemo.disabled = true;
71-
stylesFoot.disabled = true;
72-
stylesBase.disabled = false;
73-
break;
74-
case 'full':
75-
stylesDemo.disabled = false;
76-
stylesFoot.disabled = false;
77-
stylesBase.disabled = false;
78-
break;
79-
}
80-
});
81-
form.hidden = false;
82-
</script>
43+
<form hidden class="demo-stylecontrol">
44+
<fieldset>
45+
<legend>Stylesheet control</legend>
46+
Theme:
47+
<label><input type="radio" name="theme" value="none"> CSS disabled</label>
48+
<label><input type="radio" name="theme" value="default"> Default (base)</label>
49+
<label><input type="radio" name="theme" value="full" checked> Full (themed)</label>
50+
</fieldset>
51+
<p>Compare to:
52+
<a href="./compare--docsearch-2.html">DocSearch.js v2</a>
53+
&bull; <a href="./compare--docsearch-3.html">DocSearch.js v3</a>
54+
</p>
55+
</form>
56+
<script type="module">
57+
const stylesDemo = document.querySelector('link[href*="demo-theme.css"]');
58+
const stylesFoot = document.querySelector('link[href*="typesense-minibar-foot.css"]');
59+
const stylesBase = document.querySelector('link[href*="typesense-minibar.css"]');
60+
const form = document.querySelector('.demo-stylecontrol');
61+
form.addEventListener('change', e => {
62+
switch (e.target.value) {
63+
case 'none':
64+
stylesDemo.disabled = true;
65+
stylesFoot.disabled = true;
66+
stylesBase.disabled = true;
67+
break;
68+
case 'default':
69+
stylesDemo.disabled = true;
70+
stylesFoot.disabled = true;
71+
stylesBase.disabled = false;
72+
break;
73+
case 'full':
74+
stylesDemo.disabled = false;
75+
stylesFoot.disabled = false;
76+
stylesBase.disabled = false;
77+
break;
78+
}
79+
});
80+
form.hidden = false;
81+
</script>
8382
</body>

0 commit comments

Comments
 (0)