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

Slightly smaller sidebar on small desktop to leave more space for content

This commit is contained in:
Eliot Berriot 2019-03-06 18:00:33 +01:00
parent 4f98e5ae7f
commit 4ef52ebc9f
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/style/_main.scss
View File

@ -75,6 +75,9 @@
// see https://github.com/webpack/webpack/issues/215 // see https://github.com/webpack/webpack/issues/215
@import "./vendor/media"; @import "./vendor/media";
$desktop-sidebar-width: 300px;
$widedesktop-sidebar-width: 350px;
html, html,
body { body {
@include media("<desktop") { @include media("<desktop") {
@ -91,12 +94,25 @@ body {
margin-top: 2em; margin-top: 2em;
} }
.ui.wide.left.sidebar {
@include media(">desktop") {
width: $desktop-sidebar-width;
}
@include media(">widedesktop") {
width: $widedesktop-sidebar-width;
}
}
.main.pusher, .main.pusher,
.footer { .footer {
@include media(">desktop") { @include media(">desktop") {
margin-left: 350px !important; margin-left: $desktop-sidebar-width !important;
margin-top: 50px; margin-top: 50px;
} }
@include media(">widedesktop") {
margin-left: $widedesktop-sidebar-width !important;;
}
transform: none !important; transform: none !important;
} }
@ -118,11 +134,14 @@ body {
} }
@include media(">desktop") { @include media(">desktop") {
position: fixed; position: fixed;
left: 350px; left: $desktop-sidebar-width;
right: 0px; right: 0px;
top: 0px; top: 0px;
z-index: 99; z-index: 99;
} }
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
background-color: white; background-color: white;
.item { .item {
padding-top: 1.5em; padding-top: 1.5em;
@ -135,7 +154,10 @@ body {
bottom: 1em; bottom: 1em;
left: 1em; left: 1em;
@include media(">desktop") { @include media(">desktop") {
left: 350px; left: $desktop-sidebar-width;
}
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
} }
} }
.main-pusher { .main-pusher {
@ -147,7 +169,7 @@ body {
@include media(">tablet") { @include media(">tablet") {
padding: 2em; padding: 2em;
} }
@include media(">desktop") { @include media(">widedesktop") {
padding: 3em; padding: 3em;
} }
} }

3
front/src/style/vendor/_media.scss vendored
View File

@ -34,7 +34,8 @@
$breakpoints: ( $breakpoints: (
'phone': 320px, 'phone': 320px,
'tablet': 768px, 'tablet': 768px,
'desktop': 1024px 'desktop': 1024px,
'widedesktop': 1200px
) !default; ) !default;