Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add MIXUP page #625

Open
wants to merge 38 commits into
base: main
Choose a base branch
from
Open
Changes from 22 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
c5cd03f
basic setup mixup site
thomcsmits Nov 13, 2024
9e6b9c2
add images for mixup
thomcsmits Nov 13, 2024
aa1290f
add importing system for upcoming events
thomcsmits Nov 13, 2024
b5edcd0
styling top of mixup page
thomcsmits Nov 13, 2024
b7fefd3
add bulletpoints and background image for mixup
thomcsmits Nov 13, 2024
787abdc
add highlights for mixup
thomcsmits Nov 14, 2024
bf737c3
rename icons mixup
thomcsmits Nov 14, 2024
e3f3c72
fix header and images mixup
thomcsmits Nov 18, 2024
4340c75
fix timing for same day and incorrect slicing mixup
thomcsmits Nov 18, 2024
0c90f41
adjust sizing of highlights to grid container with middle mixup
thomcsmits Nov 19, 2024
d043d84
update pictures, add dutch descriptions mixup
thomcsmits Nov 19, 2024
55a5258
cleanup
thomcsmits Nov 19, 2024
b8bbbe7
add mixup brand colors
thomcsmits Nov 20, 2024
5920231
update mixup brand
thomcsmits Nov 20, 2024
d48224d
update brand and add barbuddy
thomcsmits Nov 20, 2024
de7155c
add mixup to header/footer and change link for recurringevents
thomcsmits Nov 20, 2024
990fd1f
run lint
thomcsmits Nov 20, 2024
ca57235
move months to shared/lang
thomcsmits Nov 22, 2024
e0ed046
move LinkedEvents to separate component file
thomcsmits Nov 27, 2024
0581f9c
change mixup png for svg
thomcsmits Nov 28, 2024
eab7163
add padding
thomcsmits Dec 3, 2024
cbf2e3f
add barvisual to outsite for build
thomcsmits Dec 3, 2024
51e54ce
change mixup-colors to div instead of in set-up
thomcsmits Dec 3, 2024
8bd25b1
fixing opening hours element
thomcsmits Dec 3, 2024
83dc116
various fixes
thomcsmits Dec 3, 2024
3698448
add elementscontainers
thomcsmits Dec 3, 2024
98109a4
cleanup
thomcsmits Dec 3, 2024
f97077b
change string parsing to google sheets api
thomcsmits Dec 10, 2024
2115509
styling
thomcsmits Dec 10, 2024
9232d0f
Fix linked events async data issues
casperboone Dec 10, 2024
99b6792
Merge pull request #633 from dwh-outsite/linked-events-fix
thomcsmits Dec 11, 2024
ce779e1
change bg-image to scoped style for barvisual
thomcsmits Dec 11, 2024
1c7819c
change top triangle to gray-800
thomcsmits Dec 11, 2024
dacd842
move up classes to sections
thomcsmits Dec 11, 2024
dabb7bb
add mixup logo, move barnight to elementscontainer
thomcsmits Dec 11, 2024
5180707
png for text, jpg for non-text
thomcsmits Dec 11, 2024
c6ff344
fixes
thomcsmits Dec 11, 2024
95c6a66
fond bolt on events
thomcsmits Dec 11, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/bar.svg
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These SVGs look like pngs converted to SVG. Are the original vector files available to create an SVG?

Copy link
Collaborator Author

