yusur/vigil
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add search, improve SLayout

Browse source
This commit is contained in:
Yusur 2025-10-21 12:07:49 +02:00
parent ddb07a651e
commit 1dc5768640
11 changed files with 153 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/lib/SLayout.svelte
View file

@ -2,18 +2,21 @@
import { RiInformationLine, RiMenu3Line, RiShieldLine } from "svelte-remixicon";
let { children, title, left, right } = $props();
let mobiLeftActive = $state(false);
let mobiRightActive = $state(false);
</script>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="layout">
<div class="layout-title">{title}</div>
<div class="layout-left">{@render left()}</div>
<div class="layout-left" class:active={mobiLeftActive}>{@render left()}</div>
<div class="layout-content">{@render children()}</div>
<div class="layout-right">{@render right()}</div>
<div class="layout-right" class:active={mobiRightActive}>{@render right()}</div>
<div class="layout-licon" onclick={() => {}}><RiMenu3Line /></div>
<div class="layout-ricon" onclick={() => {}}><RiInformationLine /></div>
<div class="layout-licon" onclick={() => {mobiLeftActive = !mobiLeftActive;}}><RiMenu3Line /></div>
<div class="layout-ricon" onclick={() => {mobiRightActive = !mobiRightActive;}}><RiInformationLine /></div>
</div>
<style>
@ -26,15 +29,31 @@ let { children, title, left, right } = $props();
". title ."
"left center right";
margin: 1em 2em;
position: relative;
}
.layout-left { grid-area: left; }
.layout-right { grid-area: right; }
.layout-left { grid-area: left; padding-right: 1em; }
.layout-right { grid-area: right; padding-left: 1em; }
.layout-content { grid-area: center; }
.layout-title { grid-area: title; text-align: center; font-size: 1.4em; }
@media (min-width: 800px) {
.layout {
grid-template-columns: 180px auto 180px;
}
.layout-licon, .layout-ricon { display: none; }
}
@media (min-width: 800px) and (max-width: 919px) {
.layout-left, .layout-right {
font-size: smaller;
}
}
@media (min-width: 920px) {
.layout {
grid-template-columns: 240px auto 240px;
}
@ -42,7 +61,7 @@ let { children, title, left, right } = $props();
.layout-licon, .layout-ricon { display: none; }
}
@media (min-width: 960px) {
@media (min-width: 1000px) {
.layout {
grid-template-columns: 270px auto 270px;
}
@ -70,6 +89,24 @@ let { children, title, left, right } = $props();
}
.layout-left, .layout-right { display: none; }
.layout-left.active, .layout-right.active {
display: block;
position: absolute;
top: 2.5em;
width: 80%;
min-height: calc(100vh - 6em);
background-color: var(--canvas);
z-index: 10;
}
.layout-left.active {
left: 0;
}
.layout-right.active {
right: 0;
}
}