www/adium.im 586:fc038d9cec63: Search bar.

commits at adium.im commits at adium.im
Wed Feb 22 17:59:47 UTC 2012


details:	http://hg.adium.im/www/adium.im/rev/fc038d9cec63
revision:	586:fc038d9cec63
branch:		rewrite
author:		Paul Wilde <me at paulwilde.co.uk>
date:		Wed Feb 22 03:00:54 2012 +0000

Search bar.
Subject: www/adium.im 587:e4c29b7f1581: Cleanup.

details:	http://hg.adium.im/www/adium.im/rev/e4c29b7f1581
revision:	587:e4c29b7f1581
branch:		rewrite
author:		Paul Wilde <me at paulwilde.co.uk>
date:		Wed Feb 22 05:42:00 2012 +0000

Cleanup.
Subject: www/adium.im 588:c53f7b3931fb: New sub-navigation.

details:	http://hg.adium.im/www/adium.im/rev/c53f7b3931fb
revision:	588:c53f7b3931fb
branch:		rewrite
author:		Paul Wilde <me at paulwilde.co.uk>
date:		Wed Feb 22 05:48:09 2012 +0000

New sub-navigation.

diffs (369 lines):

diff -r f9e7349308e1 -r c53f7b3931fb assets/images/sprite.png
Binary file assets/images/sprite.png has changed
diff -r f9e7349308e1 -r c53f7b3931fb assets/scripts/help.js
--- a/assets/scripts/help.js	Tue Feb 21 20:16:32 2012 +0000
+++ b/assets/scripts/help.js	Wed Feb 22 05:48:09 2012 +0000
@@ -15,8 +15,12 @@
 		"description": "Adium asks for passwords although they have been saved in the OS X Keychain (<strong>Lion</strong> only)."
 	}
 ]
