MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch '118-sidebar-tabs' into 'develop' 

Improve the style of the sidebar

Closes #118 and #67

See merge request funkwhale/funkwhale!94
This commit is contained in:
Eliot Berriot 2018-03-18 16:43:45 +00:00
parent a29a92bc21 521af32bf8
commit 0a8fa8a3fc
2 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/118.feature Normal file
View File

@ -0,0 +1 @@
Improve the style of the sidebar to make it easier to understand which tab is selected (#118)

49
front/src/components/Sidebar.vue
View File

@ -148,7 +148,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '../style/vendor/media'; @import '../style/vendor/media';
$sidebar-color: #1B1C1D; $sidebar-color: #3D3E3F;
.sidebar { .sidebar {
background: $sidebar-color; background: $sidebar-color;
@ -159,7 +159,7 @@ $sidebar-color: #1B1C1D;
} }
@include media(">desktop") { @include media(">desktop") {
.collapse.button { .collapse.button {
display: none; display: none !important;
} }
} }
@include media("<desktop") { @include media("<desktop") {
@ -176,16 +176,26 @@ $sidebar-color: #1B1C1D;
margin: 0; margin: 0;
background-color: $sidebar-color; background-color: $sidebar-color;
} }
.menu { .menu.vertical {
background: $sidebar-color;
} }
} }
.menu-area { .menu-area {
padding: 0.5rem;
.menu .item:not(.active):not(:hover) { .menu .item:not(.active):not(:hover) {
background-color: rgba(255, 255, 255, 0.06); opacity: 0.75;
} }
.menu .item {
border-radius: 0;
}
.menu .item.active {
background-color: $sidebar-color;
&:hover {
background-color: rgba(255, 255, 255, 0.06);
}
}
} }
.tabs { .tabs {
overflow-y: auto; overflow-y: auto;
@ -216,14 +226,33 @@ $sidebar-color: #1B1C1D;
.logo { .logo {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin: 0px;
} }
.ui.search { .ui.search {
display: block; display: flex;
.collapse.button {
margin-right: 0.5rem; .collapse.button, .collapse.button:hover, .collapse.button:active {
margin-top: 0.5rem; box-shadow: none !important;
float: right; margin: 0px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.ui.message.black {
background: $sidebar-color;
}
</style>
<style lang="scss">
.sidebar {
.ui.search .input {
flex: 1;
.prompt {
border-radius: 0;
}
} }
} }
</style> </style>