diff options
| -rw-r--r-- | swatchmaker/test/bootswatch.css | 323 | ||||
| -rw-r--r-- | swatchmaker/test/bootswatch.js | 94 | ||||
| -rwxr-xr-x | swatchmaker/test/test-full.html | 81 | ||||
| -rwxr-xr-x | swatchmaker/test/test.html | 6 |
4 files changed, 198 insertions, 306 deletions
diff --git a/swatchmaker/test/bootswatch.css b/swatchmaker/test/bootswatch.css index e7aaca6f..2a69cbb7 100644 --- a/swatchmaker/test/bootswatch.css +++ b/swatchmaker/test/bootswatch.css @@ -1,20 +1,44 @@ -body { - padding-top: 80px; - padding-bottom: 20px; +section { + margin-top: 60px; + padding-top: 100px; } -.navbar a > i { - opacity: 0.5; +/* index */ + +.tooltip-inner { + max-width: 500px; } -.navbar a:hover > i { - opacity: 1; +.hero-unit h1, +.hero-unit p { + margin-bottom: 15px; } -section { - margin-top: 100px; +#footer { + margin-bottom: 20px; +} + +#footer .links a { + margin-right: 10px; +} + +@media (max-width: 767px) { + + + section { + padding-top: 20px; + } +} + +@media (max-width: 979px) and (min-width: 768px) { + + section { + padding-top: 20px; + } } +/* preview */ + .subhead { padding-bottom: 0; margin-bottom: 9px; @@ -24,6 +48,12 @@ section { font-size: 54px; } +.subhead > div:first-child { + min-height: 200px; +} + +/* subnav */ + .subnav { margin-bottom: 60px; width: 100%; @@ -42,11 +72,11 @@ section { -moz-border-radius: 4px; border-radius: 4px; } - + .subnav .nav { margin-bottom: 0; } - + .subnav .nav > li > a { margin: 0; padding-top: 11px; @@ -57,7 +87,7 @@ section { -moz-border-radius: 0; border-radius: 0; } - + .subnav .nav > .active > a, .subnav .nav > .active > a:hover { padding-left: 13px; @@ -69,12 +99,12 @@ section { -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05); } - + .subnav .nav > .active > a .caret, .subnav .nav > .active > a:hover .caret { border-top-color: #777; } - + .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { border-left: 0; @@ -83,227 +113,19 @@ section { -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } - + .subnav .nav > li:last-child > a { border-right: 0; } - + .subnav .dropdown-menu { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } - -.tooltip-inner { - max-width: 500px; -} - -.hero-unit { - margin-bottom: 10px; - text-align: center; -} - -.hero-unit h1, -.hero-unit p { - margin-bottom: 15px; -} - -#social { - display: inline-block; - margin-top: 45px; - text-align: center; -} - -#gh-star { - margin-right: 10px; -} - -.twitter-follow-button { - width: 60px !important; -} - -.twitter-share-button { - margin-right: 15px; -} - -.rss-button { - width: 40px; - height: 14px; - font-size: 11px; - line-height: 14px; - font-weight: bold; - margin: 0 0 10px; - padding: 2px 5px 2px 4px; -} - -.icon-rss { - background: url(../img/rss-icons.png) no-repeat 0 0; - opacity: .65; - width: 16px; -} - -#ticker { - margin-bottom: 40px; -} - -.about { - margin-top: 20px; -} - -.about > div { - margin-bottom: 20px; -} - -.about h3 { - margin: 0 0 5px 35px; -} - -.about img { - float: left; - margin-top: 5px; - opacity: 0.7; -} - -#gallery { - margin: 45px 0 30px 0; - padding-right: 20px; - text-align: center; -} - -.thumbnail { - margin-bottom: 20px; - background-color: rgba(0, 0, 0, 0.05); -} - -.thumbnail img { - width: 100%; - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; -} - -.thumbnail .caption { - color: inherit !important; -} - -.thumbnail h3 { - margin-bottom: 0; -} - -.thumbnail .btn-toolbar { - margin-top: 15px; - text-align: right; -} - -.links { - margin-bottom: 20px; -} - -.links > a { - margin-right: 10px; -} - -div.one .bsa_it_ad { - padding: 25px 25px 15px 25px; -} - -div.one .bsa_it_p { - display: none; -} - -.bsa { - float: right; - max-width: 400px; - padding: 0; -} - -body .one .bsa_it_ad { - margin-bottom: -10px; - background: none; - border: none; - font-family: inherit; - color: inherit; -} - -body .one .bsa_it_ad .bsa_it_t, -body .one .bsa_it_ad .bsa_it_d { - color: inherit; - font-size: inherit; -} - -body .one .bsa_it_p { - display: none; -} - -.links { - margin-bottom: 20px; -} - -.links > a { - margin-right: 10px; -} - -@media (max-width: 480px) { - - .hero-unit { - padding: 20px 20px 0; - margin: 0 0 20px; - } - - .hero-unit h1 { - font-size: 36px; - } - - .hero-unit iframe { - margin-right: 0 !important; - } - - #social { - margin-top: 0px; - margin-bottom: 20px; - } - - #social > span { - display: block; - } - - .about { - margin-top: 0; - } - - .about h3 { - margin-top: 20px; - } - - .about p { - margin-bottom: 0; - } - - .modal { - position: fixed !important; - top: 25% !important; - } -} - -/* Landscape phone to portrait tablet */ -@media (min-width: 481px) and (max-width: 767px) { - - .hero-unit { - margin-top: 0; - padding: 30px; - } - - .about { - margin-top: 0; - } -} - + @media (max-width: 767px) { - - body { - padding-top: 0; - } - + .subnav { position: static; top: auto; @@ -315,53 +137,32 @@ body .one .bsa_it_p { -moz-box-shadow: none; box-shadow: none; } - + .subnav .nav > li { float: none; } - + .subnav .nav > li > a { border: 0; } - + .subnav .nav > li + li > a { border-top: 1px solid #e5e5e5; } - + .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } - - .bsa { - float: none; - } } - -/* Portrait tablet to landscape and desktop */ -@media (min-width: 768px) and (max-width: 979px) { - - .hero-unit { - margin-top: 0; - } - - .thumbnail p { - font-size: 12px; - } - - .thumbnail .btn { - padding: 8px 12px; - font-size: 12px; - } -} - -/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ + @media (min-width: 980px) { + .subnav-fixed { position: fixed; - top: 41px; + top: 40px; left: 0; right: 0; z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ @@ -375,11 +176,13 @@ body .one .bsa_it_p { box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ } + .subnav-fixed .nav { width: 938px; margin: 0 auto; padding: 0 1px; } + .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { -webkit-border-radius: 0; @@ -387,17 +190,9 @@ body .one .bsa_it_p { border-radius: 0; } } - -@media (min-width: 768px) and (max-width: 979px) { - - /* Remove any padding from the body */ - body { - padding-top: 0; - } -} - + @media (min-width: 1210px) { - + .subnav-fixed .nav { width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ } diff --git a/swatchmaker/test/bootswatch.js b/swatchmaker/test/bootswatch.js new file mode 100644 index 00000000..71eba460 --- /dev/null +++ b/swatchmaker/test/bootswatch.js @@ -0,0 +1,94 @@ +// tooltips + +$('a[rel=tooltip]').tooltip({ + 'placement': 'bottom' +}); + +// smooth scroll + +$(document).ready(function() { + function filterPath(string) { + return string + .replace(/^\//,'') + .replace(/(index|default).[a-zA-Z]{3,4}$/,'') + .replace(/\/$/,''); + } + var locationPath = filterPath(location.pathname); + var scrollElem = scrollableElement('html', 'body'); + + $('a[href^=#]').each(function() { + var thisPath = filterPath(this.pathname) || locationPath; + if ( locationPath == thisPath + && (location.hostname == this.hostname || !this.hostname) + && this.hash.replace(/#/,'') ) { + var $target = $(this.hash), target = this.hash; + if (target) { + var targetOffset = $target.offset().top; + $(this).click(function(event) { + event.preventDefault(); + $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { + location.hash = target; + }); + }); + } + } + }); + + // use the first element that is "scrollable" + function scrollableElement(els) { + for (var i = 0, argLength = arguments.length; i <argLength; i++) { + var el = arguments[i], + $scrollElement = $(el); + if ($scrollElement.scrollTop()> 0) { + return el; + } else { + $scrollElement.scrollTop(1); + var isScrollable = $scrollElement.scrollTop()> 0; + $scrollElement.scrollTop(0); + if (isScrollable) { + return el; + } + } + } + return []; + } + +}); + +// subnav + +(function ($) { + + $(function(){ + + // fix sub nav on scroll + var $win = $(window), + $body = $('body'), + $nav = $('.subnav'), + navHeight = $('.navbar').first().height(), + subnavHeight = $('.subnav').first().height(), + subnavTop = $('.subnav').length && $('.subnav').offset().top - navHeight, + marginTop = parseInt($body.css('margin-top'), 10); + isFixed = 0; + + processScroll(); + + $win.on('scroll', processScroll); + + function processScroll() { + var i, scrollTop = $win.scrollTop(); + + if (scrollTop >= subnavTop && !isFixed) { + isFixed = 1; + $nav.addClass('subnav-fixed'); + $body.css('margin-top', marginTop + subnavHeight + 'px'); + } else if (scrollTop <= subnavTop && isFixed) { + isFixed = 0; + $nav.removeClass('subnav-fixed'); + $body.css('margin-top', marginTop + 'px'); + } + } + + }); + +})(window.jQuery);
\ No newline at end of file diff --git a/swatchmaker/test/test-full.html b/swatchmaker/test/test-full.html index bb442964..333c74ca 100755 --- a/swatchmaker/test/test-full.html +++ b/swatchmaker/test/test-full.html @@ -33,15 +33,15 @@ <![endif]--> <!-- Le fav and touch icons --> - <link rel="shortcut icon" href="assets/ico/favicon.ico"> - <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> - <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> + <link rel="shortcut icon" href="../bootstrap/docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../bootstrap/docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../bootstrap/docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../bootstrap/docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../bootstrap/docs/assets/ico/apple-touch-icon-57-precomposed.png"> </head> - <body data-spy="scroll" data-target=".bs-docs-sidebar"> + <body id="top" data-spy="scroll" data-target=".bs-docs-sidebar"> <!-- Navbar ================================================== --> @@ -93,35 +93,6 @@ </div> - -<!-- Modal - ================================================== --> -<div class="modal fade" id="myModal"> - <div class="modal-header"> - <a class="close" data-dismiss="modal">×</a> - <h3>Modal header</h3> - </div> - <div class="modal-body"> - <form> - <legend>Legend</legend> - <label>Label name</label> - <input type="text" placeholder="Type something"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> - <button type="submit" class="btn">Submit</button> - </form> - - <p>One fine body in paragraph tags…</p> - And without p tags - </div> - <div class="modal-footer"> - <a href="#" class="btn">Close</a> - <a href="#" class="btn btn-primary">Save changes</a> - </div> -</div> - <!-- Subhead ================================================== --> <div class="container" id="overview"> @@ -2410,7 +2381,7 @@ </div> <div class="bs-docs-example" style="padding-bottom: 24px;"> - <a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a> + <a href="#" id="myPopover" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a> </div> </section> @@ -2428,7 +2399,7 @@ ================================================== --> <footer class="footer"> <div class="container"> - <p class="pull-right"><a href="#">Back to top</a></p> + <p class="pull-right"><a href="#top">Back to top</a></p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> @@ -2441,6 +2412,33 @@ </footer> + <!-- Modal + ================================================== --> + <div class="modal hide fade" id="myModal"> + <div class="modal-header"> + <a class="close" data-dismiss="modal">×</a> + <h3>Modal header</h3> + </div> + <div class="modal-body"> + <form> + <legend>Legend</legend> + <label>Label name</label> + <input type="text" placeholder="Type something"> + <span class="help-block">Example block-level help text here.</span> + <label class="checkbox"> + <input type="checkbox"> Check me out + </label> + <button type="submit" class="btn">Submit</button> + </form> + + <p>One fine body in paragraph tags…</p> + And without p tags + </div> + <div class="modal-footer"> + <a href="#" class="btn">Close</a> + <a href="#" class="btn btn-primary">Save changes</a> + </div> + </div> <!-- Le javascript ================================================== --> @@ -2460,14 +2458,19 @@ <script src="../bootstrap/docs/assets/js/bootstrap-carousel.js"></script> <script src="../bootstrap/docs/assets/js/bootstrap-typeahead.js"></script> <script src="../bootstrap/docs/assets/js/bootstrap-affix.js"></script> - <script src="../bootstrap/docs/assets/js/application.js"></script> + <script src="bootswatch.js"></script> <script> + $(document).ready(function () { + $('.modal').modal('hide'); + $("[rel=popover]").popover().click(function(e){ + e.preventDefault(); + }); + }); </script> - </body> </html> diff --git a/swatchmaker/test/test.html b/swatchmaker/test/test.html index 1ab58e36..25a3f05d 100755 --- a/swatchmaker/test/test.html +++ b/swatchmaker/test/test.html @@ -18,7 +18,7 @@ </head> - <body class="preview" data-spy="scroll" data-target=".subnav" data-offset="80"> + <body id="top" class="preview" data-spy="scroll" data-target=".subnav" data-offset="80"> <script src="http://bootswatch.com/js/bsa.js"></script> @@ -848,7 +848,7 @@ <!-- Footer ================================================== --> <footer class="footer"> - <p class="pull-right"><a href="#">Back to top</a></p> + <p class="pull-right"><a href="#top">Back to top</a></p> </footer> </div><!-- /container --> @@ -873,7 +873,7 @@ <script src="../bootstrap/docs/assets/js/bootstrap-carousel.js"></script> <script src="../bootstrap/docs/assets/js/bootstrap-typeahead.js"></script> <script src="../bootstrap/docs/assets/js/bootstrap-affix.js"></script> - <script src="application.js"></script> + <script src="bootswatch.js"></script> </body> |