Etheryo/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated navbar. Search can now be customized.

Browse source
This commit is contained in:
Yohan Boujon 2024-08-06 23:34:18 +01:00
parent c2c30a5b49
commit 03c3386c0c
6 changed files with 45 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/lib/components/navbar.svelte
View file

@ -16,7 +16,6 @@
let navbar_title;
let navbar_category;
let navbar_search;
function isActive(str, url) {
if (url === str) return 'navbar-active';
@ -106,27 +105,10 @@
<div>
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
</div>
<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25/>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
</div>
<div
role="banner"
class="navbar-height flex-row container"
on:mousemove={(event) => {
update_gradient(event, navbar_search);
}}
on:mouseenter={() => {
animateForeground(true, navbar_search);
}}
on:mouseleave={() => {
animateForeground(false, navbar_search);
}}
>
<div class="content navbar-search"><Search /></div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_search} />
</div>
</nav>
<div class="navbar-fake" />

43
frontend/src/lib/components/search.svelte
View file

@ -6,6 +6,13 @@
import { mdiMagnify } from '@mdi/js';
import anime from 'animejs';
export let width = '50%';
export let font_size = '1rem';
export let padding = '1rem';
export let logo_size = 20;
export let margin = '0rem';
export let text_color = 'var(--color-subtext)';
let div_search;
let input_search;
let svgIcon;
@ -18,7 +25,6 @@
return;
}
selected = true;
animateButton(true);
showSearch(true);
// Animating the div
@ -37,7 +43,7 @@
percent_var: [0, 100],
opacity_var: [1, 0],
easing: 'easeOutQuad',
duration: 400,
duration: 300,
update: function (anim) {
div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`;
}
@ -48,27 +54,11 @@
function closeSearch(event) {
if (selected && event.target != input_search && event.target != svgIcon.svgElement) {
animateButton(false);
showSearch(false);
selected = false;
}
}
function animateButton(isEntering) {
const tvalue = isEntering ? [0, -0.8] : [-0.8, 0];
const svalue = isEntering ? [1, 1.2] : [1.2, 1];
anime({
targets: { transform: 0, scale: 1 },
transform: tvalue,
scale: svalue,
duration: 300,
easing: 'easeOutQuad',
update: function (anim) {
svgIcon.svgElement.style.transform = `scale(${anim.animations[1].currentValue}) translateX(${anim.animations[0].currentValue}rem)`;
}
});
}
function showSearch(isEntering) {
//transform: ;
if (isEntering) {
@ -98,10 +88,21 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div style="width:50%;">
<div style="width: {width}; margin: {margin} !important;">
<div class="search" on:click={animate} bind:this={div_search}>
<SvgIcon type="mdi" path={mdiMagnify} size="20" bind:this={svgIcon}></SvgIcon>
<input type="text" placeholder="Rechercher..." bind:this={input_search} />
<SvgIcon
type="mdi"
path={mdiMagnify}
size={logo_size}
bind:this={svgIcon}
padding={logo_size / 3}
></SvgIcon>
<input
type="text"
style="font-size: {font_size};padding-top: {padding};padding-bottom: {padding};color: {text_color};"
placeholder="Rechercher..."
bind:this={input_search}
/>
</div>
<div class="search-box" bind:this={search_box}></div>
</div>

5
frontend/src/lib/components/svg-icon-custom.svelte
View file

@ -22,6 +22,7 @@
export let viewbox = null;
export let flip = 'none';
export let rotate = 0;
export let padding = 0;
// Reactive statements to set default values based on type
$: defaults = types[type] || types.default;
@ -37,9 +38,9 @@
<svg
bind:this={svgElement}
width={sizeValue}
height={sizeValue}
height=auto
viewBox={viewboxValue}
style="--sx: {sx}; --sy: {sy}; --r: {r}"
style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
{...$$restProps}
>
<path d={path} />

16
frontend/src/lib/css/navbar.css
View file

@ -146,20 +146,8 @@ a {
.navbar-search {
justify-content: center;
}
.navbar-search input {
width: 10rem;
margin-right: 1rem;
margin-left: 1rem;
margin-top: calc((5rem / 2) - 1.2rem);
background-color: var(--color-text);
color: var(--color-background);
height: 1.5rem;
border: 2px solid;
border-color: var(--color-subtext);
border-radius: 2rem;
padding-left: 0.5rem;
padding-right: 1rem;
padding-left: 1rem;
}
.navbar-search-floating input {

14
frontend/src/lib/css/search.css
View file

@ -3,15 +3,15 @@
flex-direction: row;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
border-radius: 5rem;
background-color: var(--color-background);
margin: 0 !important;
}
.search input {
padding: 1rem;
padding-left: 0.5rem;
background-color: var(--color-background);
font-family: 'JetBrains Mono';
font-size: 1.2rem;
background-color: #00000000;
color: var(--color-subtext);
border: 0;
width: 100%;
border-top-right-radius: 5rem;
@ -24,15 +24,13 @@
}
.search svg {
width: 3rem;
height: auto;
padding: 1rem;
color: var(--color-background);
background-color: var(--color-text);
border-radius: 3rem;
border-radius: 100%;
box-shadow: #4f325d40 15px 0px 60px -12px, #0000004d 15px 0px 36px -18px;
background: radial-gradient(circle farthest-corner at 0px 0px, var(--color-subtext) 0%, var(--color-text) 80%);
cursor: pointer;
transform: scale(1.1) !important;
}
.search-box {
@ -41,7 +39,7 @@
background-color: var(--color-background);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
border-radius: 1rem;
position: absolute;
position: absolute !important;
z-index: 1;
transform: translateX(-1rem);
display: none;

15
frontend/src/routes/style/+page.svelte
View file

@ -8,12 +8,10 @@
</script>
<div class="base">
<div class="blank" />
<div class="blank" />
<div class="margin-left-3">
<Post
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
profile="https://avatars.githubusercontent.com/u/115081848?v=4"
profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
author="Yohan boujon"
@ -21,8 +19,17 @@
/>
</div>
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="blank" />
<div class="margin-left-3">
<Search />
<Search logo_size=48 />
</div>
<div class="blank" />
<div class="margin-left-3">