traxxx/assets/components/sites/sites.vue

86 lines
1.5 KiB
Vue
Raw Normal View History

2020-01-05 00:08:38 +00:00
<template>
<div class="sites">
<ul class="nolist tiles">
<a
v-if="network"
:href="network.url"
target="_blank"
rel="noopener noreferrer"
class="tile"
2020-01-05 02:02:02 +00:00
>
<img
:src="`/img/logos/${network.slug}/network.png`"
class="logo"
>
</a>
2020-01-05 02:02:02 +00:00
<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) {
.tiles {
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(2, .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 02:02:02 +00:00
.logo {
width: 15rem;
}
2020-01-05 00:08:38 +00:00
</style>