@thomcsmits thomcsmits Dec 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I don't have these. I already had to pull these out of a random MIXUP design guide on Drive. I reached out to see if MIXUP has it.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/disco.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/drag.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/karaoke.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/music.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/assets/images/photos/mixup/icons/tasting.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions dwhdelft.nl/components/layout/Header.vue
Original file line number Diff line number Diff line change
@@ -9,6 +9,8 @@ en:
url: /education
- title: Jong&Out
url: /jongenout
- title: MIXUP
url: /mixup
- title: Andersblad
url: andersblad
- title: Contact
@@ -23,6 +25,8 @@ nl:
url: /education
- title: Jong&Out
url: /jongenout
- title: MIXUP
url: /mixup
- title: Andersblad
url: andersblad
- title: Contact
94 changes: 94 additions & 0 deletions dwhdelft.nl/components/pages/mixup/LinkedEvents.vue
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<i18n lang="yaml">
en:
events: Our UPcoming events
nl:
events: Onze UPkomende evenementen
</i18n>

<script setup>
const { t } = useT()
const { image: imageIcons } = useDynamicImages(
import.meta.glob('~/assets/images/photos/mixup/icons/*', { eager: true, as: 'url_encode' })
)
const { data: events } = await useAsyncData('events', async () => {
const url =
'https://docs.google.com/spreadsheets/d/e/2PACX-1vRvhyi-w-PveKJjx2Mwq1busShI5LKEXqAUOKufoK-vswFNO4W_6tesXb67RO1-biPOmQ0mQJzUy_gY/pub?gid=0&single=true&output=csv'
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
const response = await fetch(url)
const text = await response.text()
const parsedData = text.replace(/\r/g, '').split('\n')
const firstRowData = parsedData[0].split(',')
// check if structure is not changed
const firstRowCheck = ['Date', 'Event name', 'Icon']
if (firstRowData.length !== firstRowCheck.length) {
warn('Structure of MIXUP Events Sheet has been altered!')
}
for (let i = 0; i < firstRowData.length; i++) {
if (firstRowData[i] !== firstRowCheck[i]) {
warn('Structure of MIXUP Events Sheet has been altered!')
}
}
// check if event has name and date is still in future
let mappedData = parsedData
.slice(1)
.map((row) => {
let [dateString, eventName, icon] = row.split(',')
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
if (!['bar', 'disco', 'drag', 'karaoke', 'music', 'tasting'].includes(icon)) {
icon = 'bar'
}
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
dateString = ''.concat(dateString.split('-').reverse().join('/'), ' 23:59')
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
return {
date: new Date(dateString),
eventName: eventName,
icon: icon,
}
})
.filter(
(event) =>
event.eventName !== '' &&
event.date instanceof Date &&
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
!isNaN(event.date) &&
event.date.getTime() > new Date().getTime()
)
// show maximum of 5 icons
if (mappedData.length > 5) {
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
mappedData = mappedData.slice(0, 5)
}
return mappedData
})
</script>

