From 71617ebaececa563256796fe73924cbf21df8a0a Mon Sep 17 00:00:00 2001
From: Thomas Park <thomas@thomaspark.me>
Date: Wed, 20 Feb 2013 00:12:38 -0500
Subject: swatchmaker: update styles, fix modal and popover, add smoothscroll,
fix path to icos
---
swatchmaker/test/bootswatch.css | 323 ++++++++--------------------------------
swatchmaker/test/bootswatch.js | 94 ++++++++++++
swatchmaker/test/test-full.html | 81 +++++-----
swatchmaker/test/test.html | 6 +-
4 files changed, 198 insertions(+), 306 deletions(-)
create mode 100644 swatchmaker/test/bootswatch.js
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>
--
cgit v1.2.3