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

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

View File

@@ -690,6 +690,16 @@
/* vertical grid-gap not compatible with bottom padding on scrolling containers */
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; */
/* $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,24 +817,22 @@
}
.collapse-header[data-v-e2e12602] {
width: 100%;
display: -webkit-box;
display: flex;
display: none;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
padding: 0;
background: #222;
color: rgba(255, 255, 255, 0.5);
}
.collapse-header .icon[data-v-e2e12602] {
width: 100%;
fill: rgba(255, 255, 255, 0.5);
}
.collapse-header[data-v-e2e12602]:hover {
background: rgba(255, 255, 255, 0.075);
color: #fff;
padding: .5rem 0;
}
.collapse-header:hover .icon[data-v-e2e12602] {
fill: #fff;
background: rgba(255, 255, 255, 0.075);
fill: #fff;
}
.sites.compact[data-v-e2e12602] {
display: none;
@@ -844,7 +852,8 @@
.sites.compact.expanded[data-v-e2e12602] {
display: grid;
}
.expand-header[data-v-e2e12602] {
.expand-header[data-v-e2e12602],
.collapse-header[data-v-e2e12602] {
display: -webkit-box;
display: flex;
}
@@ -1251,8 +1260,6 @@
background: #222;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
padding: 0 1rem;
overflow: hidden;
}
@@ -1316,8 +1323,6 @@
background: #222;
color: #fff;
display: none;
-webkit-box-pack: center;
justify-content: center;
padding: .5rem 1rem;
}
.header .title[data-v-7f130e7f] {