<template>
<div v-if="events && events.length > 0" class="bg-brand-450 text-white">
<div class="flex justify-center font-medium text-5xl">
<h1>{{ t('events') }}</h1>
</div>
<div class="flex flex-wrap justify-center">
<div
v-for="(event, index) in events"
:key="index"
class="w-48 p-4 m-4 bg-brand-900 rounded-lg shadow-lg space-y-2"
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
>
<div class="flex justify-center">
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
{{ ''.concat(event.date.getDate(), ' ', $t(`month.${event.date.getMonth()}`)) }}
</div>
<div class="flex justify-center">
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
{{ event.eventName }}
</div>
<div class="flex justify-center">
<img :src="imageIcons(event.icon)" alt="Event Icon" />
</div>
</div>
</div>
</div>
</template>
4 changes: 4 additions & 0 deletions dwhdelft.nl/content/footer_links.yml
Original file line number Diff line number Diff line change
@@ -31,6 +31,10 @@ categories:
nl: Fillum Programma
en: Fillum Programme
url: "http://homodelft.nl/films/"
- name:
nl: MIXUP
en: MIXUP
url: /mixup
- name:
nl: Kennismaken
en: Join DWH
212 changes: 212 additions & 0 deletions dwhdelft.nl/pages/mixup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<i18n lang="yaml">
en:
title: MIXUP
events: Our UPcoming events
intro:
- MIXUP is thé queer nightlife experience of Delft. We open our doors every Saturday at 22:00 and almost
every week we are more than just a bar. Drag performances of the HAUS of 4D, the city’s best karaoke,
delicious tastings, MIXUP Alternative with bands, dance nights with popular songs of now and your favorite
classics, Eurovision watch parties, a spicy Halloween and lots of other themed parties! If you happen to stumble
upon us when it’s just a barnight, you can have a great chat and perhaps even a dance.
- MIXUP consists completely of a team of enthusiastic volunteers of DWH. Did we get you excited and do you want
to contribute and be part of an amazing community? Become a member.
- Scared to come alone? We can match you with a barbuddy to chat with and introduce you to new people!
invite:
announcement: 'Come by during one of our bar nights:'
time: Every Saturday starting at {0}
membership_button: Sign up now for DWH
barbuddy_button: Find a buddy
instagram: Our Events and UPdates
bulletPoints:
- title: Dance Nights
description: We have drinks together each week and will often have a DJ to get the dance floor moving!
image: events-dancenights
- title: Parties
description: Disco, hard rock, Oktoberfest, Halloween and more... There’s always time for a party.
image: events-parties
- title: Drag Shows
description: Our own drag house HAUS of 4D performs every two months with amazing shows.
image: events-dragshow
- title: Events
description: Karaoke, tastings, vinyl night or a talent show, there is a lot to do on a night at MIXUP.
image: events-silentdisco
highlights:
title: Our Highlights
events:
- title: MIXUP Origin
description: The first ever party under the MIXUP branding was MIXUP Origin, the opening party! Miss Abby OMG gave a wonderful performance and people were living!
image: highlight-abbyomg
- title: Summer Party
description: The weather was hot and the people even hotter! DJ Maarten brought us tropical tunes whilst we could sip summer cocktails and cool off in an actual swimming pool!
image: highlight-summer-party
nl:
title: MIXUP
events: Onze UPkomende evenementen
intro:
- MIXUP is dé queer uitgaansavond van Delft. Iedere zaterdagavond zijn we vanaf 22:00 open en bijna
elke week zijn we meer dan alleen een bar. Drag performances van HAUS of 4D, de beste karaoke van de stad,
heerlijke proeverijen, MIXUP Alternative met bands, dansavonden met hitjes van nu of juist je favoriete
klassiekers, een hitsig Halloween en andere themafeesten, Eurovisie watch parties en meer! En als we dan toch
eens gewoon een bar zijn, is het heel gezellig bijkletsen en misschien een dansje wagen.
- MIXUP wordt volledig mogelijk gemaakt door een team enthousiaste vrijwilligers van DWH. Ben je enthousiast geworden en wil je
bijdragen aan en onderdeel worden van een fantastische community? Wordt dan lid.
- Bang om alleen te komen? We kunnen je aan een barbuddy koppelen om te leren kennen, die je ook aan anderen kan voorstellen!
invite:
announcement: 'Kom gerust langs op onze baravond:'
time: Elke Zaterdag vanaf {0}
membership_button: Schrijf je nu in bij DWH
barbuddy_button: Vind een buddy
instagram: Onze evenementen en UPdates
bulletPoints:
- title: Dansavonden
description: Elke week komen we samen voor drankjes, vaak is er zelfs een DJ om die voetjes op te bewegen!
image: events-dancenights
- title: Feesten
description: Disco, hard rock, Oktoberfest, Halloween en nog veel meer... Er is altijd tijd voor een feestje.
image: events-parties
- title: Drag optredens
description: Ons eigen drag huis HAUS of 4D geeft elke twee maanden geweldige shows
image: events-dragshow
- title: Evenementen
description: Karaoke, proeverijen, vinyl nachten of een talentenshow, er is veel te beleven op een MIXUP avond.
image: events-silentdisco
highlights:
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
title: Onze Hoogtepunten
events:
- title: MIXUP Oorsprong
description: Het allereerste feestje onder de MIXUP banner was MIXUP Origin’s, het openingsfeest! Miss Abby OMG gaf ons een prachtig optreden, het feest was aan!
image: highlight-abbyomg
- title: Zomerfeest
description: Heet weer en nog hetere mensen! DJ Maarten verzorgde tropische tunes terwijl we zomercocktails aan het nippen waren en afkoelde in een daadwerkelijk zwembad!
image: highlight-summer-party
</i18n>

