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 ?
`, search, end, start);
console.log(videos);
const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos");
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 = `
<header>
<a href="/">
<h1 id="app-name">MaoTube</h1>
</a>
<h1 id="app-name">MaoTube</h1>
<nav>
${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>
<form method="GET" target="_self" action="/search">
<input type="text" id="search" name="query" placeholder="Search">
<input type="submit" value="Search">
</form>
</header>
`
}

104
public/style.css
View File

@ -1,25 +1,30 @@
*, *::before, *::after {
box-sizing: border-box;
appearance: none;
}
:root {
color-scheme: light dark;
--shadow: 0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.125);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow: 0 0.25rem 0.5rem 0.25rem rgba(0, 0, 0, 0.125);
}
--red: #c51e0e;
}
body {
margin: 0 auto;
padding: 0;
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 {
@ -61,9 +66,9 @@ body {
#video-list {
padding: 0;
list-style: none;
width: 100%;
max-width: 800px;
margin: auto;
width: 100%;
max-width: 800px;
margin: auto;
}
#video-player {
@ -71,79 +76,60 @@ body {
}
.video-item {
padding: 0.5rem;
border-radius: 0.25rem;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 2rem;
text-align: left;
background-color: rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow);
padding: 0.5rem;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 2rem;
text-align: left;
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid black;
}
@media (prefers-color-scheme: dark) {
.video-item {
background-color: rgba(0, 0, 0, 0.3);
}
.video-item {
background-color: rgba(0, 0, 0, 0.3);
}
}
.video-item .video-image {
border-radius: 0.25rem;
position: relative;
width: 200px;
height: 113px;
overflow: hidden;
background-color: black;
position: relative;
width: 200px;
height: 113px;
overflow: hidden;
background-color: black;
}
.video-item .video-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.video-item .shadow {
object-fit: cover;
filter: blur(0.25rem) brightness(50%);
object-fit: cover;
filter: blur(0.25rem) brightness(50%);
}
.video-item .non-shadow {
object-fit: contain;
object-fit: contain;
}
.video-item .video-info {
padding-block: 0.5em;
padding-block: 0.5em;
}
.video-item a {
font-size: 1.4em;
font-weight: bold;
font-size: 1.4em;
font-weight: bold;
}
a {
color: #c51e0e;
color: var(--red);
}
a:visited {
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;
color: #FF5722;
}