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

add svg icons, make event display buttons toggleable

Browse Source
This commit is contained in:
elise
2024-08-05 19:06:04 +02:00
parent a179e8dc42
commit af20820bac
5 changed files with 79 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/events/EventContainer.tsx
View File

@ -118,20 +118,21 @@ export const EventContainer = ({
<div className={styles.events}>
<div className={styles.eventWrapper}>
<div className={styles.displayOptions}>
<button onClick={() => setMode(null)} className="button secondary">
<button onClick={() => setMode(null)} className="button toggler hasIcon" data-active={mode === "list"}>
<span>Vis liste</span>
<Icon />
<Icon type="list" />
</button>
<button
onClick={() => setMode("calendar")}
className="button secondary"
className="button toggler hasIcon"
data-active={mode === "calendar"}
>
<span>Vis kalender</span>
<Icon />
<Icon type="calendar" />
</button>
<button onClick={toggleFilter} className="button tertiary">
<span>Filter</span>
<Icon />
<Icon type="filter" />
</button>
</div>
<EventFilter

2
web/src/components/events/EventFilter.tsx
View File

@ -109,7 +109,7 @@ export const EventFilter = ({
<div className={styles.filterItem}>
<button onClick={onResetFilters} className="button tertiary">
<span>Vis alle</span>
<Icon />
<Icon type="noFilter" />
</button>
</div>
)}

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

@ -3,10 +3,11 @@ import styles from "./icon.module.scss";
export default function Icon({
type,
}: {
type?: "doc" | "arrow" | "externalLink";
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
}) {
return (
<div className={styles.icon}>
{type === "doc" && (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -15,8 +16,56 @@ export default function Icon({
/>
</svg>
)}
{type === "arrow" && <div>&rarr;</div>}
{type === "externalLink" && <div>&#8599;</div>}
{type === "arrowUp" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M437-161.87v-470.98L222.76-418.61 161.87-480 480-798.13 798.13-480l-60.89 61.39L523-632.85v470.98h-86Z"/></svg>
)}
{type === "arrowRight" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M646-442.5H170v-75h476L426.5-737l53.5-53 310 310-310 310-53.5-53L646-442.5Z"/></svg>
)}
{type === "externalLink" && (
<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 === "list" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M357.5-244H795v-105.5H357.5V-244ZM165-610.5h117.5V-716H165v105.5Zm0 187h117.5v-112H165v112Zm0 179.5h117.5v-105.5H165V-244Zm192.5-179.5H795v-112H357.5v112Zm0-187H795V-716H357.5v105.5ZM165-169q-30.94 0-52.97-22.03Q90-213.06 90-244v-472q0-30.94 22.03-52.97Q134.06-791 165-791h630q30.94 0 52.97 22.03Q870-746.94 870-716v472q0 30.94-22.03 52.97Q825.94-169 795-169H165Z"/></svg>
)}
{type === "calendar" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M204-90q-30.94 0-52.97-22.03Q129-134.06 129-165v-552q0-30.94 22.03-52.97Q173.06-792 204-792h45v-80h75v80h312v-80h75v80h45q30.94 0 52.97 22.03Q831-747.94 831-717v552q0 30.94-22.03 52.97Q786.94-90 756-90H204Zm0-75h552v-393H204v393Zm0-468h552v-84H204v84Zm0 0v-84 84Zm276.05 232q-16.55 0-27.8-11.2Q441-423.39 441-439.95q0-16.55 11.2-27.8Q463.39-479 479.95-479q16.55 0 27.8 11.2Q519-456.61 519-440.05q0 16.55-11.2 27.8Q496.61-401 480.05-401Zm-160 0q-16.55 0-27.8-11.2Q281-423.39 281-439.95q0-16.55 11.2-27.8Q303.39-479 319.95-479q16.55 0 27.8 11.2Q359-456.61 359-440.05q0 16.55-11.2 27.8Q336.61-401 320.05-401Zm320 0q-16.55 0-27.8-11.2Q601-423.39 601-439.95q0-16.55 11.2-27.8Q623.39-479 639.95-479q16.55 0 27.8 11.2Q679-456.61 679-440.05q0 16.55-11.2 27.8Q656.61-401 640.05-401Zm-160 160q-16.55 0-27.8-11.2Q441-263.39 441-279.95q0-16.55 11.2-27.8Q463.39-319 479.95-319q16.55 0 27.8 11.2Q519-296.61 519-280.05q0 16.55-11.2 27.8Q496.61-241 480.05-241Zm-160 0q-16.55 0-27.8-11.2Q281-263.39 281-279.95q0-16.55 11.2-27.8Q303.39-319 319.95-319q16.55 0 27.8 11.2Q359-296.61 359-280.05q0 16.55-11.2 27.8Q336.61-241 320.05-241Zm320 0q-16.55 0-27.8-11.2Q601-263.39 601-279.95q0-16.55 11.2-27.8Q623.39-319 639.95-319q16.55 0 27.8 11.2Q679-296.61 679-280.05q0 16.55-11.2 27.8Q656.61-241 640.05-241Z"/></svg>
)}
{type === "filter" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M444-169q-16 0-27.5-11T405-207v-235L179-730q-14.5-19-4.25-40T210-791h540q25 0 35.25 21T781-730L555-442v235q0 16-11.5 27T516-169h-72Zm36-299 195-248H285l195 248Zm0 0Z"/></svg>
)}
{type === "noFilter" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M585.5-481 532-534.5 675-716H350.5l-75-75H750q24 0 34.75 21T781-730L585.5-481Zm201 413.5L555-299v91q0 16-11.5 27.5T516-169h-72q-16 0-27.5-11.5T405-208v-241L67-787l53-53.5 720 720-53.5 53ZM532-534.5Z"/></svg>
)}
{type === "instagram" && (
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4.32187C30.4125 4.32187 31.1719 4.35 33.6938 4.4625C36.0375 4.56562 37.3031 4.95938 38.1469 5.2875C39.2625 5.71875 40.0688 6.24375 40.9031 7.07812C41.7469 7.92188 42.2625 8.71875 42.6938 9.83438C43.0219 10.6781 43.4156 11.9531 43.5188 14.2875C43.6313 16.8187 43.6594 17.5781 43.6594 23.9813C43.6594 30.3938 43.6313 31.1531 43.5188 33.675C43.4156 36.0188 43.0219 37.2844 42.6938 38.1281C42.2625 39.2438 41.7375 40.05 40.9031 40.8844C40.0594 41.7281 39.2625 42.2438 38.1469 42.675C37.3031 43.0031 36.0281 43.3969 33.6938 43.5C31.1625 43.6125 30.4031 43.6406 24 43.6406C17.5875 43.6406 16.8281 43.6125 14.3063 43.5C11.9625 43.3969 10.6969 43.0031 9.85313 42.675C8.7375 42.2438 7.93125 41.7188 7.09688 40.8844C6.25313 40.0406 5.7375 39.2438 5.30625 38.1281C4.97813 37.2844 4.58438 36.0094 4.48125 33.675C4.36875 31.1438 4.34063 30.3844 4.34063 23.9813C4.34063 17.5688 4.36875 16.8094 4.48125 14.2875C4.58438 11.9437 4.97813 10.6781 5.30625 9.83438C5.7375 8.71875 6.2625 7.9125 7.09688 7.07812C7.94063 6.23438 8.7375 5.71875 9.85313 5.2875C10.6969 4.95938 11.9719 4.56562 14.3063 4.4625C16.8281 4.35 17.5875 4.32187 24 4.32187ZM24 0C17.4844 0 16.6688 0.028125 14.1094 0.140625C11.5594 0.253125 9.80625 0.665625 8.2875 1.25625C6.70312 1.875 5.3625 2.69062 4.03125 4.03125C2.69063 5.3625 1.875 6.70313 1.25625 8.27813C0.665625 9.80625 0.253125 11.55 0.140625 14.1C0.028125 16.6687 0 17.4844 0 24C0 30.5156 0.028125 31.3312 0.140625 33.8906C0.253125 36.4406 0.665625 38.1938 1.25625 39.7125C1.875 41.2969 2.69063 42.6375 4.03125 43.9688C5.3625 45.3 6.70313 46.125 8.27813 46.7344C9.80625 47.325 11.55 47.7375 14.1 47.85C16.6594 47.9625 17.475 47.9906 23.9906 47.9906C30.5063 47.9906 31.3219 47.9625 33.8813 47.85C36.4313 47.7375 38.1844 47.325 39.7031 46.7344C41.2781 46.125 42.6188 45.3 43.95 43.9688C45.2812 42.6375 46.1063 41.2969 46.7156 39.7219C47.3063 38.1938 47.7188 36.45 47.8313 33.9C47.9438 31.3406 47.9719 30.525 47.9719 24.0094C47.9719 17.4938 47.9438 16.6781 47.8313 14.1188C47.7188 11.5688 47.3063 9.81563 46.7156 8.29688C46.125 6.70312 45.3094 5.3625 43.9688 4.03125C42.6375 2.7 41.2969 1.875 39.7219 1.26562C38.1938 0.675 36.45 0.2625 33.9 0.15C31.3313 0.028125 30.5156 0 24 0Z" fill="currentColor"/>
<path d="M24 11.6719C17.1938 11.6719 11.6719 17.1938 11.6719 24C11.6719 30.8062 17.1938 36.3281 24 36.3281C30.8062 36.3281 36.3281 30.8062 36.3281 24C36.3281 17.1938 30.8062 11.6719 24 11.6719ZM24 31.9969C19.5844 31.9969 16.0031 28.4156 16.0031 24C16.0031 19.5844 19.5844 16.0031 24 16.0031C28.4156 16.0031 31.9969 19.5844 31.9969 24C31.9969 28.4156 28.4156 31.9969 24 31.9969Z" fill="currentColor"/>
<path d="M39.6937 11.1843C39.6937 12.778 38.4 14.0624 36.8156 14.0624C35.2219 14.0624 33.9375 12.7687 33.9375 11.1843C33.9375 9.59053 35.2313 8.30615 36.8156 8.30615C38.4 8.30615 39.6937 9.5999 39.6937 11.1843Z" fill="currentColor"/>
</svg>
)}
{type === "facebook" && (
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z" fill="currentColor"/>
</svg>
)}
{type === "flickr" && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.68 362.68">
<circle fill="currentColor" cx="85.8" cy="181.34" r="85.8"/>
<circle fill="currentColor" cx="276.88" cy="181.34" r="85.8"/>
</svg>
)}
{!type && (
<div>
<svg
@ -31,6 +80,7 @@ export default function Icon({
</svg>
</div>
)}
</div>
);
}

6
web/src/components/layout/Footer.tsx
View File

@ -47,7 +47,7 @@ export const Footer = () => {
className="button tertiary"
>
<span>Instagram</span>
<Icon />
<Icon type="instagram" />
</a>
</li>
<li>
@ -57,7 +57,7 @@ export const Footer = () => {
className="button tertiary"
>
<span>Facebook</span>
<Icon />
<Icon type="facebook" />
</a>
</li>
<li>
@ -67,7 +67,7 @@ export const Footer = () => {
className="button tertiary"
>
<span>Flickr</span>
<Icon />
<Icon type="flickr" />
</a>
</li>
</ul>

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

@ -84,5 +84,21 @@ button,
transform: rotate(-45deg);
}
}
&.hasIcon {
--color-button-bg: var(--color-deepBrick);
--color-button-fg: var(--color-deepBrick);
&:after {
display: none;
}
&[data-active=true] {
--color-button-bg: var(--color-deepBrick);
--color-button-fg: var(--color-betongGray);
&:after, &:before {
display: none;
}
}
}
}
}