Ante S avatar Ante S committed da523ba

Making the search input a little more obvious

Comments (0)

Files changed (5)

pypysite/static/css/style.css

 /* sprites */
 
 #logo,
+#delimit-notice.icon,
 #main .external,
 #main .more,
 .subnav a {
   color: #ffe86a;
 }
 
-#delmit {
+#delimit {
   position: absolute;
   margin: -100px 0 0;
 }
 
 #delimit-input {
+  position: relative;
   width: 250px;
   padding: 10px 15px 10px 0;
   font-size: 18px;
   border-bottom: 1px solid #26d1ae;
   background-color: transparent;
   outline: 0;
+  z-index: 50;
 }
 
 #delimit-input::-webkit-input-placeholder {
 }
 
 #delimit-notice {
+  display: block;
   position: absolute;
   width: 80px;
-  margin: -87px 0 0 175px;
+  height: 22px;
+  margin: -30px 0 0 185px;
+  padding: 0;
   text-align: right;
   color: #999;
   background-color: transparent;
+  z-index: 40;
+}
+
+#delimit-notice.icon {
+  background-position: right -120px;
+}
+
+#delimit:hover #delimit-notice.icon {
+  background-position: right -160px;
 }
 
 #delimit-result {
Add a comment to this file

pypysite/static/images/sprites.png

Old
Old image
New
New image
Add a comment to this file

pypysite/static/images/sprites.psd

Old
Old image
New
New image

pypysite/static/js/script.js

 }
 
 
+// Sub/Tab navigation
 var subnav = {
   
     config: {
         list: 'ul.supported',
         result: '#delimit-result',
         // Data
-        dataurl: '/supported.json'
+        dataurl: '/supported.json',
+        found: []
     },
 
     init: function () {
         self.elems.header.delegate(self.config.search, 'keyup focus', function () {
             self.view($(this).attr('value'));
         });
+
+        self.elems.header.delegate(self.config.search, 'blur', function () {
+            if (self.found.length === 0) {
+                self.elems.notice.addClass('icon');
+            }
+        });
     },
 
     getdata: function () {
     lookup: function (query) {
         var self = this,
             data = self.datalist,
+            found = self.found = [],
             datalen = data.length,
-            found = [],
             i;
 
         for (i = 0; i < datalen; i += 1) {
             if (data[i][0].indexOf(query) >= 0) {
                 found.push([data[i][0], i]);
-            }  
+            }
         }
 
         return found;
             result,
             resultlen;
 
-        self.elems.notice.html('');
+        self.elems.notice.html('').removeClass('icon');
 
         if (querylen === 0) {
             if (!mouth.config.useropened) {
+                self.found = [];
                 mouth.close();
             }
 

pypysite/templates/compatibility/index.html

 
     <p>Search supported libraries</p>
 
-    <form id="delmit">
+    <form id="delimit">
         <fieldset>
             <input id="delimit-input" type="text" placeholder="Search" />
         </fieldset>
+
+        <code id="delimit-notice" class="icon"></code>
     </form>
-
-    <code id="delimit-notice" class="inline">&rarr;</code>
 {% endblock %}
 
 {% block feature %}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.