traxxx/assets/components/sites/sites.vue

<template>
    <div class="sites">
        <ul class="nolist tiles">
            <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>
    </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;

    &.compact:not(.expanded) {
        .tiles {
            overflow-x: auto;
        }

        .tile {
            width: 15rem;
            margin: 0 1rem 0 0;
        }
    }

    &.expanded {
        .tiles {
            grid-template-columns: repeat(2, .5fr);
        }
    }
}

.tiles {
    display: grid;
    grid-gap: 1rem;
    flex-grow: 1;
    padding: 1rem;
    margin: 0;
    grid-template-columns: 1fr;
    overflow-y: auto;
}

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