-// Hot Issues
 $(function() {
+	// Change search icon on focus, then change it back on blur
+	$('#search').focus(function() { $('#search-icon').css('backgroundPosition', '-225px -132px'); });
+	$('#search').blur(function() { $('#search-icon').css('backgroundPosition', '-225px -102px'); });
+	
+	// Hot Issues
 	for (var i in hotIssues) {
 		var li = $('<li></li>').addClass("li-" + hotIssues[i].protocol);
 		
diff -r f9e7349308e1 -r c53f7b3931fb assets/styles/global.css
--- a/assets/styles/global.css	Tue Feb 21 20:16:32 2012 +0000
+++ b/assets/styles/global.css	Wed Feb 22 05:48:09 2012 +0000
@@ -67,7 +67,7 @@
 	font-size: 1em;
 }
 
-nav, p, footer ul, footer span, a.button { 
+nav, p, footer ul, footer span, a.button, #search { 
 	font-size: 1.3em; 
 	line-height: 1.1em; 
 }
@@ -107,8 +107,6 @@
 
 nav { color: #999; }
 
-/* Notice: Clearfix */
-
 nav ul, nav li {
 	border: 0;
 	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#bababa)) 1 100%;
@@ -147,16 +145,11 @@
 	padding: 14px 13px;
 }
 nav li span, #menu-logo span {
-	-webkit-transition: color .2s ease; 
-	-webkit-transition: background-color .2s ease;
-	-moz-transition: color .2s ease; 
-	-moz-transition: background-color .2s ease;
-	-ms-transition: color .2s ease; 
-	-ms-transition: background-color .2s ease;
-	-o-transition: color .2s ease; 
-	-o-transition: background-color .2s ease;
-	transition: color .2s ease; 
-	transition: background-color .2s ease;
+	-webkit-transition: color .2s ease, background-color .2s ease;
+	-moz-transition: color .2s ease, background-color .2s ease;
+	-ms-transition: color .2s ease, background-color .2s ease;
+	-o-transition: color .2s ease, background-color .2s ease;
+	transition: color .2s ease, background-color .2s ease;
 }
 
 nav li a span { color: #666; }
@@ -212,10 +205,10 @@
 	border-bottom: 1px solid #555;
 }
 
-.heading h1, .heading h2 {
+.heading h1, .heading h2, nav.sub li {
 	color: #fff;
 	font-weight: 600;
-	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+	text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
 	-webkit-font-smoothing: antialiased;
 }
 
@@ -226,65 +219,38 @@
 
 /********** Sub Navigation **********/
 
-nav.sub {
-	top: 7px;
-	position: relative;
-	float: right;
-}
+nav.sub { float: right; }
 
 nav.sub ul { margin: 0 14px; border: 0; }
-nav.sub li { border: 0; margin-left: 2px; }
-nav.sub li:first-child { margin-left: 0; }
+nav.sub li { border: 0; }
 
 nav.sub li a {
 	display: block;
-	padding: 12px 13px 11px;
-	border-radius: 5px 5px 0 0;
-	border: 1px solid rgba(0, 0, 0, .6);
-	border-top-color: rgba(0, 0, 0, .55);
-	border-bottom-color: rgba(0, 0, 0, .35);
-	color: #666;
-	text-shadow: 0 1px #e9e9e9;
-	background: #ccc;
-	background: linear-gradient(top, #fff #ddd 0%, #ccc 80%, #b5b5b5 100%);
-	background: -o-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
-	background: -moz-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
-	background: -webkit-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
-	background: -ms-linear-gradient(top, #ddd 0%, #ccc 80%, #b5b5b5 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(.8, #ccc), color-stop(1, #b5b5b5));
-	-webkit-box-shadow: inset 0 1px #e9e9e9;
-	-moz-box-shadow: inset 0 1px #e9e9e9;
-	box-shadow: inset 0 1px #e9e9e9;
+	padding: 16px 13px 15px;
+	color: #ddd;
+	-webkit-transition: color .2s ease;
+	-moz-transition: color .2s ease;
+	-ms-transition: color .2s ease;
+	-o-transition: color .2s ease;
+	transition: color .2s ease;
 }
 
-nav.sub li a:hover {
-	color: #555;
-	text-shadow: 0 1px #f9f9f9;
-	border-bottom-color: rgba(0, 0, 0, .4);
-	background: #ddd;
-	background: linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
-	background: -o-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
-	background: -moz-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
-	background: -webkit-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
-	background: -ms-linear-gradient(top, #eee 0%, #ddd 80%, #c5c5c5 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(.8, #ddd), color-stop(1, #c5c5c5));
-	-webkit-box-shadow: inset 0 1px #f9f9f9;
-	-moz-box-shadow: inset 0 1px #f9f9f9;
-	box-shadow: inset 0 1px #f9f9f9;
-}
-
-nav.sub li a:active { color: #777; }
+nav.sub li a:hover { color: #fff; }
+nav.sub li a:active { color: #bbb; }
 
 nav.sub li.active a {
-	padding-bottom: 12px;
-	color: #777;
-	text-shadow: 0 1px #fff;
-	background: #fafafa;
-	border: 1px solid rgba(0, 0, 0, .65);
-	border-bottom-color: #fafafa;
-	-webkit-box-shadow: inset 0 1px #fff;
-	-moz-box-shadow: inset 0 1px #fff;
-	box-shadow: inset 0 1px #fff;
+	margin: 10px 4px 9px;
+	padding: 5px 8px;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	border: 1px solid #444;
+	border-top-color: #414141;
+	color: #fff;
+	background: rgba(0, 0, 0, .2);
+	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
+	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
+	box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
 }
 
 /********** Content **********/
@@ -423,6 +389,7 @@
 hr.one, hr.two, hr.three { display: none; }
 
 a:link.closed, span.closed { text-decoration: line-through; }
+a:link.closed:hover, span.closed:hover { text-decoration: line-through underline; }
 
 /********** Thumbnails / Media **********/
 
@@ -469,11 +436,11 @@
 	box-shadow: inset 0 0 30px rgba(0, 0, 0, .4);
 	background: #444; /* IE fallback */
 	background: rgba(0, 0, 0, .6);
-	-webkit-transition: opacity 150ms ease-in;
-	-moz-transition: opacity 150ms ease-in;
-	-ms-transition: opacity 150ms ease-in;
-	-o-transition: opacity 150ms ease-in;
-	transition: opacity 150ms ease-in;
+	-webkit-transition: opacity .2s ease;
+	-moz-transition: opacity .2s ease;
+	-ms-transition: opacity .2s ease;
+	-o-transition: opacity .2s ease;
+	transition: opacity .2s ease;
 }
 
 .overlay span:after, figure span:after {
@@ -494,11 +461,11 @@
 	padding-top: 10px;
 	color: #777;
 	font-weight: 400;
-	-webkit-transition: color 150ms ease-in;
-    -moz-transition: color 150ms ease-in;
-    -ms-transition: color 150ms ease-in;
-    -o-transition: color 150ms ease-in;
-    transition: color 150ms ease-in;
+	-webkit-transition: color .2s ease;
+    -moz-transition: color .2s ease;
+    -ms-transition: color .2s ease;
+    -o-transition: color .2s ease;
+    transition: color .2s ease;
 }
 
 figcaption h4 { color: #444; font-weight: 500; padding-bottom: 6px; }
@@ -567,6 +534,66 @@
 	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2);
 }
 
+/********** Inputs **********/
+
+input { outline: none; font-family: Helvetica Neue, sans-serif; }
+input::-moz-focus-inner { border: 0; }
+
+/********** Search **********/
+
+form#search-container {
+	float: right;
+	margin: 7px 14px 0 0;
+}
+
+#search::-webkit-input-placeholder { color: #777; font-weight: 500; }
+#search:-moz-placeholder { color: #777; font-weight: 500; }
+
+#search:focus::-moz-placeholder { color: #999; }
+#search:focus::-webkit-input-placeholder { color: #999; }
+
+#search {
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	border-radius: 20px;
+	border: 1px solid #515151;
+	border-top-color: #4b4b4b;
+	padding: 5px 12px 5px 26px;
+	font-weight: 500;
+	width: 130px;
+	text-shadow: 0 1px rgba(255, 255, 255, .2);
+	color: #666;
+	-webkit-font-smoothing: antialiased;
+	background: #dcdcdc;
+	background: rgba(255, 255, 255, .75);
+	box-shadow: 0 1px rgba(255, 255, 255, .15), inset 0 1px 3px rgba(0, 0, 0, .25);
+	-webkit-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-moz-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-ms-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-o-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	transition: width .3s ease, background-color .3s ease, color .3s ease;
+}
+
+#search:focus {
+	width: 200px;
+	color: #444;
+	background: #f7f7f7;
+	background: rgba(255, 255, 255, .95);
+	-webkit-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-moz-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-ms-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	-o-transition: width .3s ease, background-color .3s ease, color .3s ease;
+	transition: width .3s ease, background-color .3s ease, color .3s ease;
+}
+
+#search-icon {
+	display: block;
+	position: absolute;
+	background: url('../../assets/images/sprite.png') no-repeat -225px -102px;
+	width: 26px;
+	height: 26px;
+}
+
 /********** Footer **********/
 
 footer .container {
diff -r f9e7349308e1 -r c53f7b3931fb assets/styles/home.css
--- a/assets/styles/home.css	Tue Feb 21 20:16:32 2012 +0000
+++ b/assets/styles/home.css	Wed Feb 22 05:48:09 2012 +0000
@@ -40,7 +40,7 @@
 .banner {
 	background: url('../images/banner_bg.png') #749d52; /* Notice: IE7-8/outdated browser fallback */
 	background: url('../images/shadow.png') repeat-x, url('../images/banner_bg.png') #749d52;
-	border-bottom: 1px solid #4f683b;
+	border-bottom: 1px solid #577342;
 	min-height: 263px;
 }
 
diff -r f9e7349308e1 -r c53f7b3931fb beta/index.php
--- a/beta/index.php	Tue Feb 21 20:16:32 2012 +0000
+++ b/beta/index.php	Wed Feb 22 05:48:09 2012 +0000
@@ -199,11 +199,12 @@
 					<h1>Adium <?php echo $latest['ver']; ?></h1>
 					<a href="http://download.adium.im/Adium_<?php echo $latest['ver']; ?>.dmg">
 						<div class="beta-logo"></div>
-						<p>Adium_<?php echo $latest['ver']; ?>.dmg
-					</a> 
-					(MD5: <code><?php echo $latest['md5']; ?></code>)<br>
-					Requires 10.6.8 or later - Released <?php echo $latest['date']; ?><br>
-					Download hosted by <a href="http://www.cachefly.com/">CacheFly</a></p>
+					<p>
+						Adium_<?php echo $latest['ver']; ?>.dmg</a> 
+						(MD5: <code><?php echo $latest['md5']; ?></code>)<br>
+						Requires 10.6.8 or later - Released <?php echo $latest['date']; ?><br>
+						Download hosted by <a href="http://www.cachefly.com/">CacheFly</a>
+					</p>
 				</div>
 			</section>
 			<section>
diff -r f9e7349308e1 -r c53f7b3931fb help/documentation/index.php
--- a/help/documentation/index.php	Tue Feb 21 20:16:32 2012 +0000
+++ b/help/documentation/index.php	Wed Feb 22 05:48:09 2012 +0000
@@ -10,6 +10,8 @@
 	<link rel="stylesheet" href="/rewrite/assets/styles/help.css">
 	<link rel="shortcut icon" href="/rewrite/favicon.ico">
 	<link rel="apple-touch-icon-precomposed" href="/rewrite/apple-touch-icon.png">
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="/rewrite/assets/scripts/help.js"></script>
 </head>
 
 <body>
@@ -32,7 +34,11 @@
 		</div>
 		<div class="heading">
 			<div class="container">
-				<h1>Help</h1>
+				<h1>Documentation</h1>
+				<form id="search-container">
+					<span id="search-icon"></span>
+					<input type="text" id="search" placeholder="Search..">
+				</form>
 				<nav class="sub">
 					<ul>
 						<li><a href="/rewrite/help/">Adium Help</a></li>
diff -r f9e7349308e1 -r c53f7b3931fb help/index.php
--- a/help/index.php	Tue Feb 21 20:16:32 2012 +0000
+++ b/help/index.php	Wed Feb 22 05:48:09 2012 +0000
@@ -35,6 +35,10 @@
 		<div class="heading">
 			<div class="container">
 				<h1>Help</h1>
+				<form id="search-container">
+					<span id="search-icon"></span>
+					<input type="text" id="search" placeholder="Search..">
+				</form>
 				<nav class="sub">
 					<ul>
 						<li class="active"><a href="/rewrite/help/">Adium Help</a></li>
diff -r f9e7349308e1 -r c53f7b3931fb screencasts/index.php
--- a/screencasts/index.php	Tue Feb 21 20:16:32 2012 +0000
+++ b/screencasts/index.php	Wed Feb 22 05:48:09 2012 +0000
@@ -10,7 +10,9 @@
 	<link rel="stylesheet" href="/rewrite/assets/styles/thumbnails.css">
 	<link rel="shortcut icon" href="/rewrite/favicon.ico">
 	<link rel="apple-touch-icon-precomposed" href="/rewrite/apple-touch-icon.png">
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 	<script src="/rewrite/assets/scripts/screencasts.js"></script>
+	<script src="/rewrite/assets/scripts/help.js"></script>
 </head>
 
 <body>
@@ -34,6 +36,10 @@
 		<div class="heading">
 			<div class="container">
 				<h1>Screencasts</h1>
+				<form id="search-container">
+					<span id="search-icon"></span>
+					<input type="text" id="search" placeholder="Search..">
+				</form>
 				<nav class="sub">
 					<ul>
 						<li><a href="/rewrite/help/">Adium Help</a></li>




More information about the commits mailing list