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

assets/components/networks/network.vue

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

assets/components/sites/sites.vue

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

assets/components/tags/photos.vue

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

assets/components/tags/tag.vue

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

public/css/style.css

@@ -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: none;
-  display: flex;
   -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);
-}
+    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] {
-      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] {