Search function

4 files changed, 59 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
index da928b4..5b232b3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -170,6 +170,39 @@ ul.arrow {
     color: #000000;
 }
 
+li.search {
+    display: block;
+    float: left;
+    cursor: pointer;
+    position: relative;
+}
+
+img.search {
+    padding: 9px 10px;
+}
+
+form.search {
+    position: relative;
+}
+
+input.search {
+    position: absolute;
+    top: -10px;
+    left: -30px;
+    width: 80px;
+    overflow: hidden;
+}
+
+input.search-submit {
+    position: absolute;
+    top: -20px;
+    z-index: -1;
+    color: transparent;
+    border: none;
+    outline: none;
+    opacity: 0;
+}
+
 /** LOGO */
 
 #logo {
diff --git a/static/images/lupe.png b/static/images/lupe.png
new file mode 100644
index 0000000..55a6e2f
--- /dev/null
+++ b/static/images/lupe.png
diff --git a/static/js/kosten.js b/static/js/kosten.js
index 41bf30f..e2fa06a 100644
--- a/static/js/kosten.js
+++ b/static/js/kosten.js
@@ -24,6 +24,20 @@
       }
     });
   };
+  $(function(){
+    $('form.search').hide();
+    $('li.search').click(function(){
+      var x$;
+      x$ = $('form.search');
+      x$.toggle();
+      if (x$.is(':visible')) {
+        $('input.search').focus();
+      }
+    });
+    $('input.search').focusout(function(){
+      $('form.search').hide();
+    });
+  });
   out$.addJS = addJS = jq(function(){
     $('input[name=date]').datepicker({
       dateFormat: 'dd.mm.yy',
diff --git a/static/js/kosten.ls b/static/js/kosten.ls
index 5362fb3..e3a60d2 100644
--- a/static/js/kosten.ls
+++ b/static/js/kosten.ls
@@ -20,6 +20,18 @@ set-lang = !->
             range-selector-to: \bis
             range-selector-zoom: null
 
+# The Search Stuff
+$ !->
+    $ \form.search .hide!
+
+    $ \li.search .click !->
+        $ \form.search
+            ..toggle!
+            $ \input.search .focus! if .. .is \:visible
+
+    $ \input.search .focusout !->
+        $ \form.search .hide!
+
 # Add
 export addJS = jq !->
     $ 'input[name=date]' .datepicker do