boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
v-if="sites.length"
:sites="sites"
class="compact"
:class="{ expanded }"
/>
<template v-if="sites.length">
<span
v-show="expanded"
class="expand collapse-header noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<span
v-show="!expanded"
class="expand expand-header noselect"
@click="expanded = true"
><Icon icon="arrow-down3" /></span>
<Sites
:sites="sites"
class="compact"
:class="{ expanded }"
/>
<span
v-show="expanded"
class="expand expand-header noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<span
v-show="!expanded"
class="expand expand-header noselect"
@click="expanded = true"
><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;
.icon {
fill: $text-contrast;
}
fill: $text-contrast;
}
}
@@ -304,7 +303,8 @@ export default {
}
}
.expand-header {
.expand-header,
.collapse-header {
display: flex;
}