Skip to content

Commit

Permalink
Merge pull request #51 from TechLabs-Berlin/better-milestone-display
Browse files Browse the repository at this point in the history 
Better milestone display
  • Loading branch information
@danrocha
danrocha authored Mar 21, 2021
2 parents 2615a6e + be9868b commit 0310d80
Show file tree
Hide file tree
Showing 16 changed files with 296 additions and 203 deletions.
17 changes: 17 additions & 0 deletions assets/css/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ html,
@apply h-full antialiased text-gray-700 bg-gray-50;
}

/* layout */

/* resource list items */
.link-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-auto-rows: max-content;
}

/* links */
.nav-link.nuxt-link-exact-active {
@apply text-pink-600 font-bold relative;
}
Expand All @@ -16,6 +27,11 @@ html,
height: 4px;
}

a.regular-link:hover {
@apply underline;
}

/* transition fade animation */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
Expand All @@ -24,6 +40,7 @@ html,
opacity: 0;
}

/* faq and other sections */
.title-with-lines {
@apply w-full mb-8 text-xs font-bold tracking-wide uppercase flex flex-none;
}
Expand Down
1 change: 1 addition & 0 deletions assets/icons/exclamation-circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 0 additions & 9 deletions components/EventListItemResourceList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,3 @@ export default defineComponent({
},
})
</script>

<style lang="scss" scoped>
.link-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-auto-rows: max-content;
}
</style>
107 changes: 107 additions & 0 deletions components/MilestoneListItem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<template>
<WrapperContentBox>
<article class="relative pt-8 lg:pt-0">
<header class="flex flex-col items-center mb-8">
<p class="mb-4 text-4xl font-bold text-center text-pink-600">
<!-- <TIcon icon="clipboard-list" class="inline-block" /> -->
<TIcon
:icon="
milestone.type === 'cutoff'
? 'exclamation-circle'
: 'check-square'
"
class="inline-block"
/>
</p>

<NuxtLink :to="`/milestone/${milestone.slug}`" class="title-link">
<h2
class="relative inline-block mb-1 text-2xl font-bold hover:underline"
>
{{ milestone.title }}
<div
class="absolute top-0 right-0 hidden pl-2 text-base text-blue-600 transform translate-x-full translate-y-1 icon"
>
<TIcon icon="link" class="inline-block" />
</div></h2
></NuxtLink>
<ClientOnly>
<p class="text-lg text-center">
Due
{{
format(new Date(milestone.deadline), "MMMM do, 'at' h:mm aaaa")
}}
</p>
</ClientOnly>
</header>

<main class="space-y-8">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="prose" v-html="$md.render(milestone.description)" />
<template v-if="milestone.todos.length">
<p v-if="!alwaysShowTasks" class="text-center">
<button
v-if="showTasks"
class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
@click="toggleTasks"
>
<TIcon icon="eye-slash" class="inline-block" /> Hide tasks
</button>
<button
v-else
class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
@click="toggleTasks"
>
<TIcon icon="chevron-down" class="inline-block" /> Show tasks
</button>
</p>
<ul v-if="showTasks || alwaysShowTasks" class="space-y-8 text-lg">
<li
v-for="todo in milestone.todos"
:key="todo.name"
class="flex space-x-4"
>
<div>
<TIcon icon="check-square" class="text-2xl text-blue-600" />
</div>
<div>
<p>{{ todo.name }}</p>
<ul v-if="todo.resources" class="mt-4 link-grid">
<li v-for="resource in todo.resources" :key="resource.title">
<ResourceListItem :resource="resource" />
</li>
</ul>
</div>
</li>
</ul>
</template>
</main>
</article>
</WrapperContentBox>
</template>

<script>
import { defineComponent, ref } from '@nuxtjs/composition-api'
import { format } from 'date-fns'
export default defineComponent({
props: {
milestone: {
type: Object,
required: true,
},
alwaysShowTasks: {
type: Boolean,
},
},
setup() {
const showTasks = ref(false)
const toggleTasks = () => (showTasks.value = !showTasks.value)
return {
showTasks,
toggleTasks,
format,
}
},
})
</script>
93 changes: 3 additions & 90 deletions components/Milestones.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,89 +8,7 @@
/>
</button>
</div> -->
<WrapperContentBox v-if="currentMilestone">
<article class="relative pt-8 lg:pt-0">
<header class="flex flex-col items-center mb-8">
<p class="mb-4 text-4xl font-bold text-center text-pink-600">
<TIcon icon="clipboard-list" class="inline-block" />
</p>

