DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Added expand/collapse to compact network sites.

This commit is contained in:
ThePendulum 2020-01-09 02:40:02 +01:00
parent 2f4a227437
commit 419e098282
27 changed files with 238 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
assets/components/networks/network.vue
View File

@ -56,6 +56,12 @@
</div>
<div class="content-inner">
<span
v-show="expanded"
class="expand collapse-sites noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<Sites
v-if="sites.length"
:sites="sites"
@ -63,6 +69,18 @@
:class="{ expanded }"
/>
<span
v-show="!expanded"
class="expand expand-sites noselect"
@click="expanded = true"
><Icon icon="arrow-down3" /></span>
<span
v-show="expanded"
class="expand expand-sites noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<Releases :releases="releases" />
</div>
</div>
@ -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 {

19
assets/components/sites/sites.vue
View File

@ -1,19 +1,6 @@
<template>
<div class="sites">
<ul class="nolist tiles">
<a
v-if="network"
:href="network.url"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
:src="`/img/logos/${network.slug}/network.png`"
class="logo"
>
</a>
<li
v-for="site in sites"
:key="`site-${site.id}`"
@ -67,7 +54,7 @@ export default {
&.expanded {
.tiles {
grid-template-columns: repeat(2, .5fr);
grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
}
}
}
@ -81,8 +68,4 @@ export default {
grid-template-columns: 1fr;
overflow-y: auto;
}
.logo {
width: 15rem;
}
</style>

5
assets/img/arrow-down.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down</title>
<path d="M16 5.5l-3-3-5 5-5-5-3 3 8 8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

5
assets/img/arrow-down15.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down15</title>
<path d="M0 4l8 8 8-8-8 4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 202 B

5
assets/img/arrow-down16.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down16</title>
<path d="M5 0h6v1h-6zM5 2h6v1h-6zM5 4h6v1h-6zM8 16l7-7h-4v-3h-6v3h-4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

5
assets/img/arrow-down3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down3</title>
<path d="M16 5.5l-1.5-1.5-6.5 6.5-6.5-6.5-1.5 1.5 8 8 8-8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

5
assets/img/arrow-down5.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-down5</title>
<path d="M3.5 6l4.5 4.5 4.5-4.5h-9z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

5
assets/img/arrow-left.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left</title>
<path d="M10.5 16l3-3-5-5 5-5-3-3-8 8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

5
assets/img/arrow-left15.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left15</title>
<path d="M12 0l-8 8 8 8-4-8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 204 B

5
assets/img/arrow-left16.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left16</title>
<path d="M15 5h1v6h-1zM13 5h1v6h-1zM11 5h1v6h-1zM0 8l7-7v4h3v6h-3v4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

5
assets/img/arrow-left3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left3</title>
<path d="M10.5 16l1.5-1.5-6.5-6.5 6.5-6.5-1.5-1.5-8 8 8 8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

5
assets/img/arrow-left5.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left5</title>
<path d="M10 3.5l-4.5 4.5 4.5 4.5v-9z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

5
assets/img/arrow-right.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right</title>
<path d="M5.5 0l-3 3 5 5-5 5 3 3 8-8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

5
assets/img/arrow-right15.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right15</title>
<path d="M4 16l8-8-8-8 4 8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 204 B

5
assets/img/arrow-right16.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right16</title>
<path d="M0 5h1v6h-1zM2 5h1v6h-1zM4 5h1v6h-1zM16 8l-7-7v4h-3v6h3v4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

5
assets/img/arrow-right3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right3</title>
<path d="M5.5 0l-1.5 1.5 6.5 6.5-6.5 6.5 1.5 1.5 8-8-8-8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

5
assets/img/arrow-right5.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right5</title>
<path d="M6 12.5l4.5-4.5-4.5-4.5v9z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

5
assets/img/arrow-up.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up</title>
<path d="M0 10.5l3 3 5-5 5 5 3-3-8-8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

5
assets/img/arrow-up15.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up15</title>
<path d="M16 12l-8-8-8 8 8-4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 203 B

5
assets/img/arrow-up16.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up16</title>
<path d="M5 15h6v1h-6zM5 13h6v1h-6zM5 11h6v1h-6zM8 0l7 7h-4v3h-6v-3h-4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

5
assets/img/arrow-up3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up3</title>
<path d="M0 10.5l1.5 1.5 6.5-6.5 6.5 6.5 1.5-1.5-8-8-8 8z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 230 B

5
assets/img/arrow-up5.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-up5</title>
<path d="M12.5 10l-4.5-4.5-4.5 4.5h9z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

6
assets/img/circle-down2.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>circle-down2</title>
<path d="M16 8c0-4.418-3.582-8-8-8s-8 3.582-8 8 3.582 8 8 8 8-3.582 8-8zM1.5 8c0-3.59 2.91-6.5 6.5-6.5s6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5z"></path>
<path d="M4.957 5.543l-1.414 1.414 4.457 4.457 4.457-4.457-1.414-1.414-3.043 3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

6
assets/img/circle-left2.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>circle-left2</title>
<path d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5z"></path>
<path d="M10.457 4.957l-1.414-1.414-4.457 4.457 4.457 4.457 1.414-1.414-3.043-3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

6
assets/img/circle-right2.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>circle-right2</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
<path d="M5.543 11.043l1.414 1.414 4.457-4.457-4.457-4.457-1.414 1.414 3.043 3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

6
assets/img/circle-up2.svg Normal file
View File

@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>circle-up2</title>
<path d="M0 8c0 4.418 3.582 8 8 8s8-3.582 8-8-3.582-8-8-8-8 3.582-8 8zM14.5 8c0 3.59-2.91 6.5-6.5 6.5s-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5z"></path>
<path d="M11.043 10.457l1.414-1.414-4.457-4.457-4.457 4.457 1.414 1.414 3.043-3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B

61
public/css/style.css
View File

@ -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;