Přidáno google vyhledávání

parent 1ea0b30a
#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;
}
......@@ -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"
......@@ -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>
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment