swatchmaker: update styles, fix modal and popover, add smoothscroll, fix path to icos

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>