<script setup>
useHead({
bodyAttrs: {
class: 'mixup-colors',
},
})
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
const { t, tt } = useT()
const { data: openingHours } = await useAsyncData(() => queryContent('opening_hours').findOne())
const barOpeningHours = openingHours.value.events.find((event) => event.day.en === 'Saturday')
const { image: imageOverviews } = useDynamicImages(import.meta.glob('~/assets/images/photos/mixup/*', { eager: true }))
const instagramChannelsMixup = [
{
name: 'MIXUP',
widgetId: '219aedf13a4355fe95c6e27ed1f7386c',
instagram: 'mixupdelft',
},
]
</script>
<template>
<LayoutSmallHeader triangleClass="border-brand-450">
{{ t('title') }}
</LayoutSmallHeader>
<section>
<PagesMixupLinkedEvents />
</section>
<section>
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
<div class="bg-brand-900 text-white text-lg mx-auto pt-12 pb-24 md:flex">
<div class="flex-1 px-4 lg:pr-32">
<div class="space-y-4">
<ElementsParagraphedText :paragraphs="t('intro')" class="md:text-xl md:leading-relaxed space-y-4" />
<p
v-if="barOpeningHours.announcement"
class="mt-3 mb-4 text-brand-900 bg-brand-450"
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
v-text="tt(barOpeningHours.announcement)"
/>
<div
class="flex-1 rounded-lg shadow-xl bg-brand-450 md:text-xl p-4 relative w-full z-20 md:w-auto md:inline-flex items-center"
>
<div class="pt-6 md:pt-0 md:pl-4 space-y-2">
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
<p>{{ t('invite.announcement') }}</p>
<p class="font-bold">{{ t('invite.time', [barOpeningHours.start_time]) }}</p>
</div>
</div>
<div class="flex flex-1 space-x-4">
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
<div>
<a href="https://my.dwhdelft.nl/signup">
<ElementsSecondaryButton class="!text-brand-450" arrow>
{{ t('membership_button') }}
</ElementsSecondaryButton>
</a>
</div>
<div>
<nuxt-link :to="localePath('barbuddy')">
<ElementsSecondaryButton class="!text-brand-450" arrow>
{{ t('barbuddy_button') }}
</ElementsSecondaryButton>
</nuxt-link>
</div>
</div>
</div>
</div>
<div class="hidden lg:block">
<div>
<img src="~/assets/images/photos/mixup/barnight.png" class="w-96" />
</div>
</div>
</div>
</section>
<section class="mixup-colors">
<div class="bg-[url('~/assets/images/photos/mixup/barvisual.jpg')] bg-cover bg-center py-10">
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the line where the image is used as a background

<ElementsContainer>
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
<ElementsActionCard v-for="point in t('bulletPoints')" :key="point.title" :title="point.title">
<template #header>
<div class="w-full h-40 overflow-hidden mx-auto">
<img :src="imageOverviews(point.image)" class="object-cover w-full h-full" />
<img src="~assets/images/photos/mixup/barvisual.jpg" class="object-cover w-full h-full" />
</div>
</template>
<p class="-mt-3 text-brand-900 text-lg leading-snug" v-text="point.description" />
</ElementsActionCard>
</div>
</ElementsContainer>
</div>
</section>
<section>
<div class="bg-brand-900 pb-12">
<div class="mx-auto pt-12 pb-8">
<h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight" v-html="t('highlights.title')" />
</div>
<div class="grid grid-cols-[1fr_minmax(0,1280px)_1fr]">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

