diff options
| -rw-r--r-- | tests/components.html | 34 | ||||
| -rw-r--r-- | tests/thumbnail.html | 18 |
2 files changed, 35 insertions, 17 deletions
diff --git a/tests/components.html b/tests/components.html index 449b150c..2bb67b65 100644 --- a/tests/components.html +++ b/tests/components.html @@ -4,8 +4,18 @@ <title>Bootswatch: Components</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> - <link rel="stylesheet" href="../amelia/bootstrap.css" media="screen"> + <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="screen" id="stylesheet"> <link rel="stylesheet" href="../assets/css/bootswatch.min.css"> + <style> + + #menu { + z-index: 1040; + position:fixed; + top:10px; + right:10px; + } + + </style> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script> @@ -77,8 +87,8 @@ <div class="container"> <div class="page-header"> - <h1>Bootstrap</h1> - <p class="lead">The original</p> + <h1 id="theme">Bootstrap</h1> + <p id="description" class="lead">The original</p> </div> @@ -2722,11 +2732,27 @@ <script src="../bower_components/jquery/jquery.min.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> <script src="../assets/js/bootswatch.js"></script> <script> $('[data-toggle=popover]').popover(); + $.get("http://api.bootswatch.com/3/", function (data) { + var menuTemplate = "<div id='menu'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>", + menuHTML = Mustache.render(menuTemplate, data.themes); + + $('body').append(menuHTML); + + $('#menu').change(function(){ + var theme = $('#menu :selected'); + $('#theme').text(theme.text()); + $('#description').text(theme.data('description')); + theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css'; + $('#stylesheet').attr('href', theme); + }); + }, "json"); + </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/tests/thumbnail.html b/tests/thumbnail.html index 487046fe..59ea34f0 100644 --- a/tests/thumbnail.html +++ b/tests/thumbnail.html @@ -93,29 +93,21 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> <script> - $.get("http://api.bootswatch.com", function (data) { + $.get("http://api.bootswatch.com/3/", function (data) { + var menuTemplate = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>", + menuHTML = Mustache.render(menuTemplate, data.themes); - var t_menu = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>"; - var t_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}"; - - var o_menu = Mustache.render(t_menu, data.themes); - var o_previews = Mustache.render(t_previews, data.themes); - - $('body').append(o_menu); + $('body').append(menuHTML); $('#menu').change(function(){ - var theme = $('#menu :selected'); $('#theme').text(theme.text()); $('#description').text(theme.data('description')); - theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css'; $('#stylesheet').attr('href', theme); }); - }, "json"); </script> - </body> -</html>
\ No newline at end of file +</html> |