diff --git a/assets/components/network/network.vue b/assets/components/network/network.vue
index 23bc7096..01c62d4c 100644
--- a/assets/components/network/network.vue
+++ b/assets/components/network/network.vue
@@ -3,46 +3,35 @@
v-if="network"
class="content network"
>
-
-
+
+
Sites
-
@@ -71,6 +60,8 @@ async function mounted() {
[this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
+ this.sites = this.network.sites.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
+
this.pageTitle = this.network.name;
}
@@ -82,6 +73,7 @@ export default {
data() {
return {
network: null,
+ sites: null,
releases: null,
pageTitle: null,
};
@@ -95,31 +87,42 @@ export default {
.header {
display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
- padding: 1rem;
+ align-items: top;
+ margin: 0 0 2rem 0;
}
.title {
- display: inline-block;
- margin: 0 .5rem 0 0;
-}
+ display: inline-flex;
+ align-items: top;
+ margin: 0 1rem 0 0;
-.heading {
- padding: 0;
- margin: 0 0 1rem 0;
+ &:hover .icon {
+ fill: $primary;
+ }
}
.logo {
- height: 3rem;
+ width: 20rem;
+ max-height: 8rem;
+ object-fit: contain;
+ margin: 0 .5rem 0 0;
}
.sites {
display: grid;
grid-gap: 1rem;
- margin: 0 0 1rem 0;
+ margin: 0 0 2rem 0;
}
.sites {
grid-template-columns: repeat(auto-fit, 15rem);
}
+
+@media(max-width: $breakpoint) {
+ .sites {
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+ }
+}
diff --git a/assets/components/site/site.vue b/assets/components/site/site.vue
index f7ba1808..5a3b852a 100644
--- a/assets/components/site/site.vue
+++ b/assets/components/site/site.vue
@@ -3,62 +3,48 @@
v-if="site"
class="content site"
>
-