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 {
|
||||
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;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
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 (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) {
|
||||
#search input:focus {
|
||||
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 class="card">
|
||||
<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>
|
||||
</div>
|
||||
<div class="spacer">
|
||||
<p>Lorem ipsum</p>
|
||||
<p class="button">read more</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="assets/js/search.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue