traxxx/assets/components/sites/sites.vue

53 lines
851 B
Vue

<template>
<ul class="nolist sites">
<li
v-for="site in sites"
:key="`site-${site.id}`"
>
<SiteTile :site="site" />
</li>
</ul>
</template>
<script>
import SiteTile from '../tile/site.vue';
export default {
components: {
SiteTile,
},
props: {
sites: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.sites {
display: grid;
grid-gap: 1rem;
padding: 1rem;
margin: 0;
grid-template-columns: 1fr;
overflow-y: auto;
&.compact:not(.expanded) {
overflow-x: auto;
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
}
&.expanded {
grid-template-columns: repeat(2, .5fr);
}
}
</style>