feat(Page): move search to page
This commit is contained in:
@@ -1,12 +1,35 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
|
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
|
||||||
|
import { FontSearch } from '$widgets/FontSearch';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Page Component
|
* Page Component
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
let searchContainer: HTMLElement;
|
||||||
|
|
||||||
|
let isExpanded = $state(false);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Font List -->
|
<!-- Font List -->
|
||||||
<div class="p-2">
|
<div class="p-2 will-change-[height]">
|
||||||
|
<div bind:this={searchContainer}>
|
||||||
|
<FontSearch bind:showFilters={isExpanded} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="will-change-tranform transition-transform content">
|
||||||
<FontDisplay />
|
<FontDisplay />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
/* Tells the browser to skip rendering off-screen content */
|
||||||
|
content-visibility: auto;
|
||||||
|
/* Helps the browser reserve space without calculating everything */
|
||||||
|
contain-intrinsic-size: 1px 1000px;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user