media queries & ordinals

main
Ryan Moon 2023-07-17 21:04:18 -04:00
parent 0627d108b9
commit 9397e768e5
4 changed files with 7 additions and 5 deletions

View File

@ -77,6 +77,7 @@
} }
.event { .event {
grid-template-columns: 3fr 2fr;
grid-column: 1; grid-column: 1;
padding: .5rem 1rem; padding: .5rem 1rem;
@ -89,6 +90,7 @@
.info { .info {
grid-column: 1; grid-column: 1;
grid-row: 1/4; grid-row: 1/4;
min-width: 0;
h5 { h5 {
font-size: 1rem; font-size: 1rem;
@ -96,7 +98,7 @@
} }
.location { .location {
width: 80%; width: 95%;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

View File

@ -19,5 +19,5 @@
</script> </script>
<template> <template>
<h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4> <h4>Date: {{ data.date }} · {{ data.time }}</h4>
</template> </template>

View File

@ -25,7 +25,8 @@
<p class="location">{{ event.location }}</p> <p class="location">{{ event.location }}</p>
<p>{{ event.date }} · {{ event.time }}</p> <p>{{ event.date }} · {{ event.time }}</p>
</div> </div>
<NuxtLink v-bind:class="(event.meetup)?'attend both':'attend bottom'" class="attend" v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink> <NuxtLink v-bind:class="(event.meetup)?'attend both':'attend bottom'" class="attend"
v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink>
<NuxtLink class="meetup bottom" v-if="event.meetup" target="_BLANK" <NuxtLink class="meetup bottom" v-if="event.meetup" target="_BLANK"
:to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink> :to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
</div> </div>

View File

@ -28,7 +28,6 @@
let date = parseISO(data.value.date) let date = parseISO(data.value.date)
data.value.date = format(date, 'EEE, MMMM d') data.value.date = format(date, 'EEE, MMMM d')
data.value.ordinal = nth(getDay(date) - 1)
</script> </script>
@ -38,7 +37,7 @@
<h3>{{ data.title }}</h3> <h3>{{ data.title }}</h3>
<h4>Location: {{ data.location}}</h4> <h4>Location: {{ data.location}}</h4>
<h4>Address: {{ data.address }}</h4> <h4>Address: {{ data.address }}</h4>
<h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4> <h4>Date: {{ data.date }} · {{ data.time }}</h4>
<!-- <EventDate :date="data.date" :time="data.time" /> --> <!-- <EventDate :date="data.date" :time="data.time" /> -->
</div> </div>
</div> </div>