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

misc design progress and testing

Browse Source
This commit is contained in:
elisejakob
2024-05-15 00:32:05 +02:00
parent 4555479fea
commit ba4a4b3941
15 changed files with 217 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/kontakt/page.tsx
View File

@ -5,6 +5,7 @@ import { NewsList } from "@/components/news/NewsList";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { PersonSection } from "@/components/people/PersonSection";
import { ContactInfo } from "@/components/contact/ContactInfo";
export default async function Page() {
return (
@ -13,6 +14,7 @@ export default async function Page() {
heading="Kontakt"
lead="Her er info om hvordan du kan kontakte oss og sånt."
/>
<ContactInfo />
<PersonSection heading="Styret" />
<PersonSection heading="Administrasjonen" />
</main>

30
web/src/app/praktisk/page.tsx Normal file
View File

@ -0,0 +1,30 @@
import { graphql } from "@/gql";
//import { NewsFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { IconListBlock } from "@/components/blocks/IconListBlock";
export default async function Page() {
return (
<main className="site-main" id="main">
<PageHeader heading="Praktisk info" />
<p>Velkommen til oss!</p>
<div className="anchorLinks">
Hopp til:
<ul>
<li>
<button>Åpningstider</button>
</li>
<li>
<button>Adresse</button>
</li>
<li>
<button>Billetter</button>
</li>
</ul>
</div>
<IconListBlock />
</main>
);
}

4
web/src/app/utleie/page.tsx
View File

@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
import { VenueList } from "@/components/venues/VenueList";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { Pig } from "@/components/general/Pig";
const VenueFragmentDefinition = graphql(`
fragment Venue on VenuePage {
@ -55,6 +56,9 @@ export default async function Page() {
<main className="site-main" id="main">
<PageHeader heading="Utleie" />
<VenueList venues={venues} />
<div className="bg-pig">
<Pig type="key" />
</div>
</main>
);
}

22
web/src/components/contact/ContactInfo.tsx Normal file
View File

@ -0,0 +1,22 @@
import styles from "./contactInfo.module.scss";
export const ContactInfo = () => {
return (
<section className={styles.contactInfo}>
<ul>
<li className={styles.contactItem}>
<strong>Generelle henvendelser</strong>
<a href="mailto:post@neuf.no">post@neuf.no</a>
</li>
<li className={styles.contactItem}>
<strong>Billetter</strong>
<a href="mailto:billetter@neuf.no">billetter@neuf.no</a>
</li>
<li className={styles.contactItem}>
<strong>Hittegods</strong>
<a href="mailto:hittegods@neuf.no">hittegods@neuf.no</a>
</li>
</ul>
</section>
);
};

28
web/src/components/contact/contactInfo.module.scss Normal file
View File

@ -0,0 +1,28 @@
.contactInfo {
margin: 0 calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
background: var(--color-background-secondary);
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
}
}
.contactItem {
list-style: none;
strong {
display: block;
font-size: var(--font-size-caption);
}
a {
display: block;
font-family: var(--font-serif);
font-size: var(--font-size-lead);
color: var(--color-deepBrick);
}
}

56
web/src/components/events/EventHeader.tsx
View File

@ -2,22 +2,62 @@ import { EventCategory, EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import Image from "@/components/general/Image";
import { Pig } from "../general/Pig";
import Link from "next/link";
export const EventHeader = ({ event }: { event: EventFragment }) => {
return (
<div className={styles.eventHeader}>
<div className={styles.text}>
<span className="suphead breadcrumb">
<Link href="/arrangementer">Arrangement</Link>
</span>
<h1 className={styles.title}>{event.title}</h1>
<div className={styles.details}>
<div>Facebook: {event.facebookUrl}</div>
<div>Billettlenke: {event.ticketUrl}</div>
<div>Ordinær pris: {event.priceRegular}</div>
<div>Studentpris: {event.priceStudent}</div>
<div>Medlemspris: {event.priceMember}</div>
<div>
Kategorier:{" "}
{event.categories && event.categories.map((x) => x.name).join(", ")}
{event.facebookUrl && (
<a href={event.facebookUrl} className="button">
Gå til Facebook-event
</a>
)}
{event.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
Kjøp billetter
</a>
)}
<div className={styles.prices}>
<h2>Pris</h2>
<ul className={styles.priceList}>
{!event.priceRegular &&
!event.priceStudent &&
!event.priceMember && (
<li className={styles.priceItem}>
<span>Gratis</span>
</li>
)}
{event.priceRegular && (
<li className={styles.priceItem}>
<span className={styles.priceLabel}>Ordinær:</span>{" "}
{event.priceRegular} kr
</li>
)}
{event.priceStudent && (
<li className={styles.priceItem}>
<span className={styles.priceLabel}>Student:</span>{" "}
{event.priceStudent} kr
</li>
)}
{event.priceMember && (
<li className={styles.priceItem}>
<span className={styles.priceLabel}>Medlem:</span>{" "}
{event.priceMember} kr
</li>
)}
</ul>
</div>
{event.categories.length > 0 && (
<div>
Kategorier: {event.categories.map((x) => x.name).join(", ")}
</div>
)}
</div>
</div>
<div className={styles.image}>

4
web/src/components/events/UpcomingEvents.tsx
View File

@ -8,11 +8,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
<section className={styles.upcomingWrapper}>
<h2 className="suphead">Denne uka på Chateau Neuf</h2>
<ul className={styles.eventList}>
{events.map((event) => (
{events.slice(0, 3).map((event) => (
<EventItem key={event.id} event={event} mode="list" size="medium" />
))}
<li>
<div className={styles.calendarLink}>
<Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
</div>
</li>
</ul>
</section>

5
web/src/components/events/eventItem.module.scss
View File

@ -14,11 +14,16 @@
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: .6rem;
align-items: center;
.title,
.details {
font-size: 1rem;
}
.image {
padding-top: 100%;
}
}
}

29
web/src/components/events/upcomingEvents.module.scss
View File

@ -1,6 +1,6 @@
.upcomingWrapper {
background: var(--color-deepBrick);
color: var(--color-betongGray);
color: var(--color-goldenBeige);
margin: 0 calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding);
@ -13,9 +13,34 @@
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
align-items: center;
li {
border-right: var(--border);
//border-right: var(--border);
margin-right: .6rem;
padding-right: 1rem;
&:last-child {
border: none;
}
// testing testing
&:first-child {
>div:first-child {
border-radius: 50%;
}
img {
display: none;
}
}
}
}
.calendarLink {
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: var(--font-size-lead);
}

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

@ -65,7 +65,7 @@ export const Header = () => {
</Link>
</li>
<li>
<Link href="/" data-active={pathname === "/praktisk"}>
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
Praktisk info
</Link>
</li>
@ -99,7 +99,7 @@ export const Header = () => {
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/" data-active={pathname === "/praktisk"}>
<Link href="/praktisk" data-active={pathname === "/praktisk"}>
Praktisk info
</Link>
</li>

2
web/src/components/layout/footer.module.scss
View File

@ -4,6 +4,8 @@
align-items: flex-end;
padding: var(--spacing-sitepadding);
background: var(--color-background-secondary);
position: relative;
z-index: 700;
button {
font-size: var(--font-size-caption);

5
web/src/components/people/PersonSection.tsx
View File

@ -5,6 +5,11 @@ export const PersonSection = ({ heading }: { heading: string }) => {
return (
<section className={styles.personSection}>
<h2 className={styles.heading}>{heading}</h2>
<p className={styles.intro}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
tristique rutrum nibh quis feugiat. Sed nisl ante, suscipit at justo ac,
elementum interdum justo. Sed sed mi sit amet nibh molestie lacinia.{" "}
</p>
<PersonList />
</section>
);

6
web/src/components/people/personSection.module.scss
View File

@ -13,5 +13,9 @@
}
.heading {
margin: 2rem 0;
margin: 0 0 1.6rem;
}
.intro {
margin-bottom: 3rem;
}

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

@ -50,11 +50,18 @@ body {
a {
color: inherit;
text-underline-offset: .1rem;
text-underline-offset: .16em;
text-decoration-thickness: .05em;
transition: opacity var(--transition-easing);
&:hover {
opacity: .6;
}
}
p {
font-size: var(--font-size-body);
max-width: 36em;
&.lead {
font-size: var(--font-size-lead);
@ -86,6 +93,16 @@ h6 {
letter-spacing: .05em;
}
.breadcrumb {
display: block;
font-weight: 500;
margin-bottom: 1rem;
a {
text-decoration: none;
}
}
button,
.button {
border-radius: 10rem;
@ -96,12 +113,17 @@ button,
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
text-decoration: none;
transition: opacity var(--transition-easing);
cursor: pointer;
&:hover {
opacity: .8;
}
a {
text-decoration: none;
}
}
blockquote {
@ -125,6 +147,7 @@ input[type="text"] {
.site-main {
padding: var(--spacing-sitepadding);
min-height: 100vh;
}
.hiddenLink {
@ -152,3 +175,11 @@ input[type="text"] {
box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
}
}
.bg-pig {
position: fixed;
bottom: 0;
right: 0;
z-index: 600;
--color-pig: var(--color-neufPink);
}

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

@ -36,7 +36,7 @@
--spacing-sitepadding: 2rem;
--spacing-gap-column: 2rem;
--spacing-gap-row: 1.5rem;
--spacing-section-bottom: 5rem;
--spacing-section-bottom: 3rem;
// animations
--transition-easing: .3s ease;