diff --git a/sass/search.scss b/sass/search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..77e1ee58e9f01f05165d56108087aee7b833a794
--- /dev/null
+++ b/sass/search.scss
@@ -0,0 +1,79 @@
+#search.hidden > div{
+}
+#search {
+ pointer-events: none;
+ color: black !important;
+ padding: 0;
+ position: absolute;
+
+ z-index: 1000;
+ width: 100%;
+ text-align: center;
+ overflow: hidden;
+ padding-bottom: 20px;
+ > div {
+ pointer-events: all;
+ display: inline-block;
+ width: 70.05vw;
+ max-width: 800px;
+ @media #{$medium-and-down} {
+ width: 95vw;
+ }
+ > div {
+ box-shadow: 0 3px 20px rgba(0,0,0,0.19), 0 6px 20px rgba(0,0,0,0.23);
+ }
+ }
+ box-sizing: initial;
+}
+#search > div > div {
+ transition: left .3s;
+ left: 0;
+ position: relative;
+}
+
+#search.hidden > div > div {
+ left: 85vw;
+ overflow: hidden;
+ @media #{$medium-and-down} {
+ left: 95vw;
+ }
+}
+
+#search {
+ ::-webkit-input-placeholder {
+ color: black;
+ opacity: .8;
+ }
+ :-moz-placeholder {
+ color: black;
+ opacity: .8;
+ }
+ ::-moz-placeholder {
+ color: black;
+ opacity: .8;
+ }
+ :-ms-input-placeholder {
+ color: black;
+ opacity: .8;
+ }
+ :placeholder-shown {
+ color: black;
+ opacity: .8;
+ }
+}
+#search-overlay {
+ opacity: 0;
+ background-color: rgba(0,0,0,.5);
+ z-index: 999;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 120vh;
+ transition: opacity .3s;
+ pointer-events: none;
+}
+#search-overlay.shown {
+ opacity: 1;
+ pointer-events: all;
+}
diff --git a/sass/style.scss b/sass/style.scss
index f7a6657f4941944147205b3021790e425fc1aba2..4aa6eac5a88fcd139fbb422a507422132eb51549 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -20,7 +20,7 @@ $link-color: color("light-blue", "darken-1");
text-align:justify;
margin: 10px 0;
background-color: white;
- box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.article h5 {
@@ -50,8 +50,19 @@ footer.page-footer {
min-height: 100vh;
}
#content {
+ width: 86%;
+ /*margin-left: 7%;
+ margin-right: 7%;
+ @media #{$medium-and-down} {
+ margin-left: 5%;
+ margin-right: 5%;
+ width: 90%;
+ }*/
+}
+#content, #search {
margin-bottom: 90px;
margin-top: 104px;
+
}
html, body {
min-height: 100vh;
@@ -153,3 +164,5 @@ h2#title {
.author {
margin-bottom: 1rem;
}
+
+@import "search.scss"
diff --git a/templates/partials/header.html.nunjucks b/templates/partials/header.html.nunjucks
index 9a27af8efa5f100038edebbf9a80e35080183e15..8a535afc8fbc14adaf912ecb9bed27d94933024c 100644
--- a/templates/partials/header.html.nunjucks
+++ b/templates/partials/header.html.nunjucks
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>{% if metadata.title %}{{ metadata.title }}{%else%}Radioklub OK1KVK{%endif%}</title>
+ <link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="{{ config.baseurl }}/theme/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="{{ config.baseurl }}/theme/js/jquery-1.12.0.min.js"></script>
@@ -29,7 +30,7 @@
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="{{ config.baseurl }}/theme/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="{{ config.baseurl }}/theme/favicons/browserconfig.xml">
- <meta name="theme-color" content="#006ca2">
+ <meta name="theme-color" content="#0288D1">
{% if config.devel %}
<script src="{{ config.baseurl }}/theme/js/socket.io-1.4.5.js"></script>
{% endif %}
@@ -55,17 +56,12 @@
<a href="{{ config.baseurl }}/tag/clanek">Články</a>
</div>
<!-- TODO: rolovat -->
- <div class="input-field left">
- <input id="search" type="search" required placeholder="VyhledávánÃ">
- <label for="search" style="height: 100%">
- <svg style="width:2rem;height:2rem; margin-top: -1rem; position: absolute; top: 50%" viewBox="0 0 24 24">
- <path fill="#fff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
- </svg>
- </label>
+ <div class="search-icon left" style="padding-top: .5rem">
+ <svg style="width:2rem;height:2rem;" viewBox="0 0 24 24">
+ <path fill="#fff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+ </svg>
</div>
</div>
-
-
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
@@ -115,4 +111,6 @@
</ul>
</div>
</nav>
+ {% include "partials/search" %}
<div id=content class=container>
+
diff --git a/templates/partials/search.html.nunjucks b/templates/partials/search.html.nunjucks
new file mode 100644
index 0000000000000000000000000000000000000000..4f7e1c15930ac1335a0b6db0a7832f48efc22e2c
--- /dev/null
+++ b/templates/partials/search.html.nunjucks
@@ -0,0 +1,95 @@
+<div class="hidden" id="search">
+ <div><div><div><div style="background-color: white">
+ <div id="searchbox" style="padding: 0 10px;">
+ <form>
+ <input style="padding: 0 10px; margin: 0 -10px; width:100%;" placeholder="Vyhledávejte psanÃm...">
+ <form>
+ </div>
+ <div id="searchresults"></div>
+ </div></div></div></div>
+</div>
+<div id="search-overlay" style="display:none"></div>
+<script>
+ var myCallback = function() {
+ var doRender = function() {
+ google.search.cse.element.render({
+ div: "searchresults",
+ tag: 'searchresults-only',
+ gname: 'searchresults'
+ });
+ var s = $("#searchbox input").val()
+ if(s != "")
+ google.search.cse.element.getElement('searchresults').execute(s);
+ }
+ if (document.readyState == 'complete') {
+ doRender();
+ } else {
+ google.setOnLoadCallback(doRender, true);
+ }
+ };
+
+ window.__gcse = {
+ parsetags: 'explicit',
+ callback: myCallback
+ };
+
+ (function() {
+ var cx = '003089460452505374651:q5prtsadbio';
+ var gcse = document.createElement('script'); gcse.type = 'text/javascript';
+ gcse.async = true;
+ gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
+ })();
+
+ $("#searchbox form").submit(function(e) {
+ e.preventDefault();
+ });
+
+ $("#searchbox form").on("input", function(e) {
+ var s = $("#searchbox input").val()
+ if(s == "") {
+ $("#searchresults").html("");
+ myCallback();
+ } else
+ google.search.cse.element.getElement('searchresults').execute(s);
+ });
+
+ (function() {
+ var searchHeight = $('#search').height();
+ var adjustHeight = function() {
+ console.log("adjH");
+ var newh = $('#search').height();
+ if(newh != searchHeight) {
+ searchHeight = newh;
+ $("#all").height("auto");
+ if(!$("#search").hasClass("hidden") && $("#all").height() < searchHeight+20+194) {
+ $("#all").height(searchHeight+20+194);
+ }
+ }
+ }
+ $("#search").bind('DOMSubtreeModified', adjustHeight);
+
+ $(".search-icon").on("click", function() {
+ var doer = function() {
+ $("#search").removeClass("hidden");
+ $("body").append('');
+ $("#search-overlay").show().addClass("shown");
+ adjustHeight();
+ setTimeout(function() {
+ $("#searchbox input").focus();
+ }, 320);
+ };
+ if(window.requestAnimationFrame)
+ window.requestAnimationFrame(doer);
+ else
+ doer();
+ });
+ })();
+ $("#search-overlay").click(function() {
+ $("#search-overlay").removeClass("shown");
+ $("#search").addClass("hidden");
+ setTimeout(function() {
+ adjustHeight();
+ },320);
+ });
+</script>