Skip to content

Commit 05b0459

Browse files
MrSunshyneMrSunshyne
authored
Merge pull request #265 from mahita098/mahita-contribution
icon and date alignment fix
2 parents bb8a118 + f0b7ae5 commit 05b0459

File tree

2 files changed

+70
-37
lines changed

2 files changed

+70
-37
lines changed

‎packages/frontendmu-nuxt/components/cards/small-event-card.vue

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script setup lang="ts">
2-
import type { PropType } from 'vue'
3-
import type { DirectusEvent } from '@/utils/types'
4-
import { isDateInFuture } from '@/utils/helpers'
2+
import type { PropType } from "vue";
3+
import type { DirectusEvent } from "@/utils/types";
4+
import { isDateInFuture } from "@/utils/helpers";
55
66
const props = defineProps({
77
event: {
88
type: Object as PropType<DirectusEvent>,
99
default: () => ({}),
1010
},
11-
})
11+
});
1212
</script>
1313

1414
<template>
@@ -17,43 +17,55 @@ const props = defineProps({
1717
>
1818
<div v-if="event.Date" class="">
1919
<span
20-
class="inline-flex rounded-lg p-3 ring-4 ring-white dark:ring-white/5" :class="isDateInFuture(new Date(event.Date))
21-
? 'bg-verse-50 text-verse-600 dark:text-verse-400 font-bold dark:bg-verse-900/10'
22-
: 'bg-gray-50 text-gray-700'
20+
class="inline-flex rounded-lg p-3 ring-4 ring-white dark:ring-white/5"
21+
:class="
22+
isDateInFuture(new Date(event.Date))
23+
? 'bg-verse-50 text-verse-600 dark:text-verse-400 font-bold dark:bg-verse-900/10'
24+
: 'bg-gray-50 text-gray-700'
2325
"
2426
>
25-
<div class="mr-2 h-6 w-6">
27+
<div class="mr-2 h-6 w-6 flex items-center">
2628
<Icon name="carbon:calendar" />
2729
</div>
2830
<span>{{ new Date(event.Date).toDateString() }}</span>
2931
</span>
3032
</div>
3133
<div class="flex flex-col gap-4 md:gap-0">
32-
<h3 class="leading-2 text-xl md:text-2xl font-medium py-2 text-verse-500 dark:text-white">
33-
<NuxtLink :href="`meetup/${event.id}`" class="w-[300px] md:w-96 focus:outline-none">
34+
<h3
35+
class="leading-2 text-xl md:text-2xl font-medium py-2 text-verse-500 dark:text-white"
36+
>
37+
<NuxtLink
38+
:href="`meetup/${event.id}`"
39+
class="w-[300px] md:w-96 focus:outline-none"
40+
>
3441
<span class="absolute inset-0" aria-hidden="true" />
3542
{{ event?.title }}
3643
</NuxtLink>
3744
</h3>
3845
<div class="flex gap-4 border-gray-100">
39-
<div class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium text-gray-500">
46+
<div
47+
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium text-gray-500"
48+
>
4049
<Icon
41-
name="carbon:group" class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-gray-500"
50+
name="carbon:group"
51+
class="mr-1.5 h-[15px] w-[15px] flex-shrink-0 truncate text-gray-500"
4252
aria-hidden="true"
4353
/>
44-
<div v-if="event?.Attendees !== 0" class="line-clamp-1 md:line-clamp-0">
54+
<div
55+
v-if="event?.Attendees !== 0"
56+
class="line-clamp-1 md:line-clamp-0"
57+
>
4558
Attendees {{ event?.Attendees }}
4659
</div>
47-
<div v-else>
48-
Seats: {{ event?.Attendees }}
49-
</div>
60+
<div v-else>Seats: {{ event?.Attendees }}</div>
5061
</div>
5162
<div
5263
v-if="event.Venue"
5364
class="flex gap-1 md:gap-0 items-center justify-start text-base font-medium text-gray-500"
5465
>
5566
<Icon
56-
name="carbon:location" class="ml-[-1px] mr-1.5 h-4 w-4 flex-shrink-0 truncate text-gray-500"
67+
name="carbon:location"
68+
class="ml-[-1px] mr-1.5 h-4 w-4 flex-shrink-0 truncate text-gray-500"
5769
aria-hidden="true"
5870
/>
5971
<div class="line-clamp-1 md:line-clamp-0">

‎packages/frontendmu-nuxt/pages/sponsors.vue

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
2-
import sponsorTypes from '../../frontendmu-data/data/sponsors.js'
3-
import { vTransitionName } from '@/utils/helpers'
2+
import sponsorTypes from "../../frontendmu-data/data/sponsors.js";
3+
import { vTransitionName } from "@/utils/helpers";
44
5-
const title = 'Our sponsors'
6-
const description = ''
5+
const title = "Our sponsors";
6+
const description = "";
77
</script>
88

99
<template>
@@ -13,36 +13,55 @@ const description = ''
1313
<BaseHeading>Sponsors</BaseHeading>
1414
<p class="text-xl text-verse-600 dark:text-verse-200">
1515
We're lucky to have sponsors support our community. If you're
16-
interested in sponsoring us,<a href="mailto:hello@frontend.mu"
17-
class="underline hover:bg-verse-50 dark:bg-verse-950" title="Please reach out to us via email"> please reach
18-
out to the organizers
19-
here</a>.
16+
interested in sponsoring us,<a
17+
href="mailto:hello@frontend.mu"
18+
class="underline hover:bg-verse-50 dark:bg-verse-950"
19+
title="Please reach out to us via email"
20+
>
21+
please reach out to the organizers here</a
22+
>.
2023
</p>
2124
</div>
2225
<div class="grid gap-20 pt-12 md:grid-cols-2">
2326
<template v-for="sponsorType in sponsorTypes" :key="sponsorType.title">
24-
<div class="flex flex-col">
27+
<div class="flex flex-col justify-between">
2528
<div class="space-y-5 sm:mx-auto sm:space-y-2">
2629
<h3
27-
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200">
30+
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200"
31+
>
2832
{{ sponsorType.title }}
2933
</h3>
3034
<p class="max-w-2xl text-xl text-verse-600 dark:text-verse-200">
3135
{{ sponsorType.description }}
3236
</p>
3337
</div>
34-
<ul role="list"
35-
class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12">
36-
<template v-for="(sponsor, index) in sponsorType.sponsors" :key="index">
38+
<ul
39+
role="list"
40+
class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12"
41+
>
42+
<template
43+
v-for="(sponsor, index) in sponsorType.sponsors"
44+
:key="index"
45+
>
3746
<li class="pt-4">
38-
<a target="_blank" :href="sponsor.sponsorUrl"
39-
class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg h-full">
40-
<img v-if="sponsor.logo" class="w-48 h-52 object-contain" :src="`/img/sponsors/${sponsor.logo}`"
41-
:style="vTransitionName('sponsor-name', sponsor.name)">
47+
<a
48+
target="_blank"
49+
:href="sponsor.sponsorUrl"
50+
class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg h-full"
51+
>
52+
<img
53+
v-if="sponsor.logo"
54+
class="w-48 h-52 object-contain"
55+
:src="`/img/sponsors/${sponsor.logo}`"
56+
:style="vTransitionName('sponsor-name', sponsor.name)"
57+
/>
4258
<div v-else>
4359
<span class="text-2xl font-bold">{{ sponsor.name }}</span>
4460
</div>
45-
<p v-if="sponsor.description" class="text-center text-gray-500">
61+
<p
62+
v-if="sponsor.description"
63+
class="text-center text-gray-500"
64+
>
4665
{{ sponsor.description }}
4766
</p>
4867
</a>
@@ -55,11 +74,13 @@ const description = ''
5574
<div>
5675
<div class="space-y-5 sm:mx-auto sm:space-y-2 py-4">
5776
<h3
58-
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200">
77+
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200"
78+
>
5979
Past meetup sponsors
6080
</h3>
6181
<p class="max-w-2xl text-xl text-verse-600 dark:text-verse-200">
62-
These wonderful companies have sponsored our meetups in the past. We're grateful for their support.
82+
These wonderful companies have sponsored our meetups in the past.
83+
We're grateful for their support.
6384
</p>
6485
</div>
6586

0 commit comments

Comments
 (0)