introduce search interface

static/extra.css

@@ -0,0 +1,18 @@
+.input-group-rounded .input-group-field {
+  border-radius: 5000px 0 0 5000px;
+  padding-left: 1rem;
+}
+
+.input-group-rounded .input-group-button .button {
+  border-radius: 0 5000px 5000px 0;
+  font-size: 0.8rem;
+}
+
+.small-thumb img {
+    width:150px;
+    height:150px;
+}
+
+.media-object-section:first-child {
+    padding-right:2rem;
+}

static/init.js

@@ -0,0 +1,38 @@
+$(
+    function(){
+	console.log("init loaded")
+    })
+  $(function (){
+      document.getElementById('links').onclick = function(event) {
+  event = event || window.event
+  var target = event.target || event.srcElement,
+  link = target.src ? target.parentNode : target,
+  options = { index: link, event: event },
+  links = this.getElementsByTagName('a')
+  options['onslide']=function(index,slide) {
+     console.log(index)
+     console.log($(`#links a:nth-child(${index})`).attr('id'))
+     history.replaceState(null,null,'#'+$(`#links a:nth-child(${index+1})`).attr('id'))
+    }
+  options['onclose']=function(){
+      history.pushState(null,null,'#')
+  }
+  blueimp.gallery=blueimp.Gallery(links, options)
+ 
+
+  }
+    window.onpopstate = function(){
+        console.log(`popped state ${$(location).attr('hash')}`)
+        if($(location).attr('hash')=="") {
+            blueimp.gallery.close()
+        }else {
+        $($(location).attr('hash')).trigger('click');
+        }
+
+    }
+    console.log($(location).attr('hash').substr(1))
+    $($(location).attr('hash')).trigger('click');
+
+
+      
+  })

static/test.txt

@@ -0,0 +1,2 @@
+DS
+ADSADQWF