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 });

13
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}
-
<form id="search-form" method="GET" target="_self" action="/search">
<input type="text" id="search" name="query" placeholder="Search">
<input type="submit" value="Search">
</form>
</nav> </nav>
<form method="GET" target="_self" action="/search">
<input type="text" id="search" name="query" placeholder="Search">
<input type="submit" value="Search">
</form>
</header> </header>
` `
} }

104
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 {
@ -61,9 +66,9 @@ body {
#video-list { #video-list {
padding: 0; padding: 0;
list-style: none; list-style: none;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
} }
#video-player { #video-player {
@ -71,79 +76,60 @@ 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); border: 1px solid black;
box-shadow: var(--shadow);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.video-item { .video-item {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
} }
.video-item .video-image { .video-item .video-image {
border-radius: 0.25rem; position: relative;
position: relative; width: 200px;
width: 200px; height: 113px;
height: 113px; overflow: hidden;
overflow: hidden; background-color: black;
background-color: black;
} }
.video-item .video-image img { .video-item .video-image img {
position: absolute; position: absolute;
inset: 0; inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-item .shadow { .video-item .shadow {
object-fit: cover; object-fit: cover;
filter: blur(0.25rem) brightness(50%); filter: blur(0.25rem) brightness(50%);
} }
.video-item .non-shadow { .video-item .non-shadow {
object-fit: contain; object-fit: contain;
} }
.video-item .video-info { .video-item .video-info {
padding-block: 0.5em; padding-block: 0.5em;
} }
.video-item a { .video-item a {
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
} }
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;
} }