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