traxxx/assets/components/sites/sites.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>