traxxx/assets/components/sites/sites.vue

95 lines
1.7 KiB
Vue

<template>
<div class="sites">
<ul class="nolist tiles">
<li
v-for="site in sites"
:key="`site-${site.id}`"
class="site"
>
<SiteTile :site="site" />
</li>
</ul>
</div>
</template>
<script>
import SiteTile from '../tile/site.vue';
export default {
components: {
SiteTile,
},
props: {
network: {
type: Object,
default: null,
},
sites: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.sites {
overflow: hidden;
display: flex;
flex-grow: 1;
&.compact:not(.expanded) {
flex-direction: row;
.tiles {
display: flex;
overflow-x: auto;
}
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
}
&.expanded {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
}
&.compact .tiles {
padding: 0 1rem 1rem 1rem;
}
}
}
.tiles {
display: grid;
grid-gap: 0 1rem;
flex-grow: 1;
padding: 1rem;
grid-template-columns: 1fr;
overflow-y: auto;
scrollbar-color: $highlight-weak $profile;
}
.site {
/* vertical grid-gap not compatible with bottom padding on scrolling containers */
margin: 0 0 1rem 0;
}
@media(max-width: $breakpoint3) {
.sites.expanded .tiles {
grid-template-columns: repeat(auto-fit, minmax(12rem, .5fr));
}
}
@media(max-width: $breakpoint0) {
.sites.expanded .tiles {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
</style>