Skip to content

Commit 12d5216

Browse files
davidlesieurjespirit
davidlesieur
authored and
jespirit
committed
Fix layout issues on demo page.
1 parent deeff93 commit 12d5216

File tree

1 file changed

+68
-55
lines changed

1 file changed

+68
-55
lines changed

‎tpl/index.tpl

Lines changed: 68 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -358,9 +358,9 @@ var slider = new Slider('#ex1', {
358358
<div id="example-2" class='slider-example'>
359359
<h3>Example 2: <a href="#top"><small>Back to Top</small></a></h3>
360360
<p>Range selector, options specified via data attribute.</p>
361-
<div class="card card-body mb-3">
362-
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>
363-
</div>
361+
<div class="card card-body mb-3 flex-row">
362+
<span class="mr-1">Filter by price interval: </span><b class="mr-1">€ 10</b><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/><b class="mr-1 ml-1">€ 1000</b>
363+
</div>
364364
<h5>HTML</h5>
365365
<pre><code class="html">
366366
Filter by price interval: &ltb&gt€ 10&lt/b&gt &ltinput id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/&gt &ltb&gt€ 1000&lt/b&gt
@@ -512,7 +512,7 @@ $("#destroyEx5Slider").click(function() {
512512
<div id="example-6" class='slider-example'>
513513
<h3>Example 6: <a href="#top"><small>Back to Top</small></a></h3>
514514
<p>Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.</p>
515-
<div class="card card-body mb-3">
515+
<div class="card card-body mb-3 flex-row">
516516
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
517517
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
518518
</div>
@@ -544,9 +544,9 @@ slider.on("slide", function(sliderValue) {
544544
<div id="example-7" class='slider-example'>
545545
<h3>Example 7: <a href="#top"><small>Back to Top</small></a></h3>
546546
<p>Sliders can be enabled and disabled.</p>
547-
<div class="card card-body mb-3">
547+
<div class="card card-body mb-3 flex-row">
548548
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
549-
<input id="ex7-enabled" type="checkbox"/> Enabled
549+
<input id="ex7-enabled" type="checkbox" class="mr-1"/> Enabled
550550
</div>
551551
<h5>HTML</h5>
552552
<pre><code class="html">
@@ -697,17 +697,21 @@ var slider = new Slider("#ex11", {
697697
<div id="example-12" class='slider-example'>
698698
<h3>Example 12: <a href="#top"><small>Back to Top</small></a></h3>
699699
<p>Coloring the low and high track segments.</p>
700-
<div class="card card-body mb-3">
701-
Single-value slider, high track:<br/>
702-
<input id="ex12a" type="text"/><br/>
703-
Note that there is no low track on the single-value slider. The
704-
area lesser than the value of the handle is the selection.
705-
<br/><br/>
706-
Range slider, low track:<br/>
707-
<input id="ex12b" type="text"/>
708-
<br/><br/>
709-
Range slider, low and high tracks, and selection:<br/>
710-
<input id="ex12c" type="text"/>
700+
<div class="card card-body mb-3">
701+
<div class="mb-3">
702+
Single-value slider, high track:<br/>
703+
<input id="ex12a" type="text"/><br/>
704+
Note that there is no low track on the single-value slider. The
705+
area lesser than the value of the handle is the selection.
706+
</div>
707+
<div class="mb-3">
708+
Range slider, low track:<br/>
709+
<input id="ex12b" type="text"/>
710+
</div>
711+
<div>
712+
Range slider, low and high tracks, and selection:<br/>
713+
<input id="ex12c" type="text"/>
714+
</div>
711715
</div>
712716
<h5>HTML</h5>
713717
<pre><code class="html">
@@ -848,11 +852,14 @@ var slider = new Slider('#ex15', {
848852
<h3>Example 16: <a href="#top"><small>Back to Top</small></a></h3>
849853
<p>Focus the slider handle after a value change.</p>
850854
<div class="card card-body mb-3">
851-
Single-value slider:<br/>
852-
<input id="ex16a" type="text"/><br/>
853-
<br/><br/>
854-
Range slider:<br/>
855-
<input id="ex16b" type="text"/>
855+
<div class="mb-3">
856+
Single-value slider:<br/>
857+
<input id="ex16a" type="text"/>
858+
</div>
859+
<div>
860+
Range slider:<br/>
861+
<input id="ex16b" type="text"/>
862+
</div>
856863
</div>
857864
<h5>HTML</h5>
858865
<pre><code class="html">
@@ -881,12 +888,15 @@ var sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: tru
881888
<p>Unusual tooltip positions.</p>
882889

883890
<div class="card card-body mb-3">
884-
Horizontal slider with tooltip on the bottom<br/><br/>
885-
<input id="ex17a" type="text"/><br/><br/><br/>
886-
887-
Vertical slider with tooltip on the left<br/><br/>
888-
<input id="ex17b" type="text"/>
889-
</div>
891+
<div class="mb-4">
892+
Horizontal slider with tooltip on the bottom<br/>
893+
<input id="ex17a" type="text"/>
894+
</div>
895+
<div>
896+
<div class="mb-2">Vertical slider with tooltip on the left<br/></div>
897+
<input id="ex17b" type="text"/>
898+
</div>
899+
</div>
890900
<h5>HTML</h5>
891901
<pre><code class="html">
892902
&ltinput id="ex17a" type="text"/&gt
@@ -931,31 +941,34 @@ var sliderB = new Slider("#ex17b", {
931941

932942
<div id="example-18" class="slider-example">
933943
<h3>Example 18: <a href="#top"><small>Back to Top</small></a></h3>
934-
<p>Accessibility with ARIA labels.</p>
944+
<p>Accessibility with labels only visible to screenreaders.</p>
935945

936946
<div class="card card-body mb-3">
937-
Slider with single value and label:<br/><br/>
938-
<span id="ex18-label-1" class="hidden">
939-
Example slider label
940-
</span>
941-
<input id="ex18a" type="text" /><br/><br/><br/>
942-
943-
Range slider with multiple labels:<br/><br/>
944-
<span id="ex18-label-2a" class="hidden">
945-
Example low value
946-
</span>
947-
<span id="ex18-label-2b" class="hidden">
948-
Example high value
949-
</span>
950-
<input id="ex18b" type="text" />
947+
<div class="mb-3">
948+
Slider with single value and label:<br/>
949+
<span id="ex18-label-1" class="sr-only">
950+
Example slider label
951+
</span>
952+
<input id="ex18a" type="text" />
953+
</div>
954+
<div>
955+
Range slider with multiple labels:<br/>
956+
<span id="ex18-label-2a" class="sr-only">
957+
Example low value
958+
</span>
959+
<span id="ex18-label-2b" class="sr-only">
960+
Example high value
961+
</span>
962+
<input id="ex18b" type="text" />
963+
</div>
951964
</div>
952965
<h5>HTML</h5>
953966
<pre><code class="html">
954-
&lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
967+
&lt;span id="ex18-label-1" class="sr-only"&gt;Example slider label&lt;/span&gt;
955968
&lt;input id="ex18a" type="text"/&gt;
956969

957-
&lt;span id="ex18-label-2a" class="hidden"&gt;Example low value&lt;/span&gt;
958-
&lt;span id="ex18-label-2b" class="hidden"&gt;Example high value&lt;/span&gt;
970+
&lt;span id="ex18-label-2a" class="sr-only"&gt;Example low value&lt;/span&gt;
971+
&lt;span id="ex18-label-2b" class="sr-only"&gt;Example high value&lt;/span&gt;
959972
&lt;input id="ex18b" type="text"/&gt;
960973
</pre></code>
961974

@@ -996,8 +1009,8 @@ var sliderB = new Slider("#ex18b", {
9961009
<p>Auto-Register data-provide="slider" Elements.</p>
9971010

9981011
<div class="card card-body mb-3">
999-
Slider-Element not accompanied by any custom Javascript:<br/><br/>
1000-
<span id="ex18-label-1" class="hidden">
1012+
<div class="mb-3">Slider-Element not accompanied by any custom Javascript:</div>
1013+
<span id="ex18-label-1" class="sr-only">
10011014
Example slider label
10021015
</span>
10031016
<input id="ex19" type="text"
@@ -1012,7 +1025,7 @@ var sliderB = new Slider("#ex18b", {
10121025
</div>
10131026
<h5>HTML</h5>
10141027
<pre><code class="html">
1015-
&lt;span id="ex18-label-1" class="hidden">Example slider label&lt;/span&gt;
1028+
&lt;span id="ex18-label-1" class="sr-only">Example slider label&lt;/span&gt;
10161029
&lt;input id="ex19" type="text"
10171030
data-provide="slider"
10181031
data-slider-ticks="[1, 2, 3]"
@@ -1032,8 +1045,8 @@ var sliderB = new Slider("#ex18b", {
10321045
<a class="btn btn-primary" href="" id="ex20a">Show</a>
10331046
<br><br>
10341047
<div class="card card-body mb-3" style="display: none">
1035-
Slider-Element initially hidden, revealed by Javascript:<br/><br/>
1036-
<span id="ex18-label-1" class="hidden">
1048+
<div class="mb-3">Slider-Element initially hidden, revealed by Javascript:</div>
1049+
<span id="ex18-label-1" class="sr-only">
10371050
Example slider label
10381051
</span>
10391052
<input id="ex20" type="text"
@@ -1050,7 +1063,7 @@ var sliderB = new Slider("#ex18b", {
10501063
<pre><code class="html">
10511064
&lt;a class="btn btn-primary" href="" id="ex20a">Show&lt;/a&gt;
10521065
&lt;div class="card card-body mb-3" style="display: none"&gt;
1053-
&lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
1066+
&lt;span id="ex18-label-1" class="sr-only"&gt;Example slider label&lt;/span&gt;
10541067
&lt;input id="ex19" type="text"
10551068
data-provide="slider"
10561069
data-slider-ticks="[1, 2, 3]"
@@ -1068,8 +1081,8 @@ var sliderB = new Slider("#ex18b", {
10681081
$('#ex20a').on('click', function(e) {
10691082
$('#ex20a')
10701083
.parent()
1071-
.find(' >.well')
1072-
.toggle()
1084+
.find(' >.card')
1085+
.toggleClass()
10731086
.find('input')
10741087
.slider('relayout');
10751088
e.preventDefault();
@@ -1486,7 +1499,7 @@ slider.refresh({ useCurrentValue: true });
14861499
$('#ex20a').on('click', function(e) {
14871500
$('#ex20a')
14881501
.parent()
1489-
.find(' >.well')
1502+
.find(' >.card')
14901503
.toggle()
14911504
.find('input')
14921505
.slider('relayout');

0 commit comments

Comments
 (0)