mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
dev21w42
This commit is contained in:
parent
94007b1f5d
commit
b8960d61ad
4 changed files with 133 additions and 3 deletions
|
|
@ -61,15 +61,71 @@ header h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
padding: var(--padding);
|
--padding-multiplier: 1.2;
|
||||||
|
flex: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: calc(var(--padding) * var(--padding-multiplier));
|
||||||
|
padding: calc(var(--padding) * var(--padding-multiplier));
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: solid 1px var(--swatch-contrast);
|
border: solid 1px var(--swatch-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card > div {
|
||||||
|
--icon-size: 40px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--icon-size) 1fr;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
gap: calc(var(--padding) * var(--padding-multiplier));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > div *:not(p) {
|
||||||
|
width: var(--icon-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > div p {
|
||||||
|
font-size: clamp(16px,1vw,20px);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: var(--padding);
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--swatch-contrast);
|
||||||
|
color: var(--swatch-background);
|
||||||
|
box-shadow: inset 0 0 0 2px var(--swatch-contrast);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* -- Media Queries -- */
|
/* -- Media Queries -- */
|
||||||
|
|
||||||
|
@media (max-width: 300px) {
|
||||||
|
.card > div {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > div *:not(p) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.button:hover {
|
||||||
|
background-color: rgba(var(--palette-contrast),0);
|
||||||
|
color: var(--swatch-contrast);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-color: rgba(var(--palette-contrast),.1);
|
||||||
|
color: var(--swatch-contrast);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (pointer: fine) {
|
@media (pointer: fine) {
|
||||||
#search input:focus {
|
#search input:focus {
|
||||||
outline: solid 5px rgba(var(--palette-contrast),.2);
|
outline: solid 5px rgba(var(--palette-contrast),.2);
|
||||||
|
|
|
||||||
40
public/assets/js/modules/Search.mjs
Normal file
40
public/assets/js/modules/Search.mjs
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
export default class Search {
|
||||||
|
constructor(input,results) {
|
||||||
|
const self = this;
|
||||||
|
|
||||||
|
this.endpoint = new URL("api/search",window.location.href);
|
||||||
|
|
||||||
|
this.lastQuery = "";
|
||||||
|
this.timeout = null;
|
||||||
|
|
||||||
|
this.results = {
|
||||||
|
element: results,
|
||||||
|
set content(html) {
|
||||||
|
this.results?.insertAdjacentHTML("beforeend",html);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
input?.addEventListener("keydown",event => this.keyEvent(event)) ?? false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async search(query) {
|
||||||
|
const url = new URL(this.endpoint);
|
||||||
|
url.searchParams.set("q",query);
|
||||||
|
|
||||||
|
const timeout = setTimeout(() => this.showSpinner(),1000);
|
||||||
|
const api = await fetch(url);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
queue(query) {
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
this.timeout = setTimeout(() => this.search(query),500);
|
||||||
|
}
|
||||||
|
|
||||||
|
async keyEvent(event) {
|
||||||
|
if(event.target.value === this.lastQuery) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.queue(event.target.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
25
public/assets/js/search.js
Normal file
25
public/assets/js/search.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { default as Search } from "./modules/Search.mjs";
|
||||||
|
// import { default as Monkey } from "./modules/monkeydo/Monkeydo.mjs";
|
||||||
|
|
||||||
|
const searchField = document.getElementById("search");
|
||||||
|
const resultsContainer = document.getElementById("results");
|
||||||
|
|
||||||
|
const search = new Search(searchField,resultsContainer);
|
||||||
|
window.addEventListener("keydown",() => searchField.focus());
|
||||||
|
|
||||||
|
/* const monkey = new Monkey({
|
||||||
|
keyPress: (key) => searchField.dispatchEvent(new KeyboardEvent("keydown",{"key":key})),
|
||||||
|
log: (message) => console.log(message)
|
||||||
|
});
|
||||||
|
|
||||||
|
monkey.load(JSON.stringify({
|
||||||
|
tasks: [
|
||||||
|
[200,"log","hello friend"],
|
||||||
|
[200,"keyPress","h"],
|
||||||
|
[400,"keyPress","e"],
|
||||||
|
[100,"keyPress","l"],
|
||||||
|
[500,"keyPress","l"],
|
||||||
|
[700,"keyPress","o"]
|
||||||
|
]
|
||||||
|
})).then(() => monkey.do());
|
||||||
|
*/
|
||||||
|
|
@ -20,12 +20,21 @@
|
||||||
<div id="results">
|
<div id="results">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div>
|
<div>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.25 3.25 0 0 1 3 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z" fill="currentColor"/><path d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01z" fill="currentColor"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.25 3.25 0 0 1 3 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z" fill="currentColor"/><path d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01z" fill="currentColor"/></svg>
|
||||||
|
<p>github/​victorwesterlund.com</p>
|
||||||
|
</div>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p class="button">read more</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.25 3.25 0 0 1 3 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z" fill="currentColor"/><path d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01z" fill="currentColor"/></svg>
|
||||||
<p>github/victorwesterlund.com</p>
|
<p>github/victorwesterlund.com</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer">
|
|
||||||
<p>Lorem ipsum</p>
|
<p>Lorem ipsum</p>
|
||||||
|
<p class="button">read more</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script type="module" src="assets/js/search.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue