From 666aaf0177fbc2364655e1df0b93220a2d14bbfa Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 6 Mar 2019 18:00:33 +0100
Subject: [PATCH] Slightly smaller sidebar on small desktop to leave more space
for content
---
front/src/style/_main.scss | 30 ++++++++++++++++++++++++++----
front/src/style/vendor/_media.scss | 3 ++-
2 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index ebd63d27..38705d25 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -75,6 +75,9 @@
// see https://github.com/webpack/webpack/issues/215
@import "./vendor/media";
+$desktop-sidebar-width: 300px;
+$widedesktop-sidebar-width: 350px;
+
html,
body {
@include media("<desktop") {
@@ -91,12 +94,25 @@ body {
margin-top: 2em;
}
+.ui.wide.left.sidebar {
+ @include media(">desktop") {
+ width: $desktop-sidebar-width;
+ }
+
+ @include media(">widedesktop") {
+ width: $widedesktop-sidebar-width;
+ }
+}
.main.pusher,
.footer {
@include media(">desktop") {
- margin-left: 350px !important;
+ margin-left: $desktop-sidebar-width !important;
margin-top: 50px;
}
+
+ @include media(">widedesktop") {
+ margin-left: $widedesktop-sidebar-width !important;;
+ }
transform: none !important;
}
@@ -118,11 +134,14 @@ body {
}
@include media(">desktop") {
position: fixed;
- left: 350px;
+ left: $desktop-sidebar-width;
right: 0px;
top: 0px;
z-index: 99;
}
+ @include media(">widedesktop") {
+ left: $widedesktop-sidebar-width;
+ }
background-color: white;
.item {
padding-top: 1.5em;
@@ -135,7 +154,10 @@ body {
bottom: 1em;
left: 1em;
@include media(">desktop") {
- left: 350px;
+ left: $desktop-sidebar-width;
+ }
+ @include media(">widedesktop") {
+ left: $widedesktop-sidebar-width;
}
}
.main-pusher {
@@ -147,7 +169,7 @@ body {
@include media(">tablet") {
padding: 2em;
}
- @include media(">desktop") {
+ @include media(">widedesktop") {
padding: 3em;
}
}
diff --git a/front/src/style/vendor/_media.scss b/front/src/style/vendor/_media.scss
index 2328eff8..8d24baa7 100644
--- a/front/src/style/vendor/_media.scss
+++ b/front/src/style/vendor/_media.scss
@@ -34,7 +34,8 @@
$breakpoints: (
'phone': 320px,
'tablet': 768px,
- 'desktop': 1024px
+ 'desktop': 1024px,
+ 'widedesktop': 1200px
) !default;
--
GitLab