You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<script>
|
|
|
|
import Project from './Project.svelte'
|
|
|
|
import Comment from './Comment.svelte'
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<h1>
|
|
|
|
Projects
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<Project
|
|
|
|
title="Add Typescript support"
|
|
|
|
tasksCompleted={25}
|
|
|
|
totalTasks={57}
|
|
|
|
>
|
|
|
|
<div slot="comments">
|
|
|
|
<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
|
|
|
|
<p>Those interface tests are now passing.</p>
|
|
|
|
</Comment>
|
|
|
|
</div>
|
|
|
|
</Project>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Project
|
|
|
|
title="Update documentation"
|
|
|
|
tasksCompleted={18}
|
|
|
|
totalTasks={21}
|
|
|
|
/>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
h1 {
|
|
|
|
font-weight: 300;
|
|
|
|
margin: 0 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
ul {
|
|
|
|
list-style: none;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0.5rem;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
ul {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
li {
|
|
|
|
padding: 0.5rem;
|
|
|
|
flex: 1 1 50%;
|
|
|
|
min-width: 200px;
|
|
|
|
}
|
|
|
|
</style>
|