traxxx/assets/components/sites/sites.vue

72 lines
1.2 KiB
Vue
Raw Normal View History

2020-01-05 00:08:38 +00:00
<template>
<div class="sites">
<ul class="nolist tiles">
<li
v-for="site in sites"
:key="`site-${site.id}`"
>
<SiteTile :site="site" />
</li>
</ul>
</div>
2020-01-05 00:08:38 +00:00
</template>
<script>
import SiteTile from '../tile/site.vue';
export default {
components: {
SiteTile,
},
props: {
2020-01-05 02:02:02 +00:00
network: {
type: Object,
default: null,
},
2020-01-05 00:08:38 +00:00
sites: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.sites {
overflow: hidden;
display: flex;
2020-01-05 00:08:38 +00:00
2020-01-05 01:50:55 +00:00
&.compact:not(.expanded) {
2020-01-09 01:13:37 +00:00
flex-direction: row;
.tiles {
2020-01-09 01:13:37 +00:00
display: flex;
overflow-x: auto;
}
2020-01-05 00:08:38 +00:00
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
}
2020-01-05 01:50:55 +00:00
&.expanded {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
}
2020-01-05 01:50:55 +00:00
}
2020-01-05 00:08:38 +00:00
}
2020-01-05 02:02:02 +00:00
.tiles {
display: grid;
grid-gap: 1rem;
flex-grow: 1;
padding: 1rem;
margin: 0;
grid-template-columns: 1fr;
overflow-y: auto;
}
2020-01-05 00:08:38 +00:00
</style>