Make the list list page look good

This commit is contained in:
Sol Fisher Romanoff 2022-06-15 20:32:46 +03:00
parent d2c82a04d9
commit 3d18dd7e47
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
2 changed files with 30 additions and 5 deletions

View file

@ -1,9 +1,33 @@
<template>
<div>
<router-link :to="listLink(list.id)">
{{ list.title }}
</router-link>
</div>
<router-link
:to="listLink(list.id)"
class="list-card"
>
{{ list.title }}
</router-link>
</template>
<script src="./list_card.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.list-card {
margin: 0;
padding: 1em;
display: flex;
flex: 1 0;
color: $fallback--link;
color: var(--link, $fallback--link);
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
}
</style>

View file

@ -10,6 +10,7 @@
v-for="list in lists.slice().reverse()"
:key="list"
:list="list"
class="list-item"
/>
</div>
</div>