diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue
index db0496c1..09c943dd 100644
--- a/assets/components/networks/network.vue
+++ b/assets/components/networks/network.vue
@@ -56,6 +56,12 @@
+
+
+
+
+
+
@@ -189,23 +207,60 @@ export default {
}
}
+.expand {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: .5rem 0 0 0;
+ font-weight: bold;
+ font-size: .9rem;
+ cursor: pointer;
+
+ .icon {
+ margin: 0 .5rem;
+ }
+}
+
+.expand-sites {
+ color: $shadow;
+ display: none;
+
+ .icon {
+ fill: $shadow;
+ }
+
+ &:hover {
+ color: $shadow-strong;
+
+ .icon {
+ fill: $shadow-strong;
+ }
+ }
+}
+
+.collapse-sites {
+ background: $profile;
+ color: $highlight;
+
+ .icon {
+ fill: $highlight;
+ }
+
+ &:hover {
+ color: $text-contrast;
+
+ .icon {
+ fill: $text-contrast;
+ }
+ }
+}
+
.sites.compact {
display: none;
background: $profile;
grid-row: 1;
}
-.expand {
- display: none;
- color: $text-contrast;
- background: $profile;
- padding: .5rem;
- text-align: center;
- cursor: pointer;
- font-size: .9rem;
- font-weight: bold;
-}
-
@media(max-width: $breakpoint3) {
.header,
.header.hideable {
@@ -220,8 +275,8 @@ export default {
}
}
- .expand {
- display: block;
+ .expand-sites {
+ display: flex;
}
.network {
diff --git a/assets/components/sites/sites.vue b/assets/components/sites/sites.vue
index 6d335090..5d60ff6d 100644
--- a/assets/components/sites/sites.vue
+++ b/assets/components/sites/sites.vue
@@ -1,19 +1,6 @@
-
-
-
-
-
diff --git a/assets/img/arrow-down.svg b/assets/img/arrow-down.svg
new file mode 100644
index 00000000..6a74f804
--- /dev/null
+++ b/assets/img/arrow-down.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-down15.svg b/assets/img/arrow-down15.svg
new file mode 100644
index 00000000..b07a9fbc
--- /dev/null
+++ b/assets/img/arrow-down15.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-down16.svg b/assets/img/arrow-down16.svg
new file mode 100644
index 00000000..26974799
--- /dev/null
+++ b/assets/img/arrow-down16.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-down3.svg b/assets/img/arrow-down3.svg
new file mode 100644
index 00000000..f52809e9
--- /dev/null
+++ b/assets/img/arrow-down3.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-down5.svg b/assets/img/arrow-down5.svg
new file mode 100644
index 00000000..404fc6ff
--- /dev/null
+++ b/assets/img/arrow-down5.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-left.svg b/assets/img/arrow-left.svg
new file mode 100644
index 00000000..6b54573c
--- /dev/null
+++ b/assets/img/arrow-left.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-left15.svg b/assets/img/arrow-left15.svg
new file mode 100644
index 00000000..74c0b81c
--- /dev/null
+++ b/assets/img/arrow-left15.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-left16.svg b/assets/img/arrow-left16.svg
new file mode 100644
index 00000000..27b87bca
--- /dev/null
+++ b/assets/img/arrow-left16.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-left3.svg b/assets/img/arrow-left3.svg
new file mode 100644
index 00000000..132a552b
--- /dev/null
+++ b/assets/img/arrow-left3.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-left5.svg b/assets/img/arrow-left5.svg
new file mode 100644
index 00000000..400e3f70
--- /dev/null
+++ b/assets/img/arrow-left5.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-right.svg b/assets/img/arrow-right.svg
new file mode 100644
index 00000000..f855ab39
--- /dev/null
+++ b/assets/img/arrow-right.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-right15.svg b/assets/img/arrow-right15.svg
new file mode 100644
index 00000000..093b1388
--- /dev/null
+++ b/assets/img/arrow-right15.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-right16.svg b/assets/img/arrow-right16.svg
new file mode 100644
index 00000000..3b0ed7e5
--- /dev/null
+++ b/assets/img/arrow-right16.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-right3.svg b/assets/img/arrow-right3.svg
new file mode 100644
index 00000000..5ae1635a
--- /dev/null
+++ b/assets/img/arrow-right3.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-right5.svg b/assets/img/arrow-right5.svg
new file mode 100644
index 00000000..e519fd6e
--- /dev/null
+++ b/assets/img/arrow-right5.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-up.svg b/assets/img/arrow-up.svg
new file mode 100644
index 00000000..5d6ea727
--- /dev/null
+++ b/assets/img/arrow-up.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-up15.svg b/assets/img/arrow-up15.svg
new file mode 100644
index 00000000..b9125cbe
--- /dev/null
+++ b/assets/img/arrow-up15.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-up16.svg b/assets/img/arrow-up16.svg
new file mode 100644
index 00000000..0837c771
--- /dev/null
+++ b/assets/img/arrow-up16.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-up3.svg b/assets/img/arrow-up3.svg
new file mode 100644
index 00000000..c0ca340c
--- /dev/null
+++ b/assets/img/arrow-up3.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/arrow-up5.svg b/assets/img/arrow-up5.svg
new file mode 100644
index 00000000..02f5fb37
--- /dev/null
+++ b/assets/img/arrow-up5.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/circle-down2.svg b/assets/img/circle-down2.svg
new file mode 100644
index 00000000..ba8e5a46
--- /dev/null
+++ b/assets/img/circle-down2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/img/circle-left2.svg b/assets/img/circle-left2.svg
new file mode 100644
index 00000000..e9fbeda3
--- /dev/null
+++ b/assets/img/circle-left2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/img/circle-right2.svg b/assets/img/circle-right2.svg
new file mode 100644
index 00000000..7d320d88
--- /dev/null
+++ b/assets/img/circle-right2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/img/circle-up2.svg b/assets/img/circle-up2.svg
new file mode 100644
index 00000000..0a58bb95
--- /dev/null
+++ b/assets/img/circle-up2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/public/css/style.css b/public/css/style.css
index 368f8e93..e0ff7c25 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -665,7 +665,7 @@
margin: 0 1rem 0 0;
}
.sites.expanded .tiles[data-v-7bebaa3e] {
- grid-template-columns: repeat(2, 0.5fr);
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
}
.tiles[data-v-7bebaa3e] {
display: grid;
@@ -677,9 +677,6 @@
grid-template-columns: 1fr;
overflow-y: auto;
}
-.logo[data-v-7bebaa3e] {
- width: 15rem;
-}
/* $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); */
@@ -755,21 +752,52 @@
height: 100%;
padding: .5rem;
}
+.expand[data-v-e2e12602] {
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: center;
+ padding: .5rem 0 0 0;
+ font-weight: bold;
+ font-size: .9rem;
+ cursor: pointer;
+}
+.expand .icon[data-v-e2e12602] {
+ margin: 0 .5rem;
+}
+.expand-sites[data-v-e2e12602] {
+ color: rgba(0, 0, 0, 0.5);
+ display: none;
+}
+.expand-sites .icon[data-v-e2e12602] {
+ fill: rgba(0, 0, 0, 0.5);
+}
+.expand-sites[data-v-e2e12602]:hover {
+ color: rgba(0, 0, 0, 0.7);
+}
+.expand-sites:hover .icon[data-v-e2e12602] {
+ fill: rgba(0, 0, 0, 0.7);
+}
+.collapse-sites[data-v-e2e12602] {
+ background: #222;
+ color: rgba(255, 255, 255, 0.5);
+}
+.collapse-sites .icon[data-v-e2e12602] {
+ fill: rgba(255, 255, 255, 0.5);
+}
+.collapse-sites[data-v-e2e12602]:hover {
+ color: #fff;
+}
+.collapse-sites:hover .icon[data-v-e2e12602] {
+ fill: #fff;
+}
.sites.compact[data-v-e2e12602] {
display: none;
background: #222;
grid-row: 1;
}
-.expand[data-v-e2e12602] {
- display: none;
- color: #fff;
- background: #222;
- padding: .5rem;
- text-align: center;
- cursor: pointer;
- font-size: .9rem;
- font-weight: bold;
-}
@media (max-width: 1200px) {
.header[data-v-e2e12602],
.header.hideable[data-v-e2e12602] {
@@ -783,8 +811,9 @@
.sites.compact.expanded[data-v-e2e12602] {
display: grid;
}
-.expand[data-v-e2e12602] {
- display: block;
+.expand-sites[data-v-e2e12602] {
+ display: -webkit-box;
+ display: flex;
}
.network[data-v-e2e12602] {
-webkit-box-orient: vertical;