Added expand/collapse sidebar to desktop network sites.

This commit is contained in:
ThePendulum 2020-01-09 03:23:16 +01:00
parent 34102fae4f
commit bca925d122
3 changed files with 90 additions and 53 deletions

View File

@ -12,6 +12,7 @@
<div <div
v-show="sites.length > 0" v-show="sites.length > 0"
class="sidebar" class="sidebar"
:class="{ expanded }"
> >
<a <a
v-tooltip.bottom="`Go to ${network.url}`" v-tooltip.bottom="`Go to ${network.url}`"
@ -34,9 +35,22 @@
<Sites <Sites
v-if="sites.length" v-if="sites.length"
:sites="sites" :sites="sites"
:class="{ expanded }"
/> />
</div> </div>
<span
v-show="!expanded"
class="expand expand-sidebar noselect"
@click="expanded = true"
><Icon icon="arrow-right3" /></span>
<span
v-show="expanded"
class="expand expand-sidebar noselect"
@click="expanded = false"
><Icon icon="arrow-left3" /></span>
<div <div
class="header" class="header"
:class="{ hideable: sites.length > 0 }" :class="{ hideable: sites.length > 0 }"
@ -53,15 +67,15 @@
class="logo" class="logo"
> >
</a> </a>
<span
v-show="expanded"
class="expand collapse-header noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
</div> </div>
<div class="content-inner"> <div class="content-inner">
<span
v-show="expanded"
class="expand collapse-sites noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<Sites <Sites
v-if="sites.length" v-if="sites.length"
:sites="sites" :sites="sites"
@ -71,13 +85,13 @@
<span <span
v-show="!expanded" v-show="!expanded"
class="expand expand-sites noselect" class="expand expand-header noselect"
@click="expanded = true" @click="expanded = true"
><Icon icon="arrow-down3" /></span> ><Icon icon="arrow-down3" /></span>
<span <span
v-show="expanded" v-show="expanded"
class="expand expand-sites noselect" class="expand expand-header noselect"
@click="expanded = false" @click="expanded = false"
><Icon icon="arrow-up3" /></span> ><Icon icon="arrow-up3" /></span>
@ -170,10 +184,20 @@ export default {
flex-shrink: 0; flex-shrink: 0;
color: $text-contrast; color: $text-contrast;
overflow: hidden; overflow: hidden;
}
.sidebar .title { .title {
display: flex;
justify-content: center;
border-bottom: solid 1px $highlight-hint; border-bottom: solid 1px $highlight-hint;
}
&.expanded {
width: calc(100% - 25rem);
.logo {
max-width: 18rem;
}
}
} }
.logo { .logo {
@ -189,9 +213,9 @@ export default {
.header { .header {
width: 100%; width: 100%;
height: 3rem;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
flex-shrink: 0; flex-shrink: 0;
border-bottom: solid 1px $shadow-hint; border-bottom: solid 1px $shadow-hint;
background: $profile; background: $profile;
@ -202,7 +226,7 @@ export default {
.logo { .logo {
max-width: 20rem; max-width: 20rem;
height: 100%; max-height: 3rem;
padding: .5rem; padding: .5rem;
} }
} }
@ -217,28 +241,23 @@ export default {
cursor: pointer; cursor: pointer;
.icon { .icon {
fill: $shadow;
margin: 0 .5rem; margin: 0 .5rem;
} }
}
.expand-sites { &:hover .icon {
color: $shadow;
display: none;
.icon {
fill: $shadow;
}
&:hover {
color: $shadow-strong;
.icon {
fill: $shadow-strong; fill: $shadow-strong;
} }
}
} }
.collapse-sites { .expand-sidebar {
}
.expand-header {
display: none;
}
.collapse-header {
background: $profile; background: $profile;
color: $highlight; color: $highlight;
@ -275,10 +294,15 @@ export default {
} }
} }
.expand-sites { .expand-header {
display: flex; display: flex;
} }
.expand-sidebar,
.collapse-sidebar {
display: none;
}
.network { .network {
flex-direction: column; flex-direction: column;
} }

View File

@ -255,10 +255,11 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.info.column { .info {
padding: 1rem; padding: 1rem;
border-left: solid 1px $shadow-hint; border-left: solid 1px $shadow-hint;
border-right: solid 1px $shadow-hint; border-right: solid 1px $shadow-hint;
flex-grow: 1;
} }
.row { .row {

View File

@ -392,10 +392,12 @@
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
} }
.info.column[data-v-d4b03dc2] { .info[data-v-d4b03dc2] {
padding: 1rem; padding: 1rem;
border-left: solid 1px rgba(0, 0, 0, 0.1); border-left: solid 1px rgba(0, 0, 0, 0.1);
border-right: solid 1px rgba(0, 0, 0, 0.1); border-right: solid 1px rgba(0, 0, 0, 0.1);
-webkit-box-flex: 1;
flex-grow: 1;
} }
.row[data-v-d4b03dc2] { .row[data-v-d4b03dc2] {
display: -webkit-box; display: -webkit-box;
@ -722,8 +724,18 @@
overflow: hidden; overflow: hidden;
} }
.sidebar .title[data-v-e2e12602] { .sidebar .title[data-v-e2e12602] {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
border-bottom: solid 1px rgba(255, 255, 255, 0.075); border-bottom: solid 1px rgba(255, 255, 255, 0.075);
} }
.sidebar.expanded[data-v-e2e12602] {
width: calc(100% - 25rem);
}
.sidebar.expanded .logo[data-v-e2e12602] {
max-width: 18rem;
}
.logo[data-v-e2e12602] { .logo[data-v-e2e12602] {
width: 100%; width: 100%;
max-height: 8rem; max-height: 8rem;
@ -740,11 +752,13 @@
} }
.header[data-v-e2e12602] { .header[data-v-e2e12602] {
width: 100%; width: 100%;
height: 3rem;
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
-webkit-box-pack: center; -webkit-box-orient: vertical;
justify-content: center; -webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
flex-shrink: 0; flex-shrink: 0;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #222; background: #222;
@ -754,7 +768,7 @@
} }
.header .logo[data-v-e2e12602] { .header .logo[data-v-e2e12602] {
max-width: 20rem; max-width: 20rem;
height: 100%; max-height: 3rem;
padding: .5rem; padding: .5rem;
} }
.expand[data-v-e2e12602] { .expand[data-v-e2e12602] {
@ -770,32 +784,26 @@
cursor: pointer; cursor: pointer;
} }
.expand .icon[data-v-e2e12602] { .expand .icon[data-v-e2e12602] {
fill: rgba(0, 0, 0, 0.5);
margin: 0 .5rem; margin: 0 .5rem;
} }
.expand-sites[data-v-e2e12602] { .expand:hover .icon[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); fill: rgba(0, 0, 0, 0.7);
} }
.collapse-sites[data-v-e2e12602] { .expand-header[data-v-e2e12602] {
display: none;
}
.collapse-header[data-v-e2e12602] {
background: #222; background: #222;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.collapse-sites .icon[data-v-e2e12602] { .collapse-header .icon[data-v-e2e12602] {
fill: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5);
} }
.collapse-sites[data-v-e2e12602]:hover { .collapse-header[data-v-e2e12602]:hover {
color: #fff; color: #fff;
} }
.collapse-sites:hover .icon[data-v-e2e12602] { .collapse-header:hover .icon[data-v-e2e12602] {
fill: #fff; fill: #fff;
} }
.sites.compact[data-v-e2e12602] { .sites.compact[data-v-e2e12602] {
@ -816,10 +824,14 @@
.sites.compact.expanded[data-v-e2e12602] { .sites.compact.expanded[data-v-e2e12602] {
display: grid; display: grid;
} }
.expand-sites[data-v-e2e12602] { .expand-header[data-v-e2e12602] {
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
} }
.expand-sidebar[data-v-e2e12602],
.collapse-sidebar[data-v-e2e12602] {
display: none;
}
.network[data-v-e2e12602] { .network[data-v-e2e12602] {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;