Improved network sites expand/collapse layout. Left-aligned tag header.

This commit is contained in:
ThePendulum 2020-01-09 15:47:45 +01:00
parent b1a85a43a3
commit c31c2a5f19
5 changed files with 61 additions and 46 deletions

View File

@ -67,17 +67,17 @@
class="logo" class="logo"
> >
</a> </a>
</div>
<div class="content-inner">
<template v-if="sites.length">
<span <span
v-show="expanded" v-show="expanded"
class="expand collapse-header noselect" class="expand collapse-header noselect"
@click="expanded = false" @click="expanded = false"
><Icon icon="arrow-up3" /></span> ><Icon icon="arrow-up3" /></span>
</div>
<div class="content-inner">
<Sites <Sites
v-if="sites.length"
:sites="sites" :sites="sites"
class="compact" class="compact"
:class="{ expanded }" :class="{ expanded }"
@ -94,6 +94,7 @@
class="expand expand-header noselect" class="expand expand-header noselect"
@click="expanded = false" @click="expanded = false"
><Icon icon="arrow-up3" /></span> ><Icon icon="arrow-up3" /></span>
</template>
<Releases :releases="releases" /> <Releases :releases="releases" />
</div> </div>
@ -264,25 +265,23 @@ export default {
.collapse-header { .collapse-header {
width: 100%; width: 100%;
display: flex; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0;
background: $profile; background: $profile;
color: $highlight;
.icon { .icon {
width: 100%;
fill: $highlight; fill: $highlight;
padding: .5rem 0;
} }
&:hover { &:hover .icon {
background: $highlight-hint; background: $highlight-hint;
color: $text-contrast;
.icon {
fill: $text-contrast; fill: $text-contrast;
} }
} }
}
.sites.compact { .sites.compact {
display: none; display: none;
@ -304,7 +303,8 @@ export default {
} }
} }
.expand-header { .expand-header,
.collapse-header {
display: flex; display: flex;
} }

View File

@ -76,4 +76,16 @@ export default {
/* vertical grid-gap not compatible with bottom padding on scrolling containers */ /* vertical grid-gap not compatible with bottom padding on scrolling containers */
margin: 0 0 1rem 0; 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> </style>

View File

@ -55,7 +55,6 @@ export default {
.photos { .photos {
background: $profile; background: $profile;
display: flex; display: flex;
justify-content: center;
padding: 0 1rem; padding: 0 1rem;
overflow: hidden; overflow: hidden;

View File

@ -136,7 +136,6 @@ export default {
background: $profile; background: $profile;
color: $text-contrast; color: $text-contrast;
display: none; display: none;
justify-content: center;
padding: .5rem 1rem; padding: .5rem 1rem;
.title { .title {

View File

@ -690,6 +690,16 @@
/* vertical grid-gap not compatible with bottom padding on scrolling containers */ /* vertical grid-gap not compatible with bottom padding on scrolling containers */
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
@media (max-width: 1200px) {
.sites.expanded .tiles[data-v-7bebaa3e] {
grid-template-columns: repeat(auto-fit, minmax(12rem, 0.5fr));
}
}
@media (max-width: 540px) {
.sites.expanded .tiles[data-v-7bebaa3e] {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
/* $primary: #ff886c; */ /* $primary: #ff886c; */
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */ /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
@ -807,23 +817,21 @@
} }
.collapse-header[data-v-e2e12602] { .collapse-header[data-v-e2e12602] {
width: 100%; width: 100%;
display: -webkit-box; display: none;
display: flex;
-webkit-box-pack: center; -webkit-box-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
padding: 0;
background: #222; background: #222;
color: rgba(255, 255, 255, 0.5);
} }
.collapse-header .icon[data-v-e2e12602] { .collapse-header .icon[data-v-e2e12602] {
width: 100%;
fill: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5);
} padding: .5rem 0;
.collapse-header[data-v-e2e12602]:hover {
background: rgba(255, 255, 255, 0.075);
color: #fff;
} }
.collapse-header:hover .icon[data-v-e2e12602] { .collapse-header:hover .icon[data-v-e2e12602] {
background: rgba(255, 255, 255, 0.075);
fill: #fff; fill: #fff;
} }
.sites.compact[data-v-e2e12602] { .sites.compact[data-v-e2e12602] {
@ -844,7 +852,8 @@
.sites.compact.expanded[data-v-e2e12602] { .sites.compact.expanded[data-v-e2e12602] {
display: grid; display: grid;
} }
.expand-header[data-v-e2e12602] { .expand-header[data-v-e2e12602],
.collapse-header[data-v-e2e12602] {
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
} }
@ -1251,8 +1260,6 @@
background: #222; background: #222;
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
-webkit-box-pack: center;
justify-content: center;
padding: 0 1rem; padding: 0 1rem;
overflow: hidden; overflow: hidden;
} }
@ -1316,8 +1323,6 @@
background: #222; background: #222;
color: #fff; color: #fff;
display: none; display: none;
-webkit-box-pack: center;
justify-content: center;
padding: .5rem 1rem; padding: .5rem 1rem;
} }
.header .title[data-v-7f130e7f] { .header .title[data-v-7f130e7f] {