edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style search field, make main menu more fun

Browse Source
This commit is contained in:
elise
2024-08-05 22:49:32 +02:00
parent f4e88d8baa
commit 5ac05114ce
5 changed files with 86 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/general/Icon.tsx
View File

@ -3,7 +3,7 @@ import styles from "./icon.module.scss";
export default function Icon({
type,
}: {
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
}) {
return (
<div className={styles.icon}>
@ -29,6 +29,10 @@ export default function Icon({
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M257.39-235.61 197-296l381-381H238.39v-86h486v486h-86v-339.61l-381 381Z"/></svg>
)}
{type === "search" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
)}
{type === "tickets" && (
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480q0 17 11.5 28.5T480-440Zm0-160q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm320 440H160q-33 0-56.5-23.5T80-240v-160q33 0 56.5-23.5T160-480q0-33-23.5-56.5T80-560v-160q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v160q-33 0-56.5 23.5T800-480q0 33 23.5 56.5T880-400v160q0 33-23.5 56.5T800-160Zm0-80v-102q-37-22-58.5-58.5T720-480q0-43 21.5-79.5T800-618v-102H160v102q37 22 58.5 58.5T240-480q0 43-21.5 79.5T160-342v102h640ZM480-480Z"/></svg>
)}

16
web/src/components/layout/Header.tsx
View File

@ -154,22 +154,22 @@ export const Header = () => {
{/* TODO: skal trolig ikke være så synlig ved lansering */}
<Link href="/foreninger">Foreninger*</Link>
</li>
<li className={styles.search}>
<label>
<p>Søk</p>
<input type="text" onKeyDown={handleSearch} />
</label>
</li>
<li className={styles.galtinn}>
<a
href="https://galtinn.neuf.no/"
target="_blank"
className="button tertiary"
>
<span>Mitt medlemskap</span>
<span>Mitt medlemskap</span>&nbsp;
<Icon type="externalLink" />
</a>
</li>
<li className={styles.search}>
<label>
<p>Søk</p>
<input type="text" onKeyDown={handleSearch} placeholder="Søk" />
<div className={styles.searchIcon}><Icon type="search" /></div>
</label>
</li>
</ul>
</div>
</nav>

63
web/src/components/layout/header.module.scss
View File

@ -155,26 +155,77 @@
transition: all var(--transition-easing);
a {
--size-icon: var(--font-size-caption);
display: inline-block;
padding: 0 calc(var(--size-icon) + .75rem);
transform: translateX(calc((var(--size-icon) + .75rem) * -1));
position: relative;
transition: transform .3s ease;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: var(--size-icon);
height: var(--size-icon);
margin-bottom: .16rem;
margin-right: var(--spacing-xs);
border-radius: var(--size-icon);
background: var(--color-goldenOrange);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: transform .4s ease, opacity .2s ease;;
}
&:hover {
transform: translateX(0);
opacity: 1;
&:before {
opacity: 1;
}
}
}
ul {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1.4rem;
font-size: 1.2rem;
padding: var(--spacing-sitepadding-block) 0;
}
}
.menuItemLarge {
font-size: 2rem;
font-size: 1.6rem;
}
.divider {
margin-top: var(--spacing-l);
margin-top: var(--spacing-m);
}
.search,
.galtinn {
margin-top: var(--spacing-m);
.search {
margin-top: var(--spacing-l);
width: 100%;
max-width: 16rem;
font-size: var(--font-size-body);
font-weight: 500;
color: var(--color-deepBrick);
position: relative;
input {
width: 100%;
padding-right: 2rem;
}
}
.searchIcon {
position: absolute;
right: 1rem;
bottom: .6rem;
}
@media (max-width: 1200px) {

17
web/src/css/base.scss
View File

@ -124,13 +124,26 @@ blockquote {
input[type="text"] {
border-radius: 10rem;
background: var(--color-white);
color: var(--color-text);
border: none;
color: currentColor;
border: 2px solid currentColor;
padding: var(--spacing-xs) var(--spacing-s);
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
transition: opacity var(--transition-easing);
&::placeholder {
font-weight: 400;
color: currentColor;
opacity: .6;
}
&:focus, &:hover {
outline: none;
border-color: var(--color-goldenOrange);
box-shadow: 0 0 0 1px var(--color-goldenOrange);
transition: box-shadow .3s ease, border-color .3s ease;
}
}
select {

2
web/src/css/button.scss
View File

@ -11,7 +11,7 @@ button,
margin: 0 0 var(--spacing-xs);
font-family: var(--font-main);
font-size: var(--font-size-body);
font-weight: 500;
font-weight: 500 !important;
text-decoration: none;
transition: opacity var(--transition-easing);
cursor: pointer;