sfja.skp/maotube
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify design

Browse Source
This commit is contained in:
Reimar 2024-02-11 00:54:43 +01:00
parent 8a54b3168a
commit 52e07b54dc
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
3 changed files with 51 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.js
View File

@ -116,8 +116,6 @@ app.get("/api/search", async (req, res) => {
OFFSET ? OFFSET ?
`, search, end, start); `, search, end, start);
console.log(videos);
const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos"); const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos");
return res.status(200).json({ ok: true, videos, total }); return res.status(200).json({ ok: true, videos, total });

7
public/header.js
View File

@ -30,16 +30,15 @@ function displayHeader() {
document.querySelector("h1").outerHTML = ` document.querySelector("h1").outerHTML = `
<header> <header>
<a href="/">
<h1 id="app-name">MaoTube</h1> <h1 id="app-name">MaoTube</h1>
</a>
<nav> <nav>
${links} ${links}
</nav> -
<form method="GET" target="_self" action="/search"> <form id="search-form" method="GET" target="_self" action="/search">
<input type="text" id="search" name="query" placeholder="Search"> <input type="text" id="search" name="query" placeholder="Search">
<input type="submit" value="Search"> <input type="submit" value="Search">
</form> </form>
</nav>
</header> </header>
` `
} }

46
public/style.css
View File

@ -1,25 +1,30 @@
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
appearance: none;
} }
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--shadow: 0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.125); --red: #c51e0e;
}
@media (prefers-color-scheme: dark) {
:root {
--shadow: 0 0.25rem 0.5rem 0.25rem rgba(0, 0, 0, 0.125);
}
} }
body { body {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
text-align: center; text-align: center;
font-family: system-ui, sans-serif; }
nav {
margin-bottom: 20px;
}
input::file-selector-button {
appearance: none;
}
#search-form {
display: inline-block;
} }
.mao-error { .mao-error {
@ -72,14 +77,13 @@ body {
.video-item { .video-item {
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.25rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
gap: 2rem; gap: 2rem;
text-align: left; text-align: left;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow); border: 1px solid black;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -89,7 +93,6 @@ body {
} }
.video-item .video-image { .video-item .video-image {
border-radius: 0.25rem;
position: relative; position: relative;
width: 200px; width: 200px;
height: 113px; height: 113px;
@ -124,26 +127,9 @@ body {
} }
a { a {
color: #c51e0e; color: var(--red);
} }
a:visited { a:visited {
color: #FF5722; color: #FF5722;
} }
header {
display: flex;
align-items: center;
gap: 30px;
padding: 20px;
box-shadow: var(--shadow);
}
header a {
text-decoration: none;
}
#app-name {
padding-right: 20px;
margin: 0;
}