diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue
index c0379439b..5ebb30c47 100644
--- a/assets/components/networks/network.vue
+++ b/assets/components/networks/network.vue
@@ -45,11 +45,34 @@
-
+ >
+ ⇱ collapse
+
+
+
+ expand ⇲
+
+ ⇱ collapse
+
@@ -89,6 +112,7 @@ export default {
sites: null,
releases: [],
pageTitle: null,
+ expanded: false,
};
},
mounted,
@@ -119,14 +143,22 @@ export default {
overflow-y: auto;
}
+.content-inner {
+ padding: 0;
+}
+
+.releases {
+ padding: 1rem;
+}
+
.sidebar {
height: 100%;
width: 18rem;
display: flex;
flex-direction: column;
flex-shrink: 0;
- color: $text-contrast;
border-right: solid 1px $shadow-hint;
+ color: $text-contrast;
overflow: hidden;
}
@@ -146,11 +178,8 @@ export default {
filter: $logo-shadow;
}
-.sites.compact {
- display: none;
-}
-
.header {
+ background: $profile;
width: 100%;
height: 4rem;
display: none;
@@ -158,6 +187,19 @@ export default {
border-bottom: solid 1px $shadow-hint;
}
+.sites.compact {
+ display: none;
+}
+
+.expand {
+ display: none;
+ padding: .5rem;
+ text-align: center;
+ cursor: pointer;
+ font-size: .9rem;
+ font-weight: bold;
+}
+
@media(max-width: $breakpoint) {
.header {
display: flex;
@@ -165,7 +207,14 @@ export default {
.sites.compact {
display: flex;
- padding: 0 1rem 1rem 1rem;
+
+ &.expanded {
+ display: grid;
+ }
+ }
+
+ .expand {
+ display: block;
}
.network {
diff --git a/assets/components/sites/site.vue b/assets/components/sites/site.vue
index 39545a5cf..4cec1957a 100644
--- a/assets/components/sites/site.vue
+++ b/assets/components/sites/site.vue
@@ -5,52 +5,42 @@
>
-
-
+
+
- {{ site.description }}
-
-
+
+
@@ -93,19 +83,16 @@ export default {
@import 'theme';
.header {
+ background: $profile;
display: flex;
+ align-items: center;
flex-wrap: wrap;
justify-content: space-between;
+ border-bottom: solid 1px $shadow-weak;
}
.title {
- display: inline-flex;
- align-items: top;
- margin: 0 1rem 0 0;
-
- &:hover .icon {
- fill: $primary;
- }
+ padding: 1rem;
}
.heading {
@@ -122,7 +109,7 @@ export default {
.logo {
width: 20rem;
- max-height: 8rem;
+ max-height: 6rem;
object-fit: contain;
margin: 0 .5rem 1rem 0;
}
@@ -132,16 +119,6 @@ export default {
align-items: center;
}
-.networklogo {
- color: $text;
- width: 15rem;
- max-height: 6rem;
- font-weight: bold;
- object-fit: contain;
- object-position: 100% 0;
- margin: 0 0 0 .5rem;
-}
-
.sites,
.scenes {
display: grid;
diff --git a/assets/components/sites/sites.vue b/assets/components/sites/sites.vue
index 5d71702c1..737e78707 100644
--- a/assets/components/sites/sites.vue
+++ b/assets/components/sites/sites.vue
@@ -36,8 +36,7 @@ export default {
grid-template-columns: 1fr;
overflow-y: auto;
- &.compact {
- display: flex;
+ &.compact:not(.expanded) {
overflow-x: auto;
.tile {
@@ -45,5 +44,9 @@ export default {
margin: 0 1rem 0 0;
}
}
+
+ &.expanded {
+ grid-template-columns: repeat(2, .5fr);
+ }
}
diff --git a/public/css/style.css b/public/css/style.css
index d6877fb73..bd12cbad9 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -520,21 +520,18 @@
/* $primary: #ff886c; */
.header[data-v-194630f6] {
+ background: #222;
display: -webkit-box;
display: flex;
+ -webkit-box-align: center;
+ align-items: center;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
+ border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.title[data-v-194630f6] {
- display: -webkit-inline-box;
- display: inline-flex;
- -webkit-box-align: top;
- align-items: top;
- margin: 0 1rem 0 0;
-}
-.title:hover .icon[data-v-194630f6] {
- fill: #ff6c88;
+ padding: 1rem;
}
.heading[data-v-194630f6] {
padding: 0;
@@ -552,7 +549,7 @@
}
.logo[data-v-194630f6] {
width: 20rem;
- max-height: 8rem;
+ max-height: 6rem;
-o-object-fit: contain;
object-fit: contain;
margin: 0 .5rem 1rem 0;
@@ -563,17 +560,6 @@
-webkit-box-align: center;
align-items: center;
}
-.networklogo[data-v-194630f6] {
- color: #222;
- width: 15rem;
- max-height: 6rem;
- font-weight: bold;
- -o-object-fit: contain;
- object-fit: contain;
- -o-object-position: 100% 0;
- object-position: 100% 0;
- margin: 0 0 0 .5rem;
-}
.sites[data-v-194630f6],
.scenes[data-v-194630f6] {
display: grid;
@@ -640,15 +626,16 @@
grid-template-columns: 1fr;
overflow-y: auto;
}
-.sites.compact[data-v-7bebaa3e] {
- display: -webkit-box;
- display: flex;
+.sites.compact[data-v-7bebaa3e]:not(.expanded) {
overflow-x: auto;
}
-.sites.compact .tile[data-v-7bebaa3e] {
+.sites.compact:not(.expanded) .tile[data-v-7bebaa3e] {
width: 15rem;
margin: 0 1rem 0 0;
}
+.sites.expanded[data-v-7bebaa3e] {
+ grid-template-columns: repeat(2, 0.5fr);
+}
/* $primary: #ff886c; */
@media (max-width: 1200px) {
@@ -670,6 +657,12 @@
justify-content: stretch;
overflow-y: auto;
}
+.content-inner[data-v-e2e12602] {
+ padding: 0;
+}
+.releases[data-v-e2e12602] {
+ padding: 1rem;
+}
.sidebar[data-v-e2e12602] {
height: 100%;
width: 18rem;
@@ -679,8 +672,8 @@
-webkit-box-direction: normal;
flex-direction: column;
flex-shrink: 0;
- color: #fff;
border-right: solid 1px rgba(0, 0, 0, 0.1);
+ color: #fff;
overflow: hidden;
}
.sidebar .title[data-v-e2e12602] {
@@ -701,10 +694,8 @@
-webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
}
-.sites.compact[data-v-e2e12602] {
- display: none;
-}
.header[data-v-e2e12602] {
+ background: #222;
width: 100%;
height: 4rem;
display: none;
@@ -712,6 +703,17 @@
justify-content: center;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
+.sites.compact[data-v-e2e12602] {
+ display: none;
+}
+.expand[data-v-e2e12602] {
+ display: none;
+ padding: .5rem;
+ text-align: center;
+ cursor: pointer;
+ font-size: .9rem;
+ font-weight: bold;
+}
@media (max-width: 720px) {
.header[data-v-e2e12602] {
display: -webkit-box;
@@ -720,7 +722,12 @@
.sites.compact[data-v-e2e12602] {
display: -webkit-box;
display: flex;
- padding: 0 1rem 1rem 1rem;
+}
+.sites.compact.expanded[data-v-e2e12602] {
+ display: grid;
+}
+.expand[data-v-e2e12602] {
+ display: block;
}
.network[data-v-e2e12602] {
-webkit-box-orient: vertical;