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

misc happy styling, event header tables, etc

Browse Source
This commit is contained in:
elisejakob
2024-06-24 03:34:19 +02:00
parent b1f3db6a42
commit 944506cc2f
12 changed files with 132 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/blocks/featuredBlock.module.scss
View File

@ -1,6 +1,6 @@
.featuredBlock {
background: var(--color-background-secondary);
margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
display: grid;
grid-template-columns: repeat(2, 1fr);

1
web/src/components/blocks/horizontalRuleBlock.module.scss
View File

@ -1,7 +1,6 @@
.horizontalRuleBlock {
height: 3rem;
width: 100%;
max-width: var(--size-width-p);
margin: var(--spacing-s) auto var(--spacing-section-bottom);
overflow: hidden;
position: relative;

6
web/src/components/blocks/richTextBlock.module.scss
View File

@ -101,11 +101,11 @@
font-style: italic;
max-width: calc(var(--size-width-p) * 1.4);
margin: 2rem 0 3.2rem;
text-align: center;
}
strong {
font-weight: 700;
strong,
b {
font-weight: 600;
}
em {

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

@ -26,9 +26,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
<Link href="/arrangementer">Arrangement</Link>
</span>
<h1 className={styles.title}>{event.title}</h1>
<div className={styles.details}>
<div className={styles.eventDetails}>
<div className={styles.prices}>
{/*<h2>Pris</h2>*/}
<span className={styles.label}>Pris:</span>
<ul className={styles.priceList}>
{event.free && (
<li className={styles.priceItem}>
@ -55,24 +55,31 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
)}
</ul>
</div>
{event.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
<span>Kjøp billetter</span>
<Icon />
</a>
)}
{event.facebookUrl && (
<a href={event.facebookUrl} className="textLink">
Gå til Facebook-event
</a>
)}
{event.categories.length > 0 && (
<div>
Kategorier: {event.categories.map((x) => x.name).join(", ")}
<span className={styles.label}>Kategorier:</span>{" "}
{event.categories.map((x) => x.name).join(", ")}
</div>
)}
{event.organizers && (
<div>
<span className={styles.label}>Arrangeres av:</span>{" "}
<OrganizerList event={event} />
</div>
)}
{event.organizers && <OrganizerList event={event} />}
</div>
{event.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
<span>Kjøp billetter</span>
<Icon />
</a>
)}
{event.facebookUrl && (
<a href={event.facebookUrl} className="button tertiary">
<span>Gå til Facebook-event</span>
<Icon type="externalLink" />
</a>
)}
</div>
<div className={styles.image}>
{featuredImage && (

30
web/src/components/events/OrganizerList.tsx
View File

@ -8,22 +8,18 @@ import Link from "next/link";
export const OrganizerList = ({ event }: { event: EventFragment }) => {
return (
<div className={styles.organizerList}>
<h2>Arrangeres av</h2>
<ul>
{event.organizers.map((organizer) => {
const url =
organizer.association?.url ?? organizer.externalUrl ?? null;
if (typeof url === "string" && url.startsWith("http")) {
return (
<li key={organizer.name}>
<Link href={url}>{organizer.name}</Link>
</li>
);
}
return <li key={organizer.name}>{organizer.name}</li>;
})}
</ul>
</div>
<ul className={styles.organizerList}>
{event.organizers.map((organizer) => {
const url = organizer.association?.url ?? organizer.externalUrl ?? null;
if (typeof url === "string" && url.startsWith("http")) {
return (
<li key={organizer.name}>
<Link href={url}>{organizer.name}</Link>
</li>
);
}
return <li key={organizer.name}>{organizer.name}</li>;
})}
</ul>
);
};

8
web/src/components/events/dateList.module.scss
View File

@ -1,7 +1,11 @@
.dateWrapper {
background: var(--color-background-secondary);
margin: 0 calc(var(--spacing-sitepadding-inline)*-1) var(--spacing-sitepadding-block);
padding: var(--spacing-s) var(--spacing-sitepadding-inline) var(--spacing-m);
}
.dateList {
list-style: none;
margin: 0 calc(var(--spacing-sitepadding-inline)*-1) calc(var(--spacing-sitepadding-block)*2);
padding: 0 var(--spacing-sitepadding-inline);
display: flex;
gap: var(--spacing-s);
}

51
web/src/components/events/eventHeader.module.scss
View File

@ -4,7 +4,7 @@
grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-gap-column);
align-items: flex-end;
padding: 0 0 var(--spacing-sitepadding-inline) 0;
padding: 0;
}
.title {
@ -18,29 +18,62 @@
img {
max-width: 100%;
height: auto;
display: block;
}
}
.details {}
.text {
padding-bottom: var(--spacing-m);
}
.eventDetails {
font-size: var(--font-size-caption);
margin: var(--spacing-m) 0;
>div {
padding: var(--spacing-xs) 0;
border-bottom: var(--border);
display: flex;
}
}
.prices {
margin: 2rem 0 var(--spacing-s);
h2 {
font-size: var(--spacing-s);
font-family: var(--font-main);
}
padding: var(--spacing-xs) 0 0;
border-top: var(--border);
display: flex;
}
.priceList {
list-style: none;
//flex-grow: 1;
}
.priceItem {
font-size: var(--font-size-caption);
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
/*padding: var(--spacing-xs) 0;
border-bottom: var(--border);
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
padding-bottom: 0;
}*/
}
.priceLabel {
display: block;
}
.label {
font-weight: 600;
}
.label {
width: 7rem;
}

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

@ -121,4 +121,10 @@
padding: 0 .4rem;
font-size: var(--font-size-xs);
font-family: var(--font-main);
font-weight: 500;
}
.moreDates {
color: var(--color-goldenBeige);
background: var(--color-deepBrick);
}

