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;