<NuxtLink
:to="`/milestone/${currentMilestone.slug}`"
class="title-link"
>
<h2
class="relative inline-block mb-1 text-2xl font-bold hover:underline"
>
{{ currentMilestone.title }}
<div
class="absolute top-0 right-0 hidden pl-2 text-base text-blue-600 transform translate-x-full translate-y-1 icon"
>
<TIcon icon="link" class="inline-block" />
</div></h2
></NuxtLink>
<ClientOnly>
<p class="text-lg text-center">
Due
{{
format(
new Date(currentMilestone.deadline),
"MMMM do, 'at' h:mm aaaa"
)
}}
</p>
</ClientOnly>
</header>

<main class="space-y-8">
<!-- eslint-disable-next-line vue/no-v-html -->
<div
class="prose text-center"
v-html="$md.render(currentMilestone.description)"
/>
<template v-if="currentMilestone.todos.length">
<p class="text-center">
<button
v-if="showTasks"
class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
@click="toggleTasks"
>
<TIcon icon="eye-slash" class="inline-block" /> Hide tasks
</button>
<button
v-else
class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
@click="toggleTasks"
>
<TIcon icon="chevron-down" class="inline-block" /> Show tasks
</button>
</p>
<ul v-if="showTasks" class="space-y-8 text-lg">
<li
v-for="todo in currentMilestone.todos"
:key="todo.name"
class="flex space-x-4"
>
<div>
<TIcon icon="check-square" class="text-2xl text-blue-600" />
</div>
<div>
<p>{{ todo.name }}</p>
<ul v-if="todo.resources" class="mt-4 link-grid">
<li
v-for="resource in todo.resources"
:key="resource.title"
>
<ResourceListItem :resource="resource" />
</li>
</ul>
</div>
</li>
</ul>
</template>
</main>
</article>
</WrapperContentBox>
<MilestoneListItem v-if="currentMilestone" :milestone="currentMilestone" />
<!-- <div>
<button>
<TIcon
Expand All @@ -103,8 +21,8 @@
</template>

<script>
import { defineComponent, computed, ref } from '@nuxtjs/composition-api'
import { isPast, isFuture, format } from 'date-fns'
import { defineComponent, computed } from '@nuxtjs/composition-api'
import { isPast, isFuture } from 'date-fns'
export default defineComponent({
props: {
Expand All @@ -114,8 +32,6 @@ export default defineComponent({
},
},
setup(props) {
const showTasks = ref(false)
const toggleTasks = () => (showTasks.value = !showTasks.value)
const milestones = props.milestones.map((milestone) => ({
...milestone,
deadline: new Date(milestone.deadline),
Expand All @@ -137,9 +53,6 @@ export default defineComponent({
pastMilestones,
futureMilestones,
currentMilestone,
format,
showTasks,
toggleTasks,
}
},
})
Expand Down
57 changes: 11 additions & 46 deletions components/TimelineWeek.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,54 +24,19 @@
<!-- events -->
<div>
<template v-if="week.events.length || week.milestones.length">
<ul
v-if="week.events.length"
class="mt-1 text-xs"
:class="{ 'opacity-75': weekStatus === 'past' }"
>
<li v-for="e in week.events" :key="e.slug" class="flex space-x-2">
<p>
<TIcon
icon="calendar-day"
class="inline-block text-xs mt-05"
:class="
weekStatus === 'current' ? 'text-pink-600' : 'text-gray-300'
"
/>
</p>
<div>
<p class="font-semibold">{{ e.name }}</p>
<p>
{{ format(new Date(e.date), 'MMM d') }}
</p>
</div>
</li>
</ul>
<ul
<TimelineWeekItems v-if="week.events.length" :events="week.events">
<template #event="{ event }">
<TimelineWeekEvent :event="event" :week-status="weekStatus" />
</template>
</TimelineWeekItems>
<TimelineWeekItems
v-if="week.milestones.length"
class="mt-1 text-xs"
:class="{ 'opacity-75': weekStatus === 'past' }"
:events="week.milestones"
>
<li
v-for="milestone in week.milestones"
:key="milestone.slug"
class="flex space-x-2"
>
<p>
<TIcon
icon="check-square"
class="inline-block text-xs mt-05"
:class="
weekStatus === 'current' ? 'text-pink-600' : 'text-gray-300'
"
/>
</p>
<div>
<p class="font-semibold">{{ milestone.title }}</p>
<p>Due {{ format(new Date(milestone.deadline), 'MMM d') }}</p>
</div>
</li>
</ul>
<template #event="{ event }">
<TimelineWeekMilestone :milestone="event" />
</template>
</TimelineWeekItems>
</template>
<p v-else class="text-xs italic text-gray-400">&mdash;</p>
</div>
Expand Down
Loading

0 comments on commit 0310d80

Please sign in to comment.