traxxx/assets/components/sites/sites.vue

<template>
    <ul class="nolist sites">
        <a
            v-if="network"
            :href="network.url"
            target="_blank"
            rel="noopener noreferrer"
            class="tile"
        >
            <img
                :src="`/img/logos/${network.slug}/network.png`"
                class="logo"
            >
        </a>

        <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: {
        network: {
            type: Object,
            default: null,
        },
        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);
    }
}

.logo {
    width: 15rem;
}
</style>