Template cleanup

- added RSS link to footer - converted gallery js unobtrusive inclusion to be clearer
kolber · Dec 14, 2009 · 075677e · 075677e
1 parent 80ab55d
commit 075677e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 16 deletions.
diff --git a/public/docs/css/screen.css b/public/docs/css/screen.css
@@ -61,6 +61,7 @@ div.media { margin: 0px 0px 10px; }
 div.description div#images { padding: 0px 0px 0px 0px; }
 div#media img { margin: 0px 0px 10px; }
 p#project-count, p#gallery-count { margin: 2px 20px 0px 0px; }
+p#gallery-count, div#gallery-navigation { display: none; }
 p#gallery-count span { margin: -1px 0px 0px; display: block; }
 div#project-navigation { margin: 0px 0px 0px 20px; }
 div#project-navigation p, div#gallery-navigation p { margin: 0px 0px 1px; }
@@ -70,3 +71,11 @@ div#image-wrapper div#image-holder { width: 100000000px; }
 div#image-wrapper div#image-holder div.image { float: left; width: 560px; }
 
 img.project-thumb { padding: 0px 10px 5px 0px; float: left; display: none; }
+
+a.atom-rss { background: #999; color: #fff; padding: 1px 4px; margin: 0px 0px 0px 3px; border: 1px solid; font-size: 0.85em; letter-spacing: 0.1em; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
+
+/* Javascript-enabled styles */
+body.js-enabled p#gallery-count, body.js-enabled div#gallery-navigation { display: block; }
+body.js-enabled p#project-count { display: none; }
+body.js-enabled div#media div.image { display: none; }
+body.js-enabled div#media div.image:first-child { display: block; }
diff --git a/public/docs/js/init-gallery.js b/public/docs/js/init-gallery.js
@@ -3,13 +3,16 @@ $(function() {
 	// don't init gallery if it consists of a single photo
 	if($("div.image").length > 1) {
 		// wrap images
-		$("p#project-count").replaceWith('<p id="gallery-count" class="col one"><em>&#8470;</em> <span>1/1</span></p>');
-		$('<div id="gallery-navigation" class="col three"><p><a href="#" id="next-image">Next image</a> <em>&rarr;</em></p><p><a href="#" id="previous-image">Previous image</a> <em>&larr;</em></p></div>').insertAfter("p#gallery-count");
 		$("div.image").wrapAll("<div id='image-wrapper'><div id='image-holder'></div></div>");
+		$("div.image").show();
 
 		// init gallery: Gallery.init(imageHolder, imageWrapperWidth, imageCountHolder, nextButton, prevButton)
 		Gallery.init($("div#image-holder"), 560, $("p#gallery-count").children("span")[0], $("a#next-image"), $("a#previous-image"));
-
-		$("div.image img").show();
+
+	} else {
+	  // hide gallery count and navigation
+	  $("p#gallery-count, div#gallery-navigation").hide();
+	  // show project navigation
+	  $("p#project-count").show();
 	}
 });
diff --git a/templates/category.html b/templates/category.html
@@ -4,7 +4,7 @@
 	<head>
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>@title, @name's Portfolio </title>
-		<link rel="alternate" type="application/atom+xml" href="@root_path/feed/">
+		<link rel="alternate" type="application/atom+xml" href="@root_path/feed//">
 		<link rel="stylesheet" href="@root_path/docs/css/screen.css" type="text/css" media="screen"> 
 	</head>
 	<body>
@@ -20,7 +20,7 @@ <h1 class="col three">
 				:category_lists
 			</div>
 			<hr>
-			<p id="footer" class="col six">&copy; Copyright @name @current_year<br>
+			<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/feed/">RSS</a><br>
 				<em>Content managed by <a href="http://www.staceyapp.com">stacey</a></em></p>
 		</div>
 	</body>

diff --git a/templates/index.html b/templates/index.html
@@ -4,7 +4,7 @@
 	<head>
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>@name's Portfolio </title>
-		<link rel="alternate" type="application/atom+xml" href="@root_path/feed/">
+		<link rel="alternate" type="application/atom+xml" href="@root_path/feed//">
 		<link rel="stylesheet" href="@root_path/docs/css/screen.css" type="text/css" media="screen"> 
 	</head>
 	<body>
@@ -20,7 +20,7 @@ <h1 class="col three">
 				:category_lists
 			</div>
 			<hr>
-			<p id="footer" class="col six">&copy; Copyright @name @current_year<br>
+			<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/feed/">RSS</a><br>
 				<em>Content managed by <a href="http://www.staceyapp.com">stacey</a></em></p>
 		</div>
 	</body>

diff --git a/templates/page.html b/templates/page.html
@@ -4,7 +4,7 @@
 	<head>
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>@title, @name's Portfolio </title>
-		<link rel="alternate" type="application/atom+xml" href="@root_path/feed/">
+		<link rel="alternate" type="application/atom+xml" href="@root_path/feed//">
 		<link rel="stylesheet" href="@root_path/docs/css/screen.css" type="text/css" media="screen"> 
 	</head>
 	<body>
@@ -26,7 +26,7 @@ <h2 class="col six"><a href="@root_path">@title</a></h2>
 				</div>
 			</div>
 			<hr>
-			<p id="footer" class="col six">&copy; Copyright @name @current_year<br>
+			<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/feed/">RSS</a><br>
 				<em>Content managed by <a href="http://www.staceyapp.com">stacey</a></em></p>
 		</div>
 	</body>

diff --git a/templates/project.html b/templates/project.html
@@ -4,7 +4,7 @@
 	<head>
 		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 		<title>@title, @name's Portfolio </title>
-		<link rel="alternate" type="application/atom+xml" href="@root_path/feed/">
+		<link rel="alternate" type="application/atom+xml" href="@root_path/feed//">
 		<link rel="stylesheet" href="@root_path/docs/css/screen.css" type="text/css" media="screen"> 
 	</head>
 	<body>
@@ -23,21 +23,26 @@ <h2 class="col six"><a href="@root_path">@title</a></h2>
 					@content
 				</div>
 				<hr>
-				<p id="project-count" class="col one"><em>&#8470;</em> @index/@siblings_count</p>
+        <p id="project-count" class="col one"><em>&#8470;</em> @index/@siblings_count</p>
+				<p id="gallery-count" class="col one">
+				  <em>&#8470;</em> <span>1/1</span>
+				</p>
+				<div id="gallery-navigation" class="col three">
+				  <p><a href="#" id="next-image">Next image</a> <em>&rarr;</em></p>
+				  <p><a href="#" id="previous-image">Previous image</a> <em>&larr;</em></p>
+				</div>
 				<div class="col four">
 					:next_page
 					:previous_page
 				</div>
 				:media
 			</div>
 			<hr>
-			<p id="footer" class="col six">&copy; Copyright @name @current_year<br>
+			<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/feed/">RSS</a><br>
 				<em>Content managed by <a href="http://www.staceyapp.com">stacey</a></em></p>
 		</div>
 		<script type="text/javascript" charset="utf-8">
-			// hide all images except the first on load
-			var imgs = document.getElementById('media').getElementsByTagName('img');
-			for (var i = 1; i < imgs.length; i++) imgs[i].style.display = 'none';
+			document.getElementsByTagName('body')[0].className += ' js-enabled';
 		</script>
 		<script src="@root_path/docs/js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
 		<script src="@root_path/docs/js/gallery.js" type="text/javascript" charset="utf-8"></script>