ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fixed sidebar on emulator.html and fixed UI bugs on imageboards

Browse Source
This commit is contained in:
lenafx
2025-11-25 21:04:20 +01:00
parent ccda892d18
commit 065220ff29
2 changed files with 66 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
views/emulator.html
View File

@@ -12,14 +12,29 @@
<body> <body>
<aside class="sidebar"> <aside class="sidebar">
<a href="index.html" class="nav-button" title="Image Boards"> ... </a> <a href="index.html" class="nav-button" title="Image Boards">
<button class="nav-button active" title="Emulator"> ... </button> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<button class="nav-button" title="Reset" onclick="window.location.reload()"> ... </button> <rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span>Back To Home</span>
</a>
<button class="nav-button active" title="Emulator">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
<span>Emulator</span>
</button>
<button class="nav-button" title="Reset" onclick="window.location.reload()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<span>Reset</span>
</button>
</aside> </aside>
<div class="main-wrapper"> <div class="main-wrapper">
<header class="top-header"> <header class="top-header">
<button id="hamburger-btn" class="hamburger">Menu</button> <button id="hamburger-btn" class="hamburger">☰</button>
<h3>Extension Emulator</h3> <h3>Extension Emulator</h3>
</header> </header>
@@ -68,7 +83,7 @@
</div> </div>
</div> </div>
<div style="display: flex; flex-direction: column; flex: 1; overflow:Emulator hidden; position: relative;"> <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
<div class="tabs"> <div class="tabs">
<button class="tab-btn active" onclick="switchTab('visual')">Visual</button> <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
<button class="tab-btn" onclick="switchTab('json')">JSON</button> <button class="tab-btn" onclick="switchTab('json')">JSON</button>

64
views/styles/home.css
View File

@@ -306,7 +306,6 @@ a:active {
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: var(--bg-surface);
break-inside: avoid; break-inside: avoid;
transition: transform 0.2s; transition: transform 0.2s;
cursor: zoom-in; cursor: zoom-in;
@@ -333,21 +332,38 @@ a:active {
min-height: unset; min-height: unset;
} }
.image-entry::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 1;
border-radius: var(--radius-md);
}
.image-buttons { .image-buttons {
position: absolute; position: absolute;
bottom: 0; bottom: 0.75rem;
left: 0; right: 0.75rem;
width: 100%; left: auto;
padding: 2rem 1rem 1rem 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
display: flex; display: flex;
justify-content: flex-end;
gap: 0.5rem; gap: 0.5rem;
z-index: 2;
opacity: 0; opacity: 0;
transition: 0.2s; transition: opacity 0.25s ease;
top: auto; pointer-events: none;
right: auto; }
flex-direction: row;
.image-buttons button {
pointer-events: all;
}
.image-entry:hover::before,
.image-entry:hover .image-buttons {
opacity: 1;
} }
.image-entry:hover .image-buttons { .image-entry:hover .image-buttons {
@@ -720,7 +736,7 @@ input[type="radio"] {
.gallery-masonry { .gallery-masonry {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.75rem; gap: 0.85rem;
} }
.image-entry:not([data-type="book"]):hover { .image-entry:not([data-type="book"]):hover {
@@ -728,18 +744,30 @@ input[type="radio"] {
} }
.image-buttons { .image-buttons {
opacity: 0.8; opacity: 1 !important;
padding: 1.5rem 0.75rem 0.75rem 0.75rem; bottom: 8%;
right: 10px;
left: 10px;
justify-content: flex-end;
gap: 10px;
pointer-events: all;
} }
.image-buttons button { .image-buttons button {
width: 36px; width: 44px;
height: 36px; height: 44px;
background: rgba(0, 0, 0, 0.7);
border-width: 2px;
} }
.image-buttons button svg { .image-buttons button svg {
width: 18px; width: 20px;
height: 18px; height: 20px;
}
.image-buttons button:active {
transform: scale(0.95);
background: var(--accent);
} }
#source-list { #source-list {