This commit is contained in:
vosaul 2020-06-19 21:35:01 +03:00
Родитель 4fad70c9ec
Коммит fd5dc073eb
2 изменённых файлов: 109 добавлений и 28 удалений

Просмотреть файл

@ -51,7 +51,7 @@ var idx = lunr(function () {
function lunr_search(term) {
document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
if(term) {
document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" +
document.getElementById('lunrsearchresults').innerHTML = "<h3 class='search_title'>Search results for '" + term + "'</h3>" +
"<div id='search_closer' onclick='search_close()'>\
<img src='/assets/images/times.png' alt='closer'>\
</div>"
@ -74,9 +74,9 @@ function lunr_search(term) {
<a href='" + url + "'>\
<div class='page_title'>\
<h3 class='title'>" + title + "</h3>\
<p class='url'>"+ url +"</p>\
<span class='url'>"+ url +"</span>\
</div>\
<p class='body'>"+ body +"</p>\
<span class='body'>"+ body +"</span>\
</a>\
</li>";
}
@ -94,7 +94,7 @@ function lunr_search(term) {
</script>
<form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
<p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></p>
<h3><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></h3>
</form>
<div id="lunrsearchresults" class="lunrsearchresults hidden">
<ul></ul>

Просмотреть файл

@ -43,7 +43,7 @@ li {
position: sticky;
top: 0;
z-index: 1000;
min-height: 80px;
.toggle_mnu {
background: transparent;
border: 0;
@ -107,9 +107,7 @@ li {
}
.home_intro {
padding-top: 30px;
display: grid;
gap: 2em;
align-items: start;
.text_box {
h2 {
@ -132,7 +130,7 @@ li {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
width: 90%;
}
.page-content {
@ -142,7 +140,7 @@ li {
.content {
grid-area: c;
margin: 0 auto;
padding: 30px;
padding: 20px;
.content_grid {
display: flex;
flex-wrap: wrap;
@ -305,6 +303,7 @@ li {
vertical-align: middle;
}
}
/* Document style */
.doc_page {
.docs {
@ -317,9 +316,7 @@ li {
.intro_wrapper {
grid-area: top;
padding: 20px;
background: $background-color;
color: $text-color;
/* grid-area: c; */
color: $background-color;
}
.sidebar_left {
grid-area: bottom;
@ -403,6 +400,70 @@ li {
}
}
}
/* search block */
.search {
position: fixed;
top: 44px;
position: fixed;
z-index: 1001;
}
.lunrsearchresults {
box-sizing: border-box;
position: fixed;
width: 96%;
left: 2%;
top: 80px;
border: 1px solid #828282;
box-shadow: inset 1px 1px 34px 9px rgba(0, 0, 0, 0.1);
border-radius: 7px;
background: lighten($brand-color, 90%);
color: $text-color;
padding: 20px;
max-height: 70vh;
overflow-y: auto;
.lunrsearchresult a {
display: grid;
grid-template-columns: 1fr;
}
#search_closer {
width: 20px;
height: auto;
cursor: pointer;
z-index: 9999;
}
ul {
li {
padding: 10px;
}
list-style-type: none;
margin-left: 0;
.page_title {
border-right: 1px solid $grey-color-light;
}
}
}
.search h3 {
color: $brand-color;
}
.lunrsearchresult .url {
color: $sidebar-color;
}
.lunrsearchresult a {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
color: $grey-color-dark;
}
.lunrsearchresult a:hover,
.lunrsearchresult a:focus {
text-decoration: none;
}
.lunrsearchresult a:hover .title {
text-decoration: underline;
}
/* tags filters */
.tag_filter {
@ -451,8 +512,22 @@ li {
padding: 20px;
}
.intro {
padding: 30px;
display: grid;
gap: 20px;
grid-template-columns: 2fr 1fr;
grid-template-areas: "a b";
.image_box {
grid-area: b;
img {
width: 100%;
}
}
.text_box {
grid-area: a;
align-self: center;
}
}
.home_intro {
h1 {
font-size: 56px;
@ -485,39 +560,41 @@ li {
@media screen and (min-width: 1024px) {
.lunrsearchresults {
border: 1px solid;
border: 1px solid $grey-color;
box-shadow: inset 1px 1px 34px 9px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 0.2rem;
display: grid;
grid-template-columns: 1fr 50px;
background: $background-color;
background: lighten($brand-color, 90%);
color: $text-color;
padding: 20px;
max-height: 70vh;
overflow-y: auto;
#search_closer {
width: 20px;
height: auto;
cursor: pointer;
z-index: 9999;
}
ul {
li {
padding: 10px;
}
list-style-type: none;
margin-left: 0;
.page_title {
border-right: 1px solid;
border-right: 1px solid $grey-color-light;
}
}
}
.lunrsearchresult .title {
.search h3 {
color: $brand-color;
}
.lunrsearchresult .url {
color: silver;
}
.lunrsearchresults
.lunrsearchresult a {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 20px;
color: #777;
gap: 20px;
}
.lunrsearchresult a:hover,
.lunrsearchresult a:focus {
@ -529,10 +606,8 @@ li {
.search {
left: 360px;
top: 15px;
top: 13px;
padding-right: 50px;
position: fixed;
z-index: 1001;
}
.hidden {
@ -554,7 +629,7 @@ li {
.docs_content {
grid-area: d;
max-width: 1000px;
padding: 40px;
padding-right: 40px;
}
.intro_wrapper {
grid-area: c;
@ -596,7 +671,6 @@ li {
}
.intro {
max-width: 1000px;
padding: 5vw 40px 30px;
display: grid;
gap: 40px;
grid-template-columns: 2fr 1fr;
@ -620,6 +694,13 @@ li {
}
}
@media screen and (min-width: 1440px) {
.search {
top: 22px;
}
.lunrsearchresults {
width: 60%;
left: 20%;
}
.content .content_grid .content_item {
width: 27%;
margin: 10px;