mirror of
https://github.com/Damillora/Yuika
synced 2024-12-25 05:33:45 +00:00
feat: update layout and shian
This commit is contained in:
parent
bba5343206
commit
e91ae92096
@ -5,10 +5,6 @@ function toggleMenu() {
|
||||
}
|
||||
|
||||
document.querySelector("#menushow").addEventListener("click", toggleMenu);
|
||||
document.querySelectorAll(".menu__nav-item").forEach(menu =>
|
||||
menu.addEventListener("click", toggleMenu)
|
||||
);
|
||||
document.getElementById("darkMode").addEventListener("click", toggleMenu);
|
||||
|
||||
var nav = document.querySelector('.site-header');
|
||||
var feed = document.querySelector('main');
|
||||
|
@ -6,15 +6,19 @@ async function searchPosts(query) {
|
||||
|
||||
var data = await fetch(apiEndpoint + queryString + query + pageString + page)
|
||||
var search = await data.json();
|
||||
var result = search.result.map(x => {
|
||||
return `
|
||||
var result = "";
|
||||
if (search.result) {
|
||||
result = search.result.map(x => {
|
||||
return `
|
||||
<div class="menu__search-result">
|
||||
<a href="${x.url}"><h2 class="menu__search-title">${x.title}</h2></a>
|
||||
<p class="menu__search-desc">${x.excerpt}</p>
|
||||
</div>
|
||||
`;
|
||||
}).join("");
|
||||
}).join("");
|
||||
}
|
||||
|
||||
document.getElementById("search-count").innerHTML = search.total + " results found";
|
||||
document.getElementById("search-results").innerHTML = result;
|
||||
}
|
||||
|
||||
@ -24,11 +28,14 @@ if (window.yurikoSearchEndpoint != undefined) {
|
||||
el.addEventListener("input", function (e) {
|
||||
var val = el.value;
|
||||
if (val !== "") {
|
||||
document.getElementById("nav-menu").classList.add("menu__item--hidden")
|
||||
document.getElementById("site-header").classList.add("search-enabled")
|
||||
document.getElementById("nav").classList.add("hidden")
|
||||
searchPosts(val);
|
||||
} else {
|
||||
document.getElementById("nav-menu").classList.remove("menu__item--hidden")
|
||||
document.getElementById("site-header").classList.remove("search-enabled")
|
||||
document.getElementById("nav").classList.remove("hidden")
|
||||
|
||||
document.getElementById("search-count").innerHTML = ``;
|
||||
document.getElementById("search-results").innerHTML = ``;
|
||||
}
|
||||
});
|
||||
|
@ -37,7 +37,7 @@ function js() {
|
||||
.pipe(livereload());
|
||||
}
|
||||
|
||||
const cssWatcher = () => watch('assets/css/**', css);
|
||||
const cssWatcher = () => watch(['assets/css/**','node_modules/@damillora/shian/dist/**'], css);
|
||||
const jsWatcher = () => watch('assets/js/**.js', js);
|
||||
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
|
||||
const watcher = parallel(cssWatcher, hbsWatcher, jsWatcher);
|
||||
|
@ -1,22 +1,21 @@
|
||||
<div class="menu">
|
||||
<div id="nav-menu">
|
||||
{{#foreach navigation}}
|
||||
<div class="menu__item menu__nav-item">
|
||||
<a href={{url absolute="true" }}>
|
||||
<p class="menu__text">{{label}}</p>
|
||||
</a>
|
||||
<div class="menu__nav">
|
||||
<div class="menu__nav-main" id="nav">
|
||||
{{#foreach navigation}}
|
||||
<div class="menu__item menu__nav-item">
|
||||
<a href={{url absolute="true" }}>
|
||||
<p class="menu__text">{{label}}</p>
|
||||
</a>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
<div class="menu__item menu--dark-mode" id="darkMode">
|
||||
<i class="menu__icon material-icons md-24">brightness_low</i>
|
||||
<p class="menu__text">Dark Mode</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
<div class="menu__item" id="darkMode">
|
||||
<i class="menu__icon material-icons md-24">brightness_low</i>
|
||||
<p class="menu__text">Dark Mode</p>
|
||||
<div class="menu__item menu--permanent-icon" id="search">
|
||||
<i class="menu__icon material-icons md-24">search</i>
|
||||
<input type="text" id="search-query" class="menu__search-input"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu__item" id="search">
|
||||
<i class="menu__icon material-icons md-24">search</i>
|
||||
<input type="text" id="search-query" class="menu__search-input"></input>
|
||||
</div>
|
||||
<div id="search-results" class="menu__search-results">
|
||||
|
||||
</div>
|
||||
</div>
|
@ -7,12 +7,12 @@
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<a class="post-card__tag-info" href="{{url}}">
|
||||
<span class="post-card__tag-name">{{name}}</span>
|
||||
{{#if accent_color}}
|
||||
<span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="post-card__tag-color"></span>
|
||||
{{/if}}
|
||||
<span class="post-card__tag-name">{{name}}</span>
|
||||
</a>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
|
@ -2,12 +2,12 @@
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}">
|
||||
<span class="tag__name--post-header">{{name}}</span>
|
||||
{{#if accent_color}}
|
||||
<span class="tag__color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag__color"></span>
|
||||
{{/if}}
|
||||
<span class="tag__name--post-header">{{name}}</span>
|
||||
</a>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
|
@ -1,5 +1,5 @@
|
||||
{{> "site-background"}}
|
||||
<div class="site-header">
|
||||
<div class="site-header" id="site-header">
|
||||
<div class="site-header__background responsive-site-header-img">
|
||||
</div>
|
||||
<div class="site-header__inner">
|
||||
@ -15,5 +15,11 @@
|
||||
</div>
|
||||
{{navigation}}
|
||||
</header>
|
||||
<div class="menu__item menu__nav-item">
|
||||
<p id="search-count" class="menu__text"></p>
|
||||
</div>
|
||||
<div id="search-results" class="menu__search-results">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
6
tag.hbs
6
tag.hbs
@ -9,14 +9,14 @@
|
||||
<span class="post-header__tag-name">Tag</span>
|
||||
</p>
|
||||
<div class="post-header__heading post-header__heading--tag">
|
||||
<h1 class="post-header__heading--tag-text">
|
||||
{{name}}
|
||||
</h1>
|
||||
{{#if accent_color}}
|
||||
<span class="post-header__heading--tag-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="post-header__heading--tag-color"></span>
|
||||
{{/if}}
|
||||
<h1 class="post-header__heading--tag-text">
|
||||
{{name}}
|
||||
</h1>
|
||||
</div>
|
||||
<p class="page-header__text">{{description}}</p>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user