II feel a bit mixed about the style of the highlights. It's a reuse of the ui components that we use to introduce people elsewhere, that is a kind of confusing ui pattern.

Maybe use an ElementsActionCard like on the Out-site's highlights? That way the images also come beter tot hun recht

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you mean. (This was also a request from Colin, so I'll also discuss)
I do think the Outsite highlights look quite a bit like the cards above (with the 4 types of events), so this rounded element gives a nice difference in design.

<div
v-for="(event, index) in t('highlights.events')"
:key="event.name"
class="rounded-2xl md:rounded-full mb-6 bg-white p-4 md:flex items-center space-y-2 md:space-y-0 md:space-x-4 shadow-xl space-y-6 max-w-5xl col-start-2"
:class="index % 2 !== 0 ? 'ml-auto' : ''"
>
<div class="rounded-full h-32 w-32 bg-white overflow-hidden">
<img :src="imageOverviews(event.image)" class="object-cover h-full" />
</div>
<div class="flex-1 md:pr-8">
<div class="flex space-x-2 items-baseline">
<h3 class="text-xl text-brand-450 font-semibold" v-text="event.title" />
</div>
<p class="text-brand-900 text-lg" v-html="event.description" />
</div>
</div>
</div>
</div>
</section>
<LayoutStraightSection contentBackgroundClass="!bg-brand-450" contentClass="md:py-12">
<PagesHomeInstagramChannels class="xl:w-2/3 mx-auto" :brands="instagramChannelsMixup">
<template #title>
<h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight" v-html="t('instagram')" />
</template>
</PagesHomeInstagramChannels>
</LayoutStraightSection>
</template>
thomcsmits marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions shared/assets/css/main.css
Original file line number Diff line number Diff line change
@@ -37,3 +37,18 @@ html {
--color-brand-800: 157 23 77;
--color-brand-900: 131 24 67;
}

.mixup-colors {
--color-brand-50: 253 230 243;
--color-brand-100: 254 204 231;
--color-brand-200: 254 163 210;
--color-brand-300: 253 105 179;
--color-brand-350: 247 61 151;
--color-brand-400: 231 29 115;
--color-brand-450: 231 29 115;
--color-brand-500: 201 13 88;
--color-brand-600: 166 14 72;
--color-brand-700: 138 17 64;
--color-brand-800: 138 17 64;
--color-brand-900: 10 9 16;
}
6 changes: 3 additions & 3 deletions shared/content/opening_hours.yml
Original file line number Diff line number Diff line change
@@ -98,9 +98,9 @@ events:
feesten en doe mee met een van onze vele events!
link:
name:
en: MIXUP on Instagram
nl: MIXUP op Instagram
url: https://www.instagram.com/mixupdelft/
en: More on MIXUP
nl: Meer over MIXUP
url: https://dwhdelft.nl/mixup

- name: Jong&Out
day:
14 changes: 14 additions & 0 deletions shared/lang/en.js
Original file line number Diff line number Diff line change
@@ -51,4 +51,18 @@ export default {
heading: 'The form has been submitted successfully',
},
},
month: {
0: 'January',
1: 'February',
2: 'March',
3: 'April',
4: 'May',
5: 'June',
6: 'July',
7: 'August',
8: 'September',
9: 'October',
10: 'November',
11: 'December',
},
}
14 changes: 14 additions & 0 deletions shared/lang/nl.js
Original file line number Diff line number Diff line change
@@ -53,4 +53,18 @@ export default {
heading: 'Het formulier is succesvol verstuurd',
},
},
month: {
0: 'januari',
1: 'februari',
2: 'maart',
3: 'april',
4: 'mei',
5: 'juni',
6: 'juli',
7: 'augustus',
8: 'september',
9: 'oktober',
10: 'november',
11: 'december',
},
}