11
web/src/components/events/organizerList.module.scss
View File

@ -1,10 +1,9 @@
.organizerList {
h2 {
font-size: inherit;
font-weight: inherit;
}
list-style: none;
display: inline;
ul {
list-style: none;
li {
display: inline;
font-size: var(--font-size-caption);
}
}

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

@ -12,25 +12,31 @@ export const Footer = () => {
<h2 className="suphead">Følg oss</h2>
<ul>
<li>
<a href="#" target="_blank" className="button tertiary">
<a
href="https://www.instagram.com/studentersamfundet/"
target="_blank"
className="button tertiary"
>
<span>Instagram</span>
<Icon />
</a>
</li>
<li>
<a href="#" target="_blank" className="button tertiary">
<a
href="https://www.facebook.com/studentersamfundet"
target="_blank"
className="button tertiary"
>
<span>Facebook</span>
<Icon />
</a>
</li>
<li>
<a href="#" target="_blank" className="button tertiary">
<span>Twitter</span>
<Icon />
</a>
</li>
<li>
<a href="#" target="_blank" className="button tertiary">
<a
href="https://www.flickr.com/groups/neuf/pool/"
target="_blank"
className="button tertiary"
>
<span>Flickr</span>
<Icon />
</a>

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

@ -1,13 +1,14 @@
.footer {
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
background: var(--color-chateauBlue);
background: var(--color-deepBrick);
color: var(--color-betongGray);
position: relative;
z-index: 700;
font-size: var(--font-size-caption);
overflow: hidden;
button {
a {
font-size: var(--font-size-caption);
background: var(--color-neufPink);
}
}
@ -91,14 +92,20 @@
}
.pig {
position: relative;
top: 0;
right: 0;
position: absolute;
bottom: -2rem;
right: -2rem;
z-index: 800;
}
.toTop {
position: absolute;
z-index: 801;
right: var(--spacing-sitepadding-inline);
bottom: var(--spacing-sitepadding-block);
cursor: pointer;
button {
font-size: var(--font-size-caption);
}
}

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

@ -24,6 +24,12 @@ button,
text-decoration: none;
}
&.cta {
padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5);
display: flex;
justify-content: space-between;
}
&.secondary {
color: var(--color-deepBrick);
background: var(--color-goldenBeige);