www/adium.im 589:c51f08db2e4c: Make the sub-navigation a little ...
commits at adium.im
commits at adium.im
Sat Feb 25 19:59:15 UTC 2012
details: http://hg.adium.im/www/adium.im/rev/c51f08db2e4c
revision: 589:c51f08db2e4c
branch: rewrite
author: Paul Wilde <me at paulwilde.co.uk>
date: Thu Feb 23 05:54:12 2012 +0000
Make the sub-navigation a little more compact.
Subject: www/adium.im 590:5ab29968f5d3: Crush these images.
details: http://hg.adium.im/www/adium.im/rev/5ab29968f5d3
revision: 590:5ab29968f5d3
branch: rewrite
author: Paul Wilde <me at paulwilde.co.uk>
date: Sat Feb 25 19:53:38 2012 +0000
Crush these images.
Subject: www/adium.im 591:1cd2d492a40c: Javascript search drop-down.
details: http://hg.adium.im/www/adium.im/rev/1cd2d492a40c
revision: 591:1cd2d492a40c
branch: rewrite
author: Paul Wilde <me at paulwilde.co.uk>
date: Sat Feb 25 19:58:59 2012 +0000
Javascript search drop-down.
diffs (420 lines):
diff -r c53f7b3931fb -r 1cd2d492a40c assets/images/banner_bg.png
Binary file assets/images/banner_bg.png has changed
diff -r c53f7b3931fb -r 1cd2d492a40c assets/images/sprite.png
Binary file assets/images/sprite.png has changed
diff -r c53f7b3931fb -r 1cd2d492a40c assets/images/thumbnail_play.png
Binary file assets/images/thumbnail_play.png has changed
diff -r c53f7b3931fb -r 1cd2d492a40c assets/scripts/help.js
--- a/assets/scripts/help.js Wed Feb 22 05:48:09 2012 +0000
+++ b/assets/scripts/help.js Sat Feb 25 19:58:59 2012 +0000
@@ -1,41 +1,143 @@
var hotIssues = [
{
- "protocol": "msn",
- "description": "With certain <strong>MSN</strong> contacts: visibility issues (not being seen / not seeing others despite being online), broken message sending and receiving. This issue is still under investigation in the library we use. See <a class='ticket' href='http://developer.pidgin.im/ticket/13068'>#p13068</a> for more information."
+ 'protocol': 'msn',
+ 'description': 'With certain <strong>MSN</strong> contacts: visibility issues (not being seen / not seeing others despite being online), broken message sending and receiving. This issue is still under investigation in the library we use. See <a class="ticket" href="http://developer.pidgin.im/ticket/13068">#p13068</a> for more information.'
},
{
- "protocol": "facebook",
- "ticket": 15687,
- "closed": true,
- "description": "Facebook contacts are no longer grouped. <a href='http://forums.cocoaforge.com/viewtopic.php?f=13&t=23852#p131800'>Zac's posts in the thread on the Adium forum</a> explain why."
+ 'protocol': 'facebook',
+ 'ticket': 15687,
+ 'closed': true,
+ 'description': 'Facebook contacts are no longer grouped. <a href="http://forums.cocoaforge.com/viewtopic.php?f=13&t=23852#p131800">Zac\'s posts in the thread on the Adium forum</a> explain why.'
},
{
- "ticket": 15381,
- "closed": false,
- "description": "Adium asks for passwords although they have been saved in the OS X Keychain (<strong>Lion</strong> only)."
+ 'ticket': 15381,
+ 'closed': false,
+ 'description': 'Adium asks for passwords although they have been saved in the OS X Keychain (<strong>Lion</strong> only).'
}
]
+
$(function() {
+
+ var $input = $('#search'),
+ delay = (function() {
+ var $time = 0;
+ return function(callback, ms) {
+ clearTimeout($time);
+ $time = setTimeout(callback, ms);
+ };
+ })();
+
+ // Prevent form submit
+ $('#search-container').submit(function() { return false; });
+
// 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'); });
+ $input.focus(function() { $('#search-icon').css('backgroundPosition', '-227px -132px'); });
+ $input.blur(function() {
+
+ // Do not lose focus of the search field if a search is active
+ if ($input.val() != '') {
+ $input.focus();
+ } else {
+ $('#search-results').remove();
+ }
+
+ $('#search-icon').css('backgroundPosition', '-227px -102px');
+ });
+
+ // Prevent clicks inside the search container from hiding the search-results div
+ $('#search-container').click(function(e) {
+ /* Kill search-results after clicking
+ Fixes a problem where the results would stay when going forward and back in the browser */
+ if ($(e.target).parents('#search-results').length) {
+ $('#search-results').remove();
+ }
+ e.stopPropagation();
+ });
+
+ // Remove the search results upon clicking the document, also blur the search field
+ $(document).click(function() {
+ $('#search-results').remove();
+ $input.blur();
+ });
+
+ $input.keyup(function () {
+ delay(function() {
+ if ($input.val() != '') {
+ $.getJSON('http://ajax.googleapis.com/ajax/services/search/web?callback=?', {
+ v : '1.0',
+ q : 'site:adium.im/help ' + $input.val(),
+ rsz : 4,
+ start: 0
+ }, function(data) {
+ var $r = data.responseData.results,
+ $c = data.responseData.cursor;
+
+ // If results div doesn't exist create it, otherwise empty it
+ if (!$('#search-results').length) {
+ $('#search-container').append($('<div id="search-results"><ul>'));
+ } else {
+ $('#search-results ul').empty();
+ }
+
+ // If results exist, populate the ul
+ if ($r.length) {
+
+ // Loop through the first 3 results
+ for (i = 0; i < 3; i++) {
+ $('#search-results ul').append(
+ '<li>' +
+ '<a href="' + $r[i].url + '">' +
+ '<h4>' + $r[i].titleNoFormatting.split(' - ', 1) + '</h4>' +
+ '<p>' + $r[i].content + '</p>' +
+ '</a>' +
+ '</li>'
+ );
+ }
+
+ // More results than 3
+ var $count = $c.estimatedResultCount - 3;
+
+ if ($count > 3) {
+ $('#search-results ul').append(
+ '<li id="more">' +
+ '<a href="' + $c.moreResultsUrl + '">' +
+ $count + ' more result' + ($count > 1 ? 's' : '') +
+ '</a>' +
+ '</li>'
+ );
+ }
+
+ } else {
+ $('#search-results ul').append('<li id="none">No search results</li>');
+ }
+
+ // List populated, now display it
+ $('#search-results').fadeIn();
+ });
+ } else {
+
+ // Nothing in search field, therefore hide
+ $('#search-results').fadeOut();
+ }
+ }, 300);
+ });
// Hot Issues
for (var i in hotIssues) {
- var li = $('<li></li>').addClass("li-" + hotIssues[i].protocol);
+ var li = $('<li></li>').addClass('li-' + hotIssues[i].protocol);
li.append(hotIssues[i].description);
if (hotIssues[i].ticket) {
- li.append(" (");
- var a = $('<a></a>').append("#" + hotIssues[i].ticket).addClass("ticket");
- a.attr("href", "http://trac.adium.im/ticket/" + hotIssues[i].ticket);
+ li.append(' (');
+ var a = $('<a></a>').append('#' + hotIssues[i].ticket).addClass('ticket');
+ a.attr('href', 'http://trac.adium.im/ticket/' + hotIssues[i].ticket);
if (hotIssues[i].closed) {
- a.addClass("closed");
+ a.addClass('closed');
}
- li.append(a, ")");
+ li.append(a, ')');
}
$('#hot-issues').append(li);
diff -r c53f7b3931fb -r 1cd2d492a40c assets/scripts/home.js
--- a/assets/scripts/home.js Wed Feb 22 05:48:09 2012 +0000
+++ b/assets/scripts/home.js Sat Feb 25 19:58:59 2012 +0000
@@ -7,7 +7,6 @@
$('body').append($tooltip.text($(this).attr('title')));
-
// Prevent tooltip from being cut off at the left edge
if ($p.left <= $tooltip.outerWidth() / 2) {
$left = $(this).contents().width();
diff -r c53f7b3931fb -r 1cd2d492a40c assets/styles/global.css
--- a/assets/styles/global.css Wed Feb 22 05:48:09 2012 +0000
+++ b/assets/styles/global.css Sat Feb 25 19:58:59 2012 +0000
@@ -55,19 +55,19 @@
font-size: 1.4em;
}
-figcaption h4 { font-size: 1.1em; }
+h4 { font-size: 1.1em; }
-.content p, .content h3, figcaption,
-td, th, pre {
+.content p, .content h3, figcaption, td, th, pre {
line-height: 1.4em;
}
.content ul ul, .content ol ol,
-.content ol ul, .content ul ol {
+.content ol ul, .content ul ol,
+#search-results p {
font-size: 1em;
}
-nav, p, footer ul, footer span, a.button, #search {
+nav, p, footer ul, footer span, a.button, #search, #search-results {
font-size: 1.3em;
line-height: 1.1em;
}
@@ -125,7 +125,7 @@
nav li {
position: relative; /* Notice: Ensures z-index works */
- z-index: 999;
+ z-index: 99;
float: left;
border-right: 1px solid #ccc;
}
@@ -214,7 +214,7 @@
.heading h1 {
float: left;
- padding: 13px 0 13px 35px;
+ padding: 12px 0 12px 35px;
}
/********** Sub Navigation **********/
@@ -226,7 +226,7 @@
nav.sub li a {
display: block;
- padding: 16px 13px 15px;
+ padding: 15px 13px 14px;
color: #ddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
@@ -239,18 +239,18 @@
nav.sub li a:active { color: #bbb; }
nav.sub li.active a {
- margin: 10px 4px 9px;
+ margin: 9px 4px 8px;
padding: 5px 8px;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
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);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 1px rgba(255, 255, 255, .15);
}
/********** Content **********/
@@ -481,7 +481,7 @@
float: left;
color: #666;
text-shadow: 0 1px #fff;
- -webkit-background-clip: padding-box;
+ -webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 5px;
@@ -541,9 +541,11 @@
/********** Search **********/
-form#search-container {
+#search-container {
+ position: relative;
+ z-index: 999;
float: right;
- margin: 7px 14px 0 0;
+ margin: 7px 14px 0 -4px;
}
#search::-webkit-input-placeholder { color: #777; font-weight: 500; }
@@ -558,7 +560,7 @@
border-radius: 20px;
border: 1px solid #515151;
border-top-color: #4b4b4b;
- padding: 5px 12px 5px 26px;
+ padding: 4px 12px 4px 23px;
font-weight: 500;
width: 130px;
text-shadow: 0 1px rgba(255, 255, 255, .2);
@@ -576,7 +578,11 @@
#search:focus {
width: 200px;
+ border: 1px solid #515151;
+ border-top-color: #4b4b4b;
+ font-weight: 500;
color: #444;
+ text-shadow: 0 1px rgba(255, 255, 255, .2);
background: #f7f7f7;
background: rgba(255, 255, 255, .95);
-webkit-transition: width .3s ease, background-color .3s ease, color .3s ease;
@@ -587,11 +593,94 @@
}
#search-icon {
+ position: absolute;
+ background: url('../../assets/images/sprite.png') no-repeat -227px -102px;
+ width: 26px;
+ height: 26px;
+}
+
+/********** Search Results **********/
+
+#search-results {
display: block;
position: absolute;
- background: url('../../assets/images/sprite.png') no-repeat -225px -102px;
- width: 26px;
- height: 26px;
+ width: 245px;
+ margin: 0 0 0 -5px;
+ -webkit-background-clip: padding;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ border: 1px solid;
+ border-color: #dadada;
+ border-color: rgba(0, 0, 0, .15);
+ box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
+}
+
+#search-results:before {
+ content: '';
+ position: absolute;
+ top: -7px;
+ left: 9px;
+ height: 7px;
+ width: 18px;
+ background: url('../images/sprite.png') -264px -231px no-repeat;
+}
+
+#search-results li {
+ background: #fff;
+ text-shadow: 0 1px #fff;
+ color: #555;
+ border-bottom: 1px solid #ededed;
+}
+
+#search-results li:last-child { border-bottom: 0; }
+
+#search-results li#none { padding: 10px 14px; text-align: center; }
+#search-results li#none:hover { background: #fff; }
+#search-results li#more a, #search-results li#none { color: #555; font-weight: 500; }
+
+#search-results a {
+ display: block;
+ padding: 10px 14px;
+}
+
+#search-results h4 {
+ font-weight: 500;
+ line-height: 1.2em;
+ padding-bottom: 5px;
+}
+
+#search-results p { line-height: 1.3em; }
+#search-results li a h4, #search-results li#more a { color: #333; }
+#search-results li a p { color: #777; }
+
+#search-results li:hover {
+ background: #f9f9f9;
+ background-image: linear-gradient(top, #fdfdfd 0%, #f9f9f9 100%);
+ background-image: -o-linear-gradient(top, #fdfdfd 0%, #f9f9f9 100%);
+ background-image: -moz-linear-gradient(top, #fdfdfd 0%, #f9f9f9 100%);
+ background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #f9f9f9 100%);
+ background-image: -ms-linear-gradient(top, #fdfdfd 0%, #f9f9f9 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #f9f9f9));
+}
+
+#search-results li:first-child {
+ -webkit-border-radius: 5px 5px 0 0;
+ -moz-border-radius: 5px 5px 0 0;
+ border-radius: 5px 5px 0 0;
+}
+#search-results li:last-child {
+ -webkit-border-radius: 0 0 5px 5px;
+ -moz-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+
+#search-results li:first-child:last-child {
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
}
/********** Footer **********/
diff -r c53f7b3931fb -r 1cd2d492a40c help/index.php
--- a/help/index.php Wed Feb 22 05:48:09 2012 +0000
+++ b/help/index.php Sat Feb 25 19:58:59 2012 +0000
@@ -35,9 +35,10 @@
<div class="heading">
<div class="container">
<h1>Help</h1>
- <form id="search-container">
+ <form id="search-container" action="http://www.google.com/search" method="get">
<span id="search-icon"></span>
- <input type="text" id="search" placeholder="Search..">
+ <input id="search" type="input" name="q" autocomplete="off" placeholder="Search..">
+ <input type="hidden" name="sitesearch" value="adium.im/help">
</form>
<nav class="sub">
<ul>
More information about the